Õppige, kuidas muuta oma veebisaidid kõigile ligipääsetavaks, rakendades WCAG juhiseid oma CSS-is. Looge kaasavaid disainilahendusi globaalsele publikule.
Ligipääsetavus CSS-is: praktiline juhend WCAG-nõuete täitmiseks
Tänapäeva üha digitaalsemas maailmas ei ole veebi ligipääsetavuse tagamine lihtsalt parim praktika, vaid eetiline kohustus. Ligipääsetavad veebisaidid pakuvad võrdset juurdepääsu ja võimalusi kõigile kasutajatele, sõltumata nende võimetest. See juhend keskendub sellele, kuidas kasutada CSS-i ligipääsetavate ja kaasavate veebikogemuste loomiseks, järgides veebisisu ligipääsetavuse suuniseid (WCAG).
Mis on WCAG ja miks see on oluline?
Veebisisu ligipääsetavuse suunised (WCAG) on rahvusvaheliselt tunnustatud soovituste kogum, mille eesmärk on muuta veebisisu puuetega inimestele paremini ligipääsetavaks. World Wide Web Consortium (W3C) poolt välja töötatud WCAG pakub ühist standardit veebi ligipääsetavusele, mis vastab üksikisikute, organisatsioonide ja valitsuste vajadustele rahvusvaheliselt. WCAG on oluline, sest:
- See edendab kaasatust, tagades, et igaüks saab teie veebisaidile juurde pääseda ja seda kasutada.
- See parandab kasutajakogemust kõigi kasutajate jaoks, mitte ainult puuetega inimeste jaoks.
- See võib parandada teie veebisaidi SEO-d (otsingumootoritele optimeerimine).
- Mõnes piirkonnas võib see olla seadusega nõutud. Näiteks on paljudes riikides seadused, mis nõuavad valitsuse veebisaitide ja teatud erasektori üksuste veebisaitide ligipääsetavust. Ameerika Ühendriikides on puuetega ameeriklaste seadust (ADA) tõlgendatud nii, et see kehtib ka veebisaitidele. Euroopas kehtestab Euroopa ligipääsetavuse akt ligipääsetavusnõuded laiale toodete ja teenuste valikule, sealhulgas veebisaitidele ja mobiilirakendustele. Austraalias on puuetega inimeste diskrimineerimise seadus, mis hõlmab ka veebi ligipääsetavust.
- See näitab sotsiaalset vastutust ja tugevdab teie brändi mainet.
WCAG põhimõtted: POUR
WCAG põhineb neljal põhiprintsiibil, mida sageli mäletatakse akronüümi POUR kaudu:
- Tajutav (Perceivable): Teave ja kasutajaliidese komponendid peavad olema esitatud kasutajatele viisil, mida nad suudavad tajuda.
- Toimiv (Operable): Kasutajaliidese komponendid ja navigeerimine peavad olema toimivad.
- Mõistetav (Understandable): Teave ja kasutajaliidese toimimine peavad olema mõistetavad.
- Töökindel (Robust): Sisu peab olema piisavalt töökindel, et seda saaksid usaldusväärselt tõlgendada mitmesugused kasutajaagendid, sealhulgas abitehnoloogiad.
CSS-i tehnikad ligipääsetavuse tagamiseks
CSS mängib WCAG-nõuete täitmisel üliolulist rolli. Siin on mõned peamised CSS-tehnikad, mida kaaluda:
1. Semantiline HTML ja CSS
Semantiliste HTML-elementide õige kasutamine annab teie sisule tähenduse ja struktuuri, muutes selle ekraanilugejatele ja muudele abitehnoloogiatele paremini ligipääsetavaks. CSS seejärel täiustab nende semantiliste elementide esitlust.
Näide:
Selle asemel, et kasutada kõige jaoks üldisi <div> elemente, kasutage semantilisi elemente nagu <article>, <nav>, <aside>, <header>, <footer>, <main>, <section> ja pealkirjade silte (<h1> kuni <h6>).
HTML:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
CSS:
article {
margin-bottom: 20px;
}
h2 {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
Kasutades <article> ja <h2>, annate sisule semantilise tähenduse, mis aitab abitehnoloogiatel struktuuri ja konteksti mõista.
2. Värv ja kontrastsus
Tagage piisav värvikontrastsus teksti ja taustavärvide vahel, et sisu oleks loetav vaegnägijatele või värvipimedatele kasutajatele. WCAG 2.1 AA-tase nõuab kontrastsussuhet vähemalt 4.5:1 tavalise teksti puhul ja 3:1 suure teksti puhul (18pt või 14pt paksus kirjas).
Tööriistad värvikontrastsuse kontrollimiseks:
- WebAIM-i värvikontrastsuse kontrollija: https://webaim.org/resources/contrastchecker/
- Ligipääsetava värvipaleti koostaja: https://www.learnui.design/tools/accessible-color-palette-builder.html
- Chrome DevTools: Chrome'i arendaja tööriistad pakuvad sisseehitatud värvikontrastsuse kontrolli.
Näide:
/* Hea kontrastsus */
body {
background-color: #000000; /* Must */
color: #FFFFFF; /* Valge */
}
/* Halb kontrastsus */
body {
background-color: #FFFFFF; /* Valge */
color: #F0F0F0; /* Helehall */
}
Esimene näide pakub head kontrastsust, samas kui teisel näitel on halb kontrastsus ja see oleks paljudele kasutajatele raskesti loetav.
Värvist kaugemale: Ärge lootke teabe edastamisel ainult värvile. Kasutage lisaks värvile ka tekstisilte, ikoone või muid visuaalseid vihjeid, et tagada teabe ligipääsetavus kõigile. Näiteks selle asemel, et tõsta nõutavad vormiväljad punasega esile, kasutage punase raami ja tekstisildi kombinatsiooni, näiteks "(nõutav)".
3. Fookuse indikaatorid
Kui kasutajad navigeerivad teie veebisaidil klaviatuuri abil (nt kasutades Tab-klahvi), on ülioluline pakkuda selgeid visuaalseid fookuse indikaatoreid, et nad teaksid, millisel elemendil on hetkel fookus. Vaikimisi brauseri fookuse indikaator võib olla mõnel juhul ebapiisav või isegi nähtamatu. Kasutage CSS-i, et kohandada fookuse indikaatorit ja muuta see silmatorkavamaks.
Näide:a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #007bff; /* Sinine raamjoon */ outline-offset: 2px; /* Loob tühimiku elemendi ja raamjoone vahele */ }
See CSS-kood lisab elementidele sinise raamjoone, kui need saavad fookuse. Atribuut outline-offset lisab elemendi ja raamjoone vahele väikese tühimiku, parandades nähtavust. Vältige fookuse indikaatori täielikku eemaldamist ilma sobivat asendust pakkumata, kuna see võib muuta teie veebisaidi klaviatuurikasutajatele kasutuskõlbmatuks.
4. Klaviatuuriga navigeerimine
Tagage, et kõik interaktiivsed elemendid (lingid, nupud, vormiväljad jne) oleksid klaviatuuriga navigeeritavad. See on hädavajalik kasutajatele, kes ei saa hiirt kasutada. Elementide järjekord HTML-i lähtekoodis peaks vastama visuaalsele järjekorrale lehel, et tagada loogiline navigeerimisvoog. Kasutage CSS-i, et elemente visuaalselt ümber paigutada, säilitades samal ajal loogilise klaviatuurinavigatsiooni järjekorra.
Näide:
Kujutage ette stsenaariumi, kus soovite kuvada navigeerimismenüü ekraani paremal küljel CSS-i abil. Ligipääsetavuse huvides soovite aga, et navigeerimismenüü ilmuks esimesena HTML-i lähtekoodis, et ekraanilugeja kasutajad kohtaksid seda enne põhisisu.
HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h1>Main Content</h1>
<p>This is the main content of the page.</p>
</main>
CSS:
body {
display: flex;
}
nav {
order: 1; /* Liigutab navigeerimise paremale */
width: 200px;
padding: 20px;
}
main {
order: 0; /* Hoiab põhisisu vasakul */
flex: 1;
padding: 20px;
}
Kasutades CSS-is atribuuti order, saate navigeerimismenüü visuaalselt ümber paigutada ekraani paremale küljele, säilitades samal ajal selle algse asukoha HTML-i lähtekoodis. See tagab, et klaviatuurikasutajad kohtavad navigeerimismenüüd esimesena, parandades ligipääsetavust.
5. Sisu vastutustundlik peitmine
Mõnikord on vaja sisu visuaalselt kuvalt peita, kuid hoida see ekraanilugejatele ligipääsetavana. Näiteks võite soovida pakkuda lisakonteksti lingile või nupule, mis on visuaalselt esindatud ainult ikooniga. Vältige atribuutide display: none või visibility: hidden kasutamist, kuna need peidavad sisu nii visuaalsete kasutajate kui ka ekraanilugejate eest. Selle asemel kasutage tehnikat, mis peidab sisu visuaalselt, hoides selle samal ajal abitehnoloogiatele ligipääsetavana.
Näide:
.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;
}
See CSS-klass peidab elemendi visuaalselt, hoides selle samal ajal ekraanilugejatele ligipääsetavana. Rakendage seda klassi tekstile, mida soovite ekraanilugejate poolt lugeda, kuid mitte visuaalselt kuvada.
HTML-i näide:
<a href="#">Edit <span class="sr-only">item</span></a>
Selles näites on tekst "item" visuaalselt peidetud, kuid ekraanilugejad loevad selle ette, pakkudes konteksti lingile "Edit".
ARIA atribuudid (Accessible Rich Internet Applications): Kasutage ARIA atribuute läbimõeldult, et parandada dünaamilise sisu ja keerukate kasutajaliidese komponentide ligipääsetavust. ARIA atribuudid pakuvad abitehnoloogiatele täiendavat semantilist teavet. Vältige siiski ARIA atribuutide kasutamist ligipääsetavusprobleemide parandamiseks, mida saab lahendada semantilise HTML-iga. Näiteks kasutage ARIA rolle ja atribuute kohandatud vidinate määratlemiseks ja ekraanilugejatele olekuvärskenduste pakkumiseks, kui sisu dünaamiliselt muutub.
6. Reageeriv disain ja ligipääsetavus
Tagage, et teie veebisait oleks reageeriv ja kohanduks erinevate ekraanisuuruste ja seadmetega. See on ülioluline puuetega kasutajatele, kes võivad kasutada abitehnoloogiaid mobiilseadmetes või tahvelarvutites. Kasutage CSS-i meediapäringuid, et kohandada oma sisu paigutust ja esitlust vastavalt ekraani suurusele ja orientatsioonile.
Näide:
@media (max-width: 768px) {
nav ul {
flex-direction: column; /* Virnasta navigeerimiselemendid vertikaalselt väiksematel ekraanidel */
}
}
See CSS-kood kasutab meediapäringut, et muuta navigeerimiselementide suund vertikaalseks väiksematel ekraanidel, muutes navigeerimise mobiilseadmetes lihtsamaks.
7. Animatsioonid ja liikumine
Liigsed või halvasti rakendatud animatsioonid võivad mõnedel kasutajatel põhjustada krampe või liikumishaigust. Kasutage CSS-i animatsioonide vähendamiseks või keelamiseks kasutajatele, kes eelistavad vähendatud liikumist. Meediapäring prefers-reduced-motion võimaldab teil tuvastada, kas kasutaja on soovinud, et süsteem minimeeriks animatsiooni või liikumise hulka.
Näide:
@media (prefers-reduced-motion: reduce) {
.animated-element {
animation: none !important;
transition: none !important;
}
}
See CSS-kood keelab animatsioonid ja üleminekud kasutajatele, kes on oma operatsioonisüsteemis lubanud "vähendatud liikumise" sätte. Kaaluge juhtnupu pakkumist, mis võimaldab kasutajatel teie veebisaidil animatsioone käsitsi keelata.
8. Testimine abitehnoloogiatega
Kõige tõhusam viis oma veebisaidi ligipääsetavuse tagamiseks on testida seda abitehnoloogiatega, nagu ekraanilugejad, ekraanisuurendajad ja kõnetuvastustarkvara. Kasutage erinevaid abitehnoloogiaid, et saada põhjalik ülevaade oma veebisaidi ligipääsetavusest.
Populaarsed ekraanilugejad:
- NVDA (NonVisual Desktop Access): Tasuta ja avatud lähtekoodiga ekraanilugeja Windowsile.
- JAWS (Job Access With Speech): Populaarne kommertsekraanilugeja Windowsile.
- VoiceOver: Sisseehitatud ekraanilugeja macOS-ile ja iOS-ile.
Täiendavad testimisnõuanded:
- Klaviatuuriga navigeerimine: Testige, et kõik interaktiivsed elemendid on klaviatuuriga ligipääsetavad ja et fookuse järjekord on loogiline.
- Vormide ligipääsetavus: Tagage, et vormiväljad on korralikult sildistatud ning et veateated on selged ja kergesti mõistetavad.
- Piltide Alt-tekst: Veenduge, et kõigil piltidel on kirjeldav alt-tekst, mis edastab täpselt pildi sisu ja funktsiooni.
- Dünaamiline sisu: Testige, et dünaamilise sisu värskendused oleksid ekraanilugejatele korralikult teatatud.
Täiustatud CSS-tehnikad ligipääsetavuse tagamiseks
1. Kohandatud atribuudid (CSS-muutujad) teemade loomiseks
Kasutage CSS-i kohandatud atribuute (muutujaid), et luua ligipääsetavaid teemasid kõrge kontrastsusega valikutega. See võimaldab kasutajatel kohandada teie veebisaidi välimust vastavalt oma individuaalsetele vajadustele.
Näide:
: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);
}
/* Kõrge kontrastsusega teema */
.high-contrast {
--text-color: #fff;
--background-color: #000;
--link-color: #ff0;
}
See näide määratleb CSS-i kohandatud atribuudid teksti värvi, taustavärvi ja lingi värvi jaoks. Klass .high-contrast kirjutab need muutujad üle, et luua kõrge kontrastsusega teema. Seejärel saate kasutada JavaScripti, et lülitada .high-contrast klass <body> elemendil teemade vahetamiseks.
2. CSS Grid ja Flexbox ligipääsetavate paigutuste jaoks
CSS Grid ja Flexbox on võimsad paigutustööriistad, mida saab kasutada ligipääsetavate ja reageerivate paigutuste loomiseks. Siiski on oluline neid hoolikalt kasutada, et tagada elementide visuaalse järjekorra vastavus DOM-i järjekorrale.
Näide:
Flexboxi või Grid'i kasutamisel tagage, et tabulatsioonijärjekord jääks loogiliseks. Atribuut order võib tabulatsioonijärjekorda häirida, kui seda hoolikalt ei kasutata.
3. `clip-path` ja ligipääsetavus
Atribuuti `clip-path` saab kasutada visuaalselt huvitavate kujundite ja efektide loomiseks. Olge siiski `clip-path` kasutamisel ettevaatlik, kuna see võib mõnikord sisu varjata või sellega suhtlemise keeruliseks muuta. Tagage, et kärbitud sisu jääks ligipääsetavaks ja et kärpimine ei segaks klaviatuuriga navigeerimist ega ekraanilugeja juurdepääsu.
4. Atribuut `content` ja ligipääsetavus
CSS-i atribuuti `content` saab kasutada genereeritud sisu lisamiseks enne või pärast elementi. Genereeritud sisu ei ole aga alati ekraanilugejatele ligipääsetav. Kasutage atribuuti `content` läbimõeldult ja kaaluge ARIA atribuutide kasutamist, et pakkuda abitehnoloogiatele täiendavat semantilist teavet.
Reaalse maailma näited ja juhtumiuuringud
Uurime mõningaid reaalse maailma näiteid, et illustreerida, kuidas neid põhimõtteid rakendatakse erinevates piirkondades ja kontekstides.
- Valitsuse veebisaidid: Paljudes riikides, sealhulgas Ühendkuningriigis, Kanadas ja Austraalias, on valitsuse veebisaitidele ranged ligipääsetavusjuhised. Need veebisaidid on sageli eeskujulikud WCAG-nõuete täitmise mudelid, näidates parimaid tavasid semantilises HTML-is, värvikontrastsuses ja klaviatuuriga navigeerimises.
- E-kaubanduse platvormid: Globaalsed e-kaubanduse hiiglased nagu Amazon ja Alibaba investeerivad tugevalt ligipääsetavusse, et jõuda laiema publikuni. Nad rakendavad sageli funktsioone nagu alternatiivtekst piltidele, klaviatuuriga navigeerimine toodete sirvimiseks ja reguleeritavad fondisuurused parema loetavuse tagamiseks.
- Haridusasutused: Ülikoolid ja kolledžid üle maailma keskenduvad üha enam ligipääsetavate veebipõhiste õpikeskkondade loomisele. Nad pakuvad sageli videotele transkripte, helisisule subtiitreid ja kursusematerjalide ligipääsetavaid versioone, et tulla toime puuetega üliõpilastega.
Levinud ligipääsetavusvead, mida vältida
- Ebapiisav värvikontrastsus: Värvikombinatsioonide kasutamine, mida on vaegnägijatel raske lugeda.
- Piltide Alt-teksti puudumine: Piltidele kirjeldava alt-teksti pakkumata jätmine, muutes need ekraanilugeja kasutajatele ligipääsmatuks.
- Halb klaviatuuriga navigeerimine: Veebisaitide loomine, mida on klaviatuuriga raske või võimatu navigeerida.
- Tabelite kasutamine paigutuseks: HTML-tabelite kasutamine paigutuse eesmärgil semantiliste HTML-elementide asemel.
- Fookuse indikaatorite ignoreerimine: Visuaalse fookuse indikaatori eemaldamine või varjamine, mis muudab klaviatuurikasutajatele raskeks teada, millisel elemendil on fookus.
- Teabe edastamisel ainult värvile tuginemine: Värvi kasutamine ainsa teabe edastamise vahendina, muutes selle värvipimedatele kasutajatele ligipääsmatuks.
- Abitehnoloogiatega testimata jätmine: Oma veebisaidi testimata jätmine abitehnoloogiatega, nagu ekraanilugejad, et tuvastada ja parandada ligipääsetavusprobleeme.
Kokkuvõte: ligipääsetavuse omaksvõtmine parema veebi nimel
Ligipääsetavus ei ole lihtsalt tehniline nõue; see on kaasava ja kõigile ligipääsetava veebi loomise põhiline aspekt. Rakendades neid CSS-tehnikaid ja järgides WCAG-juhiseid, saate luua veebisaite, mis pole mitte ainult visuaalselt ahvatlevad, vaid ka kasutatavad ja nauditavad kõigile kasutajatele, sõltumata nende võimetest. Võtke ligipääsetavus oma veebiarendusprotsessi lahutamatuks osaks ja te aitate kaasa kaasavama ja õiglasema digitaalse maailma loomisele.
Ressursid ja lisalugemist
- Veebisisu ligipääsetavuse suunised (WCAG): https://www.w3.org/WAI/standards-guidelines/wcag/
- Veebi ligipääsetavuse algatus (WAI): https://www.w3.org/WAI/
- WebAIM: https://webaim.org/
- Deque University: https://dequeuniversity.com/