Prasības pēc tīmekļa dizaina arvien vairāk ietver uzlabotu tīmekļa pieejamību. Bet vai nepietiek ar vietnes optimizāciju visām galvenajām pārlūkprogrammām ar vairāku ierīču saderību? Izmantojot Google Lighthouse, varat viegli izmērīt savas vietnes veiktspēju, pieejamību, paraugpraksi un SEO. Tātad, kāpēc pieejamībai ir nozīme?

Saskaņā ar Slimību kontroles un profilakses centru (CDC) vairāk nekā 60 miljoni amerikāņu dzīvo ar invaliditāti. Ievērojot tīmekļa satura pieejamības vadlīnijas, varat ieviest dažus sākotnējus apsvērumus, kas palīdzēs padarīt pieejamu vietni. Šeit ir viss nepieciešamais, lai sāktu darbu ar tīmekļa pieejamību, izmantojot HTML un CSS.

Strukturēts HTML ar pareizu semantiku

Padarot vietni vizuāli pievilcīgu, palīgtehnoloģiju lietotājiem nevajadzētu sajaukt. Lai gan daudzas satura pārvaldības sistēmas, piemēram, WordPress, izmanto HTML, jūsu pienākums ir vēlreiz pārbaudīt un apstiprināt, ka tas tiek lietots pareizi.

Piemēram, a

Lasīt vairāk: Vienkārši HTML kodu piemēri, kurus varat iemācīties 10 minūtēs

Semantisko HTML ir vieglāk izstrādāt, jo kopā ar to jūs iegūsit papildu funkcijas. Tas lieliski darbojas mobilajās ierīcēs. Turklāt, ja jūs piešķirat nozīmi atslēgvārdiem, kas ietīti iekšā

vai tagu, tas palīdz SEO.

Strukturēts saturs ekrāna lasītāju lietotājiem

Šeit ir piemērs par semantisko HTML labu vs. slikti.

Labs semantiskais HTML
Mans virsraksts

Lūk, kā jūs varat izveidot pieejamu vietni, izmantojot HTML un CSS

Mans otrais virsraksts

Slikts semantiskais HTML
Mans virsraksts

Lūk, kā jūs varat izveidot pieejamu vietni, izmantojot HTML un CSS

Pirmajā gadījumā ekrāna lasītājiem ir diezgan viegli orientēties. Tajā tiks nolasīta galvene, kas informē par virsrakstu un rindkopu. Pēc katra elementa tas apstāsies uz sekundi. Varat izlaist dažus virsrakstus vai atgriezties iepriekšējā, izmantojot taustiņu Enter/Return. Varat arī izveidot satura rādītāju, izmantojot galvenes tagu.

Rakstot prezentējošu HTML, nevis semantisku HTML (otrajā gadījumā), līnija pārtraucas nevajadzīgi un rada sliktu pieredzi. Tas ir tāpat kā sagatavot milzu bloku, kuru ir daudz grūtāk kaskādēt un manipulēt, jo nav potenciālo atlasītāju.

Valoda un izkārtojumi pieejamai vietnei

Jums vajadzētu izmantot precīzu valodu ar paplašinātiem akronīmiem un saīsinājumiem. Ja iespējams, mēģiniet izvairīties no svītrām, rakstot 9-5 -> 9 līdz 5. Iepriekš HTML tabulas tika izmantotas, lai izveidotu lapu izkārtojumus. Iepriekš tas kavēja pareizos rādījumus, jo ligzdotās tabulas veidoja diezgan sarežģītu izkārtojumu. Šeit ir mūsdienīga vietnes struktūra:

Šī ir galvene



Galvenās lapas saturs

kas satur rakstu

Raksta virsraksts

raksta saturu



Vietnes kājene

Tātad, kā redzat, šis izkārtojums ir draudzīgs ekrāna lasītājam. Marķējums ir saprotams ar skaidru un kodolīgu kodu. Turklāt to ir viegli uzturēt, un lejupielādes laikā ir nepieciešams mazāks joslas platums. Pārliecinieties, vai avota kodu esat ievietojis loģiski; tas mainīs visu.

Pārskatiet lietotāja saskarnes vadīklas, tabulas un alternatīvo tekstu

Visbiežāk lietotāja saskarnes vadīklas ir jūsu tīmekļa dokumenta pogas, veidlapas un saišu vadīklas. Īkšķis ir tāds, ka ar tiem var manipulēt ar tastatūru. Viņiem ir noteikts noklusējuma stils (dažādās pārlūkprogrammās tie var atšķirties), kur varat pāriet uz citām opcijām, izmantojot tabulēšanas taustiņu, un nospiest Enter/Return, lai izdarītu secinājumu. Jūs varat pārvaldīt teksta etiķetes, pievienojot atšķirīgus un nozīmīgus enkura tekstus, nevis "noklikšķiniet šeit".

Lai izveidotu pieejamas tabulas, pievienojiet tabulu galvenes

un norādiet rindas vai kolonnas, izmantojot darbības jomas atribūtu. Turklāt jūs varat izmantot vai kopsavilkuma atribūtu, lai ekrāna lasītājiem sniegtu ātru pārskatu par tabulas saturu.

Alternatīvais teksts sniedz tīmekļa rāpuļprogrammām un ekrāna lasītājiem attēla vai videoklipa kontekstuālo informāciju. Ja jūsu attēls ir dekoratīvs, labāk alt tagu atstāt tukšu. Pretējā gadījumā detalizēta attēla apraksta sniegšana ļoti palīdz.

Vairumā gadījumu ekrāna lasītājs nolasa alternatīvo tekstu, faila nosaukumu un nosaukuma atribūtu (varat to izlaist). Turklāt, ja nevēlaties izmantot alternatīvo tekstu vai vēlaties pievienot vienu un to pašu etiķeti vairākiem attēliem, šeit ir īss padoms:

Sarkans zieds ...

Jūs izmantojāt atribūtu aria-labeledby, lai atsauktos uz šo ID. Tas ļaus ekrāna lasītājiem izmantot alternatīvo tekstu šīs rindkopas veidā.

Standarta CSS labākai pieejamībai

Pieejamu lapu funkciju veidošana nozīmē, ka jūsu dizainam ir jārīkojas atbilstoši lapas galvenajam saturam. Piemēram, a

,

, un

elementam, tipiskam CSS jābūt šādam:

h1 {
fonta izmērs: 4rem;
}
p, li {
fonta izmērs: 1,5rem;
krāsa: zila;
}

Fonta lielumam, burtu atstarpēm, fontu saimei utt. Vajadzētu palīdzēt ērtā lasīšanā. Virsrakstiem vajadzētu izcelties no pamatteksta (arī noklusējuma stils ir labs). Turklāt tekstam jābūt kontrastējošai krāsai no fons, ko izvēlaties, izmantojot CSS.

Teksta, saišu un etiķešu veidošana

Mikro mijiedarbība ir iespējama, izmantojot pieejamu CSS. Tas var būt tik mazs kā teksta uzsvēršana, lai pareizi izceltu saites. Jūs varat izmantot un atzīmējiet atšķirīgi. Jūs varat pievienot punktētu pasvītrojumu, izmantojot elements.

Standarta saitei jābūt pasvītrotai ar noklusējuma krāsu: zilu un iepriekš apmeklētai saitei ar noklusējuma krāsu: violeta (varat to pielāgot).

a {
krāsa: #ff0000;
}
a: aktīvs {
krāsa: #000000;
fona krāsa: #a60000;
}
a: kursors, a: apmeklēts, a: fokuss {
krāsa: #a60000;
teksta dekorēšana: nav;
}

Tātad, mainot peles rādītāju, jums vajadzētu izcelt fokusēto tekstu. Rādītāja kursoram un kontūrai ir svarīga loma tīmekļa pieejamībā.

Izmantojiet CSS, lai veidlapas elementiem un etiķetēm piešķirtu tīru izskatu. Izlemiet arī fokusa/kursora novietošanas stāvokļus, kas ir konsekventi lielākajā daļā pārlūkprogrammu. Atcerieties, ka šīs mazās norādes palīdz cilvēkiem saprast jūsu tīmekļa lapu.

Krāsu kontrasts un slēpjošās vērtības

Pielāgojiet vietnes krāsu shēmu tā, lai priekšplāna (teksta/attēla) krāsa kontrastētu ar fona krāsu galvenokārt tāpēc, ka cilvēkiem ar redzes traucējumiem (piemēram, krāsu aklumu) ir grūtāk lasīt saturu pareizi. Tu vari izmantot Krāsu kontrasta pārbaudītājs lai iegūtu pienācīgu krāsu shēmu atbilstoši WCAG kritērijiem. Tāpat mēģiniet pievienot iezīmēšanas zīmes (piemēram, zvaigznīti) kopā ar brīdinājumiem vai noteikumiem un nosacījumiem (ne tikai sarkanu brīdinājumu).

Ekrāna lasītājiem nav jāuztraucas, kamēr avota koda pasūtījums nav pienācīgi uzrakstīts. Centieties izvairīties no displeja: nav vai redzamības: slēptiem rekvizītiem, jo ​​tie paslēpj saturu no ekrāna lasītājiem.

Atvieglojiet stila ignorēšanu

Galvenais ir tas, cik labi jūs veidojat vietni, lietotājiem ir dažādi iemesli ignorēt stilu. Piemēram, varbūt daži vēlas lielāku teksta izmēru vai vēlas mainīt teksta un fona krāsu lasāmībai. Tātad jūsu satura apgabalam vajadzētu būt iespējai to pilnībā apstrādāt.

Ietīšana: apvienojiet HTML un CSS

Tagad jūs zināt pamatus, kā sākt darbu ar semantisko HTML un rakstīt saprātīgu avota kodu pareizā secībā pieejamai vietnei. Koncentrējieties uz HTML un pārejiet uz pieejamā CSS izveidi, kad tas ir izdarīts.

Izmantojot iepriekš minētās metodes, jūs varat uzlabot lietotāju pieredzi un apkalpot skaistu auditoriju. Tātad, sāciet veidot atsaucīgas un pieejamas vietnes.

Kā izveidot vietni: iesācējiem

Šodien es jums norādīšu, kā izveidot pilnīgu vietni no nulles. Neuztraucieties, ja tas izklausās grūti. Es jums to sniegšu ik uz soļa.

Lasīt Tālāk

Par autoru

Izvērst, lai izlasītu visu stāstu