2025. gada 21. jūlijsLatvieš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:

Tas veicina iekļaušanu, nodrošinot, ka ikviens var piekļūt jūsu vietnei un to izmantot.
Tas uzlabo lietotāja pieredzi visiem lietotājiem, ne tikai tiem, kam ir invaliditāte.
Tas var uzlabot jūsu vietnes SEO (meklētājprogrammu optimizāciju).
Dažos reģionos tas var būt juridiski noteikts. Piemēram, daudzās valstīs ir likumi, kas nosaka tīmekļa pieejamību valdības vietnēm un noteiktām privātā sektora struktūrām. Amerikāņu ar invaliditāti akts (ADA) Amerikas Savienotajās Valstīs tiek interpretēts kā attiecināms uz vietnēm. Eiropā Eiropas Pieejamības akts nosaka pieejamības prasības plašam produktu un pakalpojumu klāstam, ieskaitot vietnes un mobilās lietojumprogrammas. Austrālijā ir Diskriminācijas novēršanas akts, kas attiecas arī uz tīmekļa pieejamību.
Tas demonstrē sociālo atbildību un stiprina jūsu zīmola reputāciju.

WCAG principi: POUR

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

Uztverams (Perceivable): Informācijai un lietotāja saskarnes komponentiem jābūt pasniegtiem lietotājiem veidos, kādos viņi tos var uztvert.
Vadāms (Operable): Lietotāja saskarnes komponentiem un navigācijai jābūt vadāmiem.
Saprotams (Understandable): Informācijai un lietotāja saskarnes darbībai jābūt saprotamai.
Robusts (Robust): Saturam jābūt pietiekami robustam, lai to varētu uzticami interpretēt dažādi lietotāju aģenti, tostarp palīgtehnoloģijas.

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:

WebAIM krāsu kontrasta pārbaudītājs: https://webaim.org/resources/contrastchecker/
Pieejamu krāsu paletes veidotājs: https://www.learnui.design/tools/accessible-color-palette-builder.html
Chrome DevTools: Chrome DevTools nodrošina iebūvētu krāsu kontrasta pārbaudi.

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:

NVDA (NonVisual Desktop Access): Bezmaksas un atvērtā koda ekrāna lasītājs operētājsistēmai Windows.
JAWS (Job Access With Speech): Populārs komerciāls ekrāna lasītājs operētājsistēmai Windows.
VoiceOver: Iebūvēts ekrāna lasītājs operētājsistēmām macOS un iOS.

Papildu testēšanas padomi:

Navigācija ar tastatūru: Pārbaudiet, vai visi interaktīvie elementi ir sasniedzami, izmantojot tastatūru, un vai fokusa secība ir loģiska.
Veidlapu pieejamība: Pārliecinieties, ka veidlapu lauki ir pareizi marķēti un kļūdu ziņojumi ir skaidri un viegli saprotami.
Attēlu Alt teksts: Pārbaudiet, vai visiem attēliem ir aprakstošs alt teksts, kas precīzi atspoguļo attēla saturu un funkciju.
Dinamiskais saturs: Pārbaudiet, vai dinamiskā satura atjauninājumi tiek pareizi paziņoti ekrāna lasītājiem.

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.

Valdības vietnes: Daudzās valstīs, tostarp Apvienotajā Karalistē, Kanādā un Austrālijā, ir stingras pieejamības vadlīnijas valdības vietnēm. Šīs vietnes bieži kalpo kā paraugmodeļi WCAG atbilstībai, demonstrējot labākās prakses semantiskajā HTML, krāsu kontrastā un navigācijā ar tastatūru.
E-komercijas platformas: Globālie e-komercijas giganti, piemēram, Amazon un Alibaba, intensīvi investē pieejamībā, lai sasniegtu plašāku auditoriju. Viņi bieži ievieš tādas funkcijas kā alternatīvais teksts attēliem, navigācija ar tastatūru produktu pārlūkošanai un pielāgojami fontu izmēri labākai lasāmībai.
Izglītības iestādes: Universitātes un koledžas visā pasaulē arvien vairāk koncentrējas uz pieejamu tiešsaistes mācību vidi. Tās bieži nodrošina video transkriptus, subtitrus audio saturam un pieejamas kursu materiālu versijas, lai pielāgotos studentiem ar invaliditāti.

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

Nepietiekams krāsu kontrasts: Krāsu kombināciju izmantošana, kuras ir grūti lasāmas lietotājiem ar vāju redzi.
Trūkstošs Alt teksts attēliem: Neizdevās nodrošināt aprakstošu alt tekstu attēliem, padarot tos nepieejamus ekrāna lasītāju lietotājiem.
Slikta navigācija ar tastatūru: Tādu vietņu izveide, kurās ir grūti vai neiespējami pārvietoties, izmantojot tastatūru.
Tabulu izmantošana izkārtojumam: HTML tabulu izmantošana izkārtojuma mērķiem, nevis semantiskiem HTML elementiem.
Fokusa indikatoru ignorēšana: Vizuālā fokusa indikatora noņemšana vai aizēnošana, kas apgrūtina tastatūras lietotājiem zināt, kuram elementam ir fokuss.
Paļaušanās tikai uz krāsu, lai nodotu informāciju: Krāsas izmantošana kā vienīgā informācijas nodošanas līdzekļa, padarot to nepieejamu lietotājiem ar krāsu aklumu.
Netestēšana ar palīgtehnoloģijām: Neizdevās pārbaudīt jūsu vietni ar palīgtehnoloģijām, piemēram, ekrāna lasītājiem, lai identificētu un novērstu pieejamības problēmas.

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

Tīmekļa satura pieejamības vadlīnijas (WCAG): https://www.w3.org/WAI/standards-guidelines/wcag/
Tīmekļa pieejamības iniciatīva (WAI): https://www.w3.org/WAI/
WebAIM: https://webaim.org/
Deque University: https://dequeuniversity.com/