Prieinamumas CSS: praktinis WCAG atitikties vadovas

Šiuolaikiniame vis labiau skaitmeniniame pasaulyje interneto prieinamumo užtikrinimas yra ne tik geroji praktika, bet ir etinis imperatyvas. Prieinamos svetainės suteikia lygias prieigos ir galimybių sąlygas visiems vartotojams, nepriklausomai nuo jų gebėjimų. Šiame vadove daugiausia dėmesio skiriama tam, kaip pasitelkti CSS kuriant prieinamas ir įtraukias interneto patirtis, laikantis Interneto turinio prieinamumo gairių (WCAG).

Kas yra WCAG ir kodėl tai svarbu?

Interneto turinio prieinamumo gairės (WCAG) yra tarptautiniu mastu pripažintų rekomendacijų rinkinys, kaip padaryti interneto turinį prieinamesnį žmonėms su negalia. Sukurtos Pasaulinio tinklo konsorciumo (W3C), WCAG pateikia bendrą interneto prieinamumo standartą, atitinkantį asmenų, organizacijų ir vyriausybių poreikius tarptautiniu mastu. WCAG yra svarbios, nes:

Jos skatina įtrauktį, užtikrindamos, kad visi galėtų pasiekti ir naudoti jūsų svetainę.
Jos pagerina vartotojo patirtį visiems vartotojams, ne tik tiems, kurie turi negalią.
Jos gali pagerinti jūsų svetainės SEO (paieškos sistemų optimizavimą).
Kai kuriuose regionuose tai gali būti teisiškai privaloma. Pavyzdžiui, daugelyje šalių yra įstatymai, reikalaujantys interneto prieinamumo vyriausybinėms svetainėms ir tam tikriems privataus sektoriaus subjektams. Jungtinėse Amerikos Valstijose Amerikiečių su negalia aktas (ADA) buvo interpretuotas kaip taikomas ir svetainėms. Europoje Europos prieinamumo aktas nustato prieinamumo reikalavimus įvairiems produktams ir paslaugoms, įskaitant svetaines ir mobiliąsias programėles. Australijoje galioja Diskriminacijos dėl negalios aktas, kuris taip pat apima interneto prieinamumą.
Jos demonstruoja socialinę atsakomybę ir stiprina jūsų prekės ženklo reputaciją.

WCAG principai: POUR

WCAG grindžiamos keturiais pagrindiniais principais, dažnai prisimenamais pagal akronimą POUR:

Suvokiamas (Perceivable): Informacija ir vartotojo sąsajos komponentai turi būti pateikiami vartotojams taip, kad jie galėtų juos suvokti.
Valdomas (Operable): Vartotojo sąsajos komponentai ir naršymas turi būti valdomi.
Suprantamas (Understandable): Informacija ir vartotojo sąsajos veikimas turi būti suprantami.
Patikimas (Robust): Turinys turi būti pakankamai patikimas, kad jį galėtų patikimai interpretuoti įvairios vartotojo programos, įskaitant pagalbines technologijas.

CSS metodai prieinamumui užtikrinti

CSS atlieka lemiamą vaidmenį siekiant WCAG atitikties. Štai keletas pagrindinių CSS metodų, į kuriuos verta atsižvelgti:

1. Semantinis HTML ir CSS

Teisingas semantinių HTML elementų naudojimas suteikia jūsų turiniui prasmę ir struktūrą, todėl jis tampa prieinamesnis ekrano skaitytuvams ir kitoms pagalbinėms technologijoms. Tada CSS pagerina šių semantinių elementų pateikimą.

Pavyzdys:

Užuot viskam naudoję bendrinius <div> elementus, naudokite semantinius elementus, tokius kaip <article>, <nav>, <aside>, <header>, <footer>, <main>, <section> ir antraščių žymes (nuo <h1> iki <h6>).

HTML:

<article>
  <h2>Straipsnio pavadinimas</h2>
  <p>Čia yra straipsnio turinys.</p>
</article>

CSS:

article {
  margin-bottom: 20px;
}

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

Naudodami <article> ir <h2>, jūs suteikiate turiniui semantinę prasmę, kuri padeda pagalbinėms technologijoms suprasti struktūrą ir kontekstą.

2. Spalva ir kontrastas

Užtikrinkite pakankamą spalvų kontrastą tarp teksto ir fono spalvų, kad turinys būtų įskaitomas vartotojams su silpnu regėjimu ar spalvų aklumu. WCAG 2.1 AA lygis reikalauja kontrasto santykio ne mažesnio kaip 4.5:1 įprastam tekstui ir 3:1 dideliam tekstui (18pt arba 14pt paryškintu šriftu).

Įrankiai spalvų kontrastui tikrinti:

WebAIM spalvų kontrasto tikrintuvas: https://webaim.org/resources/contrastchecker/
Prieinamų spalvų paletės kūrėjas: https://www.learnui.design/tools/accessible-color-palette-builder.html
Chrome kūrėjo įrankiai: Chrome kūrėjo įrankiai turi integruotą spalvų kontrasto tikrinimo funkciją.

Pavyzdys:

/* Geras kontrastas */
body {
  background-color: #000000; /* Juoda */
  color: #FFFFFF; /* Balta */
}

/* Prastas kontrastas */
body {
  background-color: #FFFFFF; /* Balta */
  color: #F0F0F0; /* Šviesiai pilka */
}

Pirmasis pavyzdys užtikrina gerą kontrastą, o antrasis pavyzdys turi prastą kontrastą ir daugeliui vartotojų būtų sunkiai įskaitomas.

Ne tik spalva: Informacijai perteikti nepasikliaukite vien spalva. Naudokite tekstines etiketes, piktogramas ar kitus vaizdinius ženklus kartu su spalva, kad informacija būtų prieinama visiems. Pavyzdžiui, vietoj to, kad privalomus formos laukus paryškintumėte raudonai, naudokite raudono rėmelio ir tekstinės etiketės, pvz., „(privaloma)“, derinį.

3. Fokusavimo indikatoriai

Kai vartotojai naršo jūsų svetainėje naudodami klaviatūrą (pvz., naudodami Tab klavišą), labai svarbu pateikti aiškius vaizdinius fokusavimo indikatorius, kad jie žinotų, kuris elementas šiuo metu yra sufokusuotas. Numatytasis naršyklės fokusavimo indikatorius kai kuriais atvejais gali būti nepakankamas ar net nematomas. Naudokite CSS, kad pritaikytumėte fokusavimo indikatorių ir padarytumėte jį labiau pastebimą.

Pavyzdys:a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #007bff; /* Mėlynas kontūras */ outline-offset: 2px; /* Sukuriamas tarpas tarp elemento ir kontūro */ }

Šis CSS kodas prideda mėlyną kontūrą elementams, kai jie sufokusuojami. outline-offset savybė prideda nedidelį tarpą tarp elemento ir kontūro, pagerindama matomumą. Venkite visiškai pašalinti fokusavimo indikatorių nepateikdami tinkamo pakaitalo, nes tai gali padaryti jūsų svetainę netinkamą naudoti klaviatūros vartotojams.

4. Naršymas klaviatūra

Užtikrinkite, kad visus interaktyvius elementus (nuorodas, mygtukus, formos laukus ir t. t.) būtų galima pasiekti naudojant klaviatūrą. Tai būtina vartotojams, kurie negali naudotis pele. Elementų tvarka HTML šaltinio kode turi atitikti vizualią tvarką puslapyje, kad būtų užtikrinta logiška naršymo eiga. Naudokite CSS, kad vizualiai pertvarkytumėte elementus, išlaikydami logišką naršymo klaviatūra tvarką.

Pavyzdys:

Apsvarstykite scenarijų, kai norite, kad navigacijos meniu būtų rodomas dešinėje ekrano pusėje naudojant CSS. Tačiau dėl prieinamumo norite, kad navigacijos meniu HTML šaltinio kode būtų pirmas, kad ekrano skaitytuvų vartotojai jį matytų prieš pagrindinį turinį.

HTML:

<nav>
  <ul>
    <li><a href="#">Pradžia</a></li>
    <li><a href="#">Apie</a></li>
    <li><a href="#">Paslaugos</a></li>
    <li><a href="#">Kontaktai</a></li>
  </ul>
</nav>
<main>
  <h1>Pagrindinis turinys</h1>
  <p>Tai yra pagrindinis puslapio turinys.</p>
</main>

CSS:

body {
  display: flex;
}

nav {
  order: 1; /* Perkelia navigaciją į dešinę */
  width: 200px;
  padding: 20px;
}

main {
  order: 0; /* Palieka pagrindinį turinį kairėje */
  flex: 1;
  padding: 20px;
}

Naudodami order savybę CSS, galite vizualiai perkelti navigacijos meniu į dešinę ekrano pusę, išlaikydami jo pradinę padėtį HTML šaltinio kode. Tai užtikrina, kad klaviatūros vartotojai pirmiausia pasieks navigacijos meniu, taip pagerinant prieinamumą.

5. Atsakingas turinio slėpimas

Kartais reikia paslėpti turinį nuo vizualaus rodymo, bet palikti jį prieinamą ekrano skaitytuvams. Pavyzdžiui, galbūt norėsite pateikti papildomą kontekstą nuorodai ar mygtukui, kuris vizualiai pavaizduotas tik piktograma. Venkite naudoti display: none ar visibility: hidden, nes šios savybės paslėps turinį tiek nuo vizualių vartotojų, tiek nuo ekrano skaitytuvų. Vietoj to naudokite metodą, kuris vizualiai paslepia turinį, bet palieka jį prieinamą pagalbinėms technologijoms.

Pavyzdys:

.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;
}

Ši CSS klasė vizualiai paslepia elementą, palikdama jį prieinamą ekrano skaitytuvams. Taikykite šią klasę tekstui, kurį norite, kad skaitytų ekrano skaitytuvai, bet kuris nebūtų rodomas vizualiai.

HTML pavyzdys:

<a href="#">Redaguoti <span class="sr-only">elementą</span></a>

Šiame pavyzdyje tekstas „elementą“ yra vizualiai paslėptas, bet jį perskaitys ekrano skaitytuvai, suteikdami kontekstą nuorodai „Redaguoti“.

ARIA atributai (Accessible Rich Internet Applications): Naudokite ARIA atributus apgalvotai, siekdami pagerinti dinaminio turinio ir sudėtingų vartotojo sąsajos komponentų prieinamumą. ARIA atributai suteikia papildomos semantinės informacijos pagalbinėms technologijoms. Tačiau venkite naudoti ARIA atributus, kad ištaisytumėte prieinamumo problemas, kurias galima išspręsti naudojant semantinį HTML. Pavyzdžiui, naudokite ARIA vaidmenis ir atributus, kad apibrėžtumėte pasirinktinius valdiklius ir pateiktumėte būsenos atnaujinimus ekrano skaitytuvams, kai turinys dinamiškai keičiasi.

6. Adaptyvusis dizainas ir prieinamumas

Užtikrinkite, kad jūsų svetainė būtų adaptyvi ir prisitaikytų prie skirtingų ekrano dydžių ir įrenginių. Tai labai svarbu vartotojams su negalia, kurie gali naudoti pagalbines technologijas mobiliuosiuose įrenginiuose ar planšetėse. Naudokite CSS medijos užklausas, kad pritaikytumėte turinio išdėstymą ir pateikimą pagal ekrano dydį ir orientaciją.

Pavyzdys:

@media (max-width: 768px) {
  nav ul {
    flex-direction: column; /* Navigacijos elementus išdėstyti vertikaliai mažesniuose ekranuose */
  }
}

Šis CSS kodas naudoja medijos užklausą, kad pakeistų navigacijos elementų kryptį į vertikalią mažesniuose ekranuose, todėl naršyti mobiliuosiuose įrenginiuose tampa lengviau.

7. Animacijos ir judesys

Pernelyg didelės ar prastai įgyvendintos animacijos kai kuriems vartotojams gali sukelti priepuolius ar judesio ligą. Naudokite CSS, kad sumažintumėte arba išjungtumėte animacijas vartotojams, kurie pageidauja sumažinto judesio. Medijos užklausa prefers-reduced-motion leidžia nustatyti, ar vartotojas paprašė, kad sistema sumažintų naudojamų animacijų ar judesių kiekį.

Pavyzdys:

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

Šis CSS kodas išjungia animacijas ir perėjimus vartotojams, kurie savo operacinėje sistemoje įjungė „sumažinto judesio“ nustatymą. Apsvarstykite galimybę pateikti valdiklį, kuris leistų vartotojams rankiniu būdu išjungti animacijas jūsų svetainėje.

8. Testavimas su pagalbinėmis technologijomis

Efektyviausias būdas užtikrinti, kad jūsų svetainė yra prieinama, yra ją išbandyti su pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai, ekrano didintuvai ir kalbos atpažinimo programinė įranga. Naudokite įvairias pagalbines technologijas, kad gautumėte išsamų supratimą apie savo svetainės prieinamumą.

Populiarūs ekrano skaitytuvai:

NVDA (NonVisual Desktop Access): Nemokamas ir atvirojo kodo ekrano skaitytuvas, skirtas „Windows“.
JAWS (Job Access With Speech): Populiarus komercinis ekrano skaitytuvas, skirtas „Windows“.
VoiceOver: Integruotas ekrano skaitytuvas, skirtas „macOS“ ir „iOS“.

Papildomi testavimo patarimai:

Naršymas klaviatūra: Išbandykite, ar visi interaktyvūs elementai yra pasiekiami naudojant klaviatūrą ir ar fokusavimo tvarka yra logiška.
Formų prieinamumas: Užtikrinkite, kad formos laukai būtų tinkamai paženklinti ir kad klaidų pranešimai būtų aiškūs ir lengvai suprantami.
Paveikslėlių „alt“ tekstas: Patikrinkite, ar visi paveikslėliai turi aprašomąjį „alt“ tekstą, kuris tiksliai perteikia paveikslėlio turinį ir funkciją.
Dinaminis turinys: Išbandykite, ar dinaminio turinio atnaujinimai yra tinkamai pranešami ekrano skaitytuvams.

Pažangūs CSS metodai prieinamumui užtikrinti

1. Pasirinktinės savybės (CSS kintamieji) temoms kurti

Naudokite CSS pasirinktines savybes (kintamuosius), kad sukurtumėte prieinamas temas su didelio kontrasto parinktimis. Tai leidžia vartotojams pritaikyti jūsų svetainės išvaizdą pagal savo individualius poreikius.

Pavyzdys:

: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);
}

/* Didelio kontrasto tema */
.high-contrast {
  --text-color: #fff;
  --background-color: #000;
  --link-color: #ff0;
}

Šiame pavyzdyje apibrėžiamos CSS pasirinktinės savybės teksto spalvai, fono spalvai ir nuorodos spalvai. Klasė .high-contrast pakeičia šiuos kintamuosius, kad sukurtų didelio kontrasto temą. Tada galite naudoti „JavaScript“, kad perjungtumėte .high-contrast klasę <body> elemente ir keistumėte temas.

2. CSS Grid ir Flexbox prieinamiems išdėstymams

CSS Grid ir Flexbox yra galingi išdėstymo įrankiai, kuriuos galima naudoti kuriant prieinamus ir adaptyvius išdėstymus. Tačiau svarbu juos naudoti atsargiai, siekiant užtikrinti, kad vizuali elementų tvarka atitiktų DOM tvarką.

Pavyzdys:

Naudodami „Flexbox“ ar „Grid“, užtikrinkite, kad „Tab“ klavišo eiga išliktų logiška. Savybė order gali sutrikdyti „Tab“ klavišo eigą, jei nebus naudojama atsargiai.

3. `clip-path` ir prieinamumas

Savybę `clip-path` galima naudoti kuriant vizualiai įdomias formas ir efektus. Tačiau būkite atsargūs naudodami `clip-path`, nes kartais tai gali uždengti turinį arba apsunkinti sąveiką su juo. Užtikrinkite, kad apkirptas turinys išliktų prieinamas ir kad apkirpimas netrukdytų naršyti klaviatūra ar pasiekti ekrano skaitytuvu.

4. `content` savybė ir prieinamumas

CSS savybė `content` gali būti naudojama įterpti sugeneruotą turinį prieš arba po elemento. Tačiau sugeneruotas turinys ne visada yra prieinamas ekrano skaitytuvams. Naudokite savybę `content` apgalvotai ir apsvarstykite galimybę naudoti ARIA atributus, kad suteiktumėte papildomos semantinės informacijos pagalbinėms technologijoms.

Pavyzdžiai iš realaus pasaulio ir atvejo analizės

Panagrinėkime keletą pavyzdžių iš realaus pasaulio, kad parodytume, kaip šie principai taikomi įvairiuose regionuose ir kontekstuose.

Vyriausybės svetainės: Daugelyje šalių, įskaitant Jungtinę Karalystę, Kanadą ir Australiją, vyriausybės svetainėms taikomos griežtos prieinamumo gairės. Šios svetainės dažnai yra pavyzdiniai WCAG atitikties modeliai, demonstruojantys geriausias semantinio HTML, spalvų kontrasto ir naršymo klaviatūra praktikas.
El. prekybos platformos: Pasauliniai el. prekybos gigantai, tokie kaip „Amazon“ ir „Alibaba“, daug investuoja į prieinamumą, kad pasiektų platesnę auditoriją. Jie dažnai diegia tokias funkcijas kaip alternatyvus tekstas paveikslėliams, naršymas klaviatūra produktų peržiūrai ir reguliuojami šrifto dydžiai geresniam skaitomumui.
Švietimo įstaigos: Universitetai ir kolegijos visame pasaulyje vis daugiau dėmesio skiria prieinamų internetinių mokymosi aplinkų kūrimui. Jie dažnai pateikia vaizdo įrašų transkripcijas, garso turinio subtitrus ir prieinamas kursų medžiagos versijas, kad prisitaikytų prie studentų su negalia.

Dažniausios prieinamumo klaidos, kurių reikia vengti

Nepakankamas spalvų kontrastas: Naudojami spalvų deriniai, kuriuos sunku skaityti vartotojams su silpnu regėjimu.
Trūkstamas „alt“ tekstas paveikslėliams: Nepateikiamas aprašomasis „alt“ tekstas paveikslėliams, todėl jie tampa neprieinami ekrano skaitytuvų vartotojams.
Prastas naršymas klaviatūra: Kuriamos svetainės, kuriose sunku arba neįmanoma naršyti naudojant klaviatūrą.
Lentelių naudojimas išdėstymui: Naudojamos HTML lentelės išdėstymo tikslams vietoj semantinių HTML elementų.
Fokusavimo indikatorių ignoravimas: Pašalinamas arba uždengiamas vizualus fokusavimo indikatorius, todėl klaviatūros vartotojams sunku žinoti, kuris elementas yra sufokusuotas.
Pasikliavimas vien spalva informacijai perteikti: Spalvos naudojimas kaip vienintelės priemonės informacijai perteikti, todėl ji tampa neprieinama vartotojams su spalvų aklumu.
Netestavimas su pagalbinėmis technologijomis: Nesugebėjimas išbandyti savo svetainės su pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai, siekiant nustatyti ir ištaisyti prieinamumo problemas.

Išvada: prieinamumo integravimas geresniam internetui

Prieinamumas yra ne tik techninis reikalavimas; tai yra esminis aspektas kuriant internetą, kuris būtų įtraukus ir prieinamas visiems. Įgyvendindami šiuos CSS metodus ir laikydamiesi WCAG gairių, galite kurti svetaines, kurios yra ne tik vizualiai patrauklios, bet ir patogios bei malonios naudoti visiems vartotojams, nepriklausomai nuo jų gebėjimų. Laikykite prieinamumą neatsiejama savo interneto svetainių kūrimo proceso dalimi ir prisidėsite prie įtraukesnio ir teisingesnio skaitmeninio pasaulio.

Ištekliai ir papildoma literatūra

Interneto turinio prieinamumo gairės (WCAG): https://www.w3.org/WAI/standards-guidelines/wcag/
Interneto prieinamumo iniciatyva (WAI): https://www.w3.org/WAI/
WebAIM: https://webaim.org/
Deque University: https://dequeuniversity.com/