M

MLOG

Latviešu

Uzziniet, kā padarīt jūsu vietnes pieejamas ikvienam, ieviešot WCAG vadlīnijas savā CSS. Veidojiet iekļaujošus dizainus globālai auditorijai.

Pieejamība CSS: Praktisks ceļvedis WCAG atbilstībai

Mūsdienu arvien digitālākajā pasaulē tīmekļa pieejamības nodrošināšana nav tikai labākā prakse, tā ir ētiska nepieciešamība. Pieejamas vietnes nodrošina vienlīdzīgu piekļuvi un iespējas visiem lietotājiem neatkarīgi no viņu spējām. Šis ceļvedis koncentrējas uz to, kā izmantot CSS, lai radītu pieejamu un iekļaujošu tīmekļa pieredzi, ievērojot Tīmekļa satura pieejamības vadlīnijas (WCAG).

Kas ir WCAG un kāpēc tas ir svarīgi?

Tīmekļa satura pieejamības vadlīnijas (WCAG) ir starptautiski atzītu ieteikumu kopums, kā padarīt tīmekļa saturu pieejamāku cilvēkiem ar invaliditāti. Izstrādājis Vispasaules Tīmekļa konsorcijs (W3C), WCAG nodrošina kopīgu standartu tīmekļa pieejamībai, kas atbilst indivīdu, organizāciju un valdību vajadzībām starptautiskā mērogā. WCAG ir svarīgs, jo:

WCAG principi: POUR

WCAG pamatā ir četri galvenie principi, kurus bieži atceras ar akronīmu POUR:

CSS tehnikas pieejamībai

CSS ir izšķiroša loma WCAG atbilstības sasniegšanā. Šeit ir dažas galvenās CSS tehnikas, kas jāņem vērā:

1. Semantiskais HTML un CSS

Semantisko HTML elementu pareiza izmantošana piešķir jūsu saturam nozīmi un struktūru, padarot to pieejamāku ekrāna lasītājiem un citām palīgtehnoloģijām. Pēc tam CSS uzlabo šo semantisko elementu noformējumu.

Piemērs:

Tā vietā, lai visam izmantotu vispārīgus <div> elementus, izmantojiet semantiskus elementus, piemēram, <article>, <nav>, <aside>, <header>, <footer>, <main>, <section> un virsrakstu tagus (<h1> līdz <h6>).

HTML:

<article> <h2>Raksta nosaukums</h2> <p>Šeit ir raksta saturs.</p> </article>

CSS:

article { margin-bottom: 20px; } h2 { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; }

Izmantojot <article> un <h2>, jūs piešķirat saturam semantisko nozīmi, kas palīdz palīgtehnoloģijām saprast struktūru un kontekstu.

2. Krāsa un kontrasts

Nodrošiniet pietiekamu krāsu kontrastu starp teksta un fona krāsām, lai saturs būtu lasāms lietotājiem ar vāju redzi vai krāsu aklumu. WCAG 2.1 AA līmenis prasa kontrasta attiecību vismaz 4.5:1 normālam tekstam un 3:1 lielam tekstam (18pt vai 14pt treknrakstā).

Rīki krāsu kontrasta pārbaudei:

Piemērs:

/* Labs kontrasts */ body { background-color: #000000; /* Melns */ color: #FFFFFF; /* Balts */ } /* Slikts kontrasts */ body { background-color: #FFFFFF; /* Balts */ color: #F0F0F0; /* Gaiši pelēks */ }

Pirmais piemērs nodrošina labu kontrastu, savukārt otrajam piemēram ir slikts kontrasts, un daudziem lietotājiem to būtu grūti lasīt.

Ne tikai krāsa: Nepaļaujieties tikai uz krāsu, lai nodotu informāciju. Papildus krāsai izmantojiet teksta etiķetes, ikonas vai citus vizuālus norādījumus, lai nodrošinātu, ka informācija ir pieejama visiem. Piemēram, tā vietā, lai obligātos veidlapas laukus iezīmētu sarkanā krāsā, izmantojiet sarkanu apmali un teksta etiķeti, piemēram, "(obligāts)".

3. Fokusa indikatori

Kad lietotāji pārvietojas pa jūsu vietni, izmantojot tastatūru (piemēram, izmantojot Tab taustiņu), ir ļoti svarīgi nodrošināt skaidrus vizuālos fokusa indikatorus, lai viņi zinātu, kuram elementam pašlaik ir fokuss. Noklusējuma pārlūkprogrammas fokusa indikators dažos gadījumos var būt nepietiekams vai pat neredzams. Izmantojiet CSS, lai pielāgotu fokusa indikatoru un padarītu to pamanāmāku.

Piemērs:a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #007bff; /* Zila kontūra */ outline-offset: 2px; /* Izveido atstarpi starp elementu un kontūru */ }

Šis CSS kods pievieno elementiem zilu kontūru, kad tie saņem fokusu. Īpašība outline-offset pievieno nelielu atstarpi starp elementu un kontūru, uzlabojot redzamību. Izvairieties no fokusa indikatora pilnīgas noņemšanas, nenodrošinot piemērotu aizstājēju, jo tas var padarīt jūsu vietni nelietojamu tastatūras lietotājiem.

4. Navigācija ar tastatūru

Nodrošiniet, lai visi interaktīvie elementi (saites, pogas, veidlapu lauki utt.) būtu navigējami, izmantojot tastatūru. Tas ir būtiski lietotājiem, kuri nevar izmantot peli. Elementu secībai HTML pirmkodā ir jāatbilst vizuālajai secībai lapā, lai nodrošinātu loģisku navigācijas plūsmu. Izmantojiet CSS, lai vizuāli pārkārtotu elementus, saglabājot loģisku navigācijas secību ar tastatūru.

Piemērs:

Apsveriet scenāriju, kurā vēlaties attēlot navigācijas izvēlni ekrāna labajā pusē, izmantojot CSS. Tomēr pieejamības nolūkos vēlaties, lai navigācijas izvēlne parādītos pirmā HTML pirmkodā, lai ekrāna lasītāju lietotāji to sastaptu pirms galvenā satura.

HTML:

<nav> <ul> <li><a href="#">Sākums</a></li> <li><a href="#">Par mums</a></li> <li><a href="#">Pakalpojumi</a></li> <li><a href="#">Kontakti</a></li> </ul> </nav> <main> <h1>Galvenais saturs</h1> <p>Šis ir lapas galvenais saturs.</p> </main>

CSS:

body { display: flex; } nav { order: 1; /* Pārvieto navigāciju pa labi */ width: 200px; padding: 20px; } main { order: 0; /* Saglabā galveno saturu pa kreisi */ flex: 1; padding: 20px; }

Izmantojot CSS īpašību order, jūs varat vizuāli pārkārtot navigācijas izvēlni uz ekrāna labo pusi, saglabājot tās sākotnējo pozīciju HTML pirmkodā. Tas nodrošina, ka tastatūras lietotāji vispirms sastaps navigācijas izvēlni, uzlabojot pieejamību.

5. Satura atbildīga slēpšana

Dažreiz ir nepieciešams paslēpt saturu no vizuālā displeja, bet saglabāt to pieejamu ekrāna lasītājiem. Piemēram, jūs varētu vēlēties nodrošināt papildu kontekstu saitei vai pogai, kas ir tikai vizuāli attēlota ar ikonu. Izvairieties no display: none vai visibility: hidden izmantošanas, jo šīs īpašības paslēps saturu gan no vizuālajiem lietotājiem, gan no ekrāna lasītājiem. Tā vietā izmantojiet tehniku, kas vizuāli paslēpj saturu, saglabājot to pieejamu palīgtehnoloģijām.

Piemērs:

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

Šī CSS klase vizuāli paslēpj elementu, vienlaikus saglabājot to pieejamu ekrāna lasītājiem. Piemērojiet šo klasi tekstam, kuru vēlaties, lai lasītu ekrāna lasītāji, bet kas netiek rādīts vizuāli.

HTML piemērs:

<a href="#">Rediģēt <span class="sr-only">vienumu</span></a>

Šajā piemērā teksts "vienumu" ir vizuāli paslēpts, bet to lasīs ekrāna lasītāji, nodrošinot kontekstu saitei "Rediģēt".

ARIA atribūti (Accessible Rich Internet Applications): Lietojiet ARIA atribūtus apdomīgi, lai uzlabotu dinamiska satura un sarežģītu UI komponentu pieejamību. ARIA atribūti sniedz papildu semantisko informāciju palīgtehnoloģijām. Tomēr izvairieties no ARIA atribūtu izmantošanas, lai labotu pieejamības problēmas, kuras var atrisināt ar semantisko HTML. Piemēram, izmantojiet ARIA lomas un atribūtus, lai definētu pielāgotus logrīkus un sniegtu statusa atjauninājumus ekrāna lasītājiem, kad saturs dinamiski mainās.

6. Adaptīvs dizains un pieejamība

Nodrošiniet, lai jūsu vietne būtu adaptīva un pielāgotos dažādiem ekrāna izmēriem un ierīcēm. Tas ir ļoti svarīgi lietotājiem ar invaliditāti, kuri var izmantot palīgtehnoloģijas mobilajās ierīcēs vai planšetdatoros. Izmantojiet CSS multivides vaicājumus, lai pielāgotu sava satura izkārtojumu un noformējumu atkarībā no ekrāna izmēra un orientācijas.

Piemērs:

@media (max-width: 768px) { nav ul { flex-direction: column; /* Sakārto navigācijas elementus vertikāli mazākos ekrānos */ } }

Šis CSS kods izmanto multivides vaicājumu, lai mainītu navigācijas vienumu virzienu uz vertikālu mazākos ekrānos, padarot to vieglāk navigējamu mobilajās ierīcēs.

7. Animācijas un kustība

Pārmērīgas vai slikti ieviestas animācijas dažiem lietotājiem var izraisīt krampjus vai kustību slimību. Izmantojiet CSS, lai samazinātu vai atspējotu animācijas lietotājiem, kuri dod priekšroku samazinātai kustībai. Multivides vaicājums prefers-reduced-motion ļauj jums noteikt, vai lietotājs ir pieprasījis, lai sistēma samazinātu animācijas vai kustības daudzumu, ko tā izmanto.

Piemērs:

@media (prefers-reduced-motion: reduce) { .animated-element { animation: none !important; transition: none !important; } }

Šis CSS kods atspējo animācijas un pārejas lietotājiem, kuri savā operētājsistēmā ir iespējojuši iestatījumu "samazināta kustība". Apsveriet iespēju nodrošināt vadīklu, kas ļauj lietotājiem manuāli atspējot animācijas jūsu vietnē.

8. Testēšana ar palīgtehnoloģijām

Visefektīvākais veids, kā nodrošināt vietnes pieejamību, ir to testēt ar palīgtehnoloģijām, piemēram, ekrāna lasītājiem, ekrāna palielinātājiem un runas atpazīšanas programmatūru. Izmantojiet dažādas palīgtehnoloģijas, lai iegūtu visaptverošu izpratni par jūsu vietnes pieejamību.

Populāri ekrāna lasītāji:

Papildu testēšanas padomi:

Padziļinātas CSS tehnikas pieejamībai

1. Pielāgotie īpašumi (CSS mainīgie) tēmu veidošanai

Izmantojiet CSS pielāgotos īpašumus (mainīgos), lai izveidotu pieejamas tēmas ar augsta kontrasta opcijām. Tas ļauj lietotājiem pielāgot jūsu vietnes izskatu atbilstoši viņu individuālajām vajadzībām.

Piemērs:

:root { --text-color: #333; --background-color: #fff; --link-color: #007bff; } body { color: var(--text-color); background-color: var(--background-color); } a { color: var(--link-color); } /* Augsta kontrasta tēma */ .high-contrast { --text-color: #fff; --background-color: #000; --link-color: #ff0; }

Šis piemērs definē CSS pielāgotos īpašumus teksta krāsai, fona krāsai un saišu krāsai. Klase .high-contrast ignorē šos mainīgos, lai izveidotu augsta kontrasta tēmu. Pēc tam varat izmantot JavaScript, lai pārslēgtu .high-contrast klasi uz <body> elementa, lai pārslēgtos starp tēmām.

2. CSS Grid un Flexbox pieejamiem izkārtojumiem

CSS Grid un Flexbox ir jaudīgi izkārtojuma rīki, kurus var izmantot, lai izveidotu pieejamus un adaptīvus izkārtojumus. Tomēr ir svarīgi tos izmantot uzmanīgi, lai nodrošinātu, ka elementu vizuālā secība atbilst DOM secībai.

Piemērs:

Lietojot Flexbox vai Grid, nodrošiniet, ka tabulēšanas secība paliek loģiska. Īpašība order var izjaukt tabulēšanas secību, ja to neizmanto uzmanīgi.

3. `clip-path` un pieejamība

Īpašību `clip-path` var izmantot, lai izveidotu vizuāli interesantas formas un efektus. Tomēr esiet piesardzīgi, lietojot `clip-path`, jo tas dažkārt var aizsegt saturu vai apgrūtināt mijiedarbību ar to. Nodrošiniet, lai apgrieztais saturs paliktu pieejams un lai apgriešana netraucētu navigācijai ar tastatūru vai piekļuvei ar ekrāna lasītāju.

4. `content` īpašība un pieejamība

Īpašību `content` CSS var izmantot, lai ievietotu ģenerētu saturu pirms vai pēc elementa. Tomēr ģenerētais saturs ne vienmēr ir pieejams ekrāna lasītājiem. Izmantojiet `content` īpašību apdomīgi un apsveriet iespēju izmantot ARIA atribūtus, lai sniegtu papildu semantisko informāciju palīgtehnoloģijām.

Reālās pasaules piemēri un gadījumu izpēte

Aplūkosim dažus reālās pasaules piemērus, lai ilustrētu, kā šie principi tiek piemēroti dažādos reģionos un kontekstos.

Biežākās pieejamības kļūdas, no kurām jāizvairās

Noslēgums: Pieejamības pieņemšana labākam tīmeklim

Pieejamība nav tikai tehniska prasība; tas ir fundamentāls aspekts, veidojot tīmekli, kas ir iekļaujošs un pieejams ikvienam. Ieviešot šīs CSS tehnikas un ievērojot WCAG vadlīnijas, jūs varat izveidot vietnes, kas ir ne tikai vizuāli pievilcīgas, bet arī lietojamas un patīkamas visiem lietotājiem neatkarīgi no viņu spējām. Pieņemiet pieejamību kā neatņemamu tīmekļa izstrādes procesa daļu, un jūs veicināsiet iekļaujošāku un taisnīgāku digitālo pasauli.

Resursi un papildu literatūra