M

MLOG

Lietuvių

Išsamus tinklalapių prieinamumo (a11y) vadovas front-end programuotojams, apimantis principus, technikas ir geriausias praktikas, kaip sukurti įtraukias ir prieinamas žiniatinklio patirtis vartotojams visame pasaulyje.

Tinklalapių Prieinamumas (a11y): Praktinis Vadovas Front-End Programuotojams

Tinklalapių prieinamumas (dažnai trumpinamas kaip a11y, kur 11 reiškia raidžių skaičių tarp 'a' ir 'y') – tai praktika kurti ir plėtoti svetaines bei žiniatinklio programas taip, kad jomis galėtų naudotis žmonės su negalia. Tai apima asmenis, turinčius regos, klausos, motorikos, kognityvinių ir kalbos sutrikimų. Prieinamų svetainių kūrimas – tai ne tik reikalavimų laikymasis; tai yra įtraukios ir lygiavertės skaitmeninės patirties kūrimas visiems, nepriklausomai nuo jų gebėjimų ar technologijų, kuriomis jie naudojasi internetui pasiekti. Tai taip pat būtina siekiant pasiekti platesnę auditoriją. Pavyzdžiui, geras spalvų kontrastas naudingas vartotojams ryškioje saulės šviesoje, o aiškūs išdėstymai padeda tiems, kurie turi kognityvinių sutrikimų, arba tiesiog atliekantiems kelias užduotis vienu metu.

Kodėl Tinklalapių Prieinamumas Yra Svarbus?

Yra keletas svarių priežasčių teikti pirmenybę tinklalapių prieinamumui:

Prieinamumo Standartų ir Gairių Supratimas

Pagrindinis tinklalapių prieinamumo standartas yra Žiniatinklio Turinio Prieinamumo Gairės (WCAG), kurias sukūrė Pasaulinio tinklo konsorciumas (W3C). WCAG pateikia rinkinį patikrinamų sėkmės kriterijų, kurie gali būti naudojami vertinant žiniatinklio turinio prieinamumą. WCAG yra tarptautiniu mastu pripažintas ir dažnai minimas prieinamumo įstatymuose bei taisyklėse visame pasaulyje.

WCAG yra organizuotos pagal keturis principus, dažnai vadinamus POUR:

WCAG turi tris atitikties lygius: A, AA ir AAA. A lygis yra pats pagrindinis prieinamumo lygis, o AAA lygis – pats išsamiausias. Dauguma organizacijų siekia AA lygio atitikties, nes tai užtikrina gerą pusiausvyrą tarp prieinamumo ir praktiškumo. Daugelis įstatymų ir taisyklių reikalauja AA lygio atitikties.

Praktinės Technikos Front-End Programuotojams

Štai keletas praktinių technikų, kurias front-end programuotojai gali naudoti savo svetainių ir žiniatinklio programų prieinamumui pagerinti:

1. Semantinis HTML

Semantinių HTML elementų naudojimas yra labai svarbus prieinamumui. Semantinis HTML suteikia jūsų turiniui prasmę ir struktūrą, todėl pagalbinėms technologijoms lengviau jį suprasti ir interpretuoti. Užuot viskam naudoję bendrinius <div> ir <span> elementus, naudokite HTML5 semantinius elementus, tokius kaip:

Pavyzdys:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content here...</p>
  </article>
</main>

<footer>
  <p>© 2023 My Website</p>
</footer>

Tinkamų antraščių lygių (nuo <h1> iki <h6>) naudojimas taip pat yra būtinas norint sukurti logišką dokumento struktūrą. Naudokite antraštes turiniui organizuoti ir palengvinti vartotojams naršymą. <h1> turėtų būti naudojama pagrindiniam puslapio pavadinimui, o vėlesnės antraštės – informacijos hierarchijai sukurti. Venkite praleisti antraščių lygius (pvz., pereiti nuo <h2> prie <h4>), nes tai gali suklaidinti ekrano skaitytuvų naudotojus.

2. Alternatyvus Tekstas Paveikslėliams

Visi paveikslėliai turėtų turėti prasmingą alternatyvų tekstą (alt tekstą), kuris apibūdina paveikslėlio turinį ir funkciją. Alt tekstą naudoja ekrano skaitytuvai, kad perteiktų paveikslėlio informaciją vartotojams, kurie jo negali matyti. Jei paveikslėlis yra grynai dekoratyvinis ir neperteikia jokios svarbios informacijos, alt atributas turėtų būti tuščias (alt="").

Pavyzdys:

<img src="logo.png" alt="Įmonės logotipas">
<img src="decorative-pattern.png" alt="">

Rašydami alt tekstą, būkite aprašomieji ir glausti. Sutelkite dėmesį į esminės informacijos, kurią teikia paveikslėlis, perteikimą. Venkite frazių, tokių kaip „paveikslėlis“ arba „nuotrauka“, nes ekrano skaitytuvai paprastai praneš, kad tai yra paveikslėlis.

Sudėtingiems paveikslėliams, pvz., diagramoms ir grafikams, apsvarstykite galimybę pateikti išsamesnį aprašymą aplinkiniame tekste arba naudoti <figure> ir <figcaption> elementus.

3. Prieinamumas Naudojant Klaviatūrą

Visi interaktyvūs jūsų svetainės elementai turi būti pasiekiami naudojant klaviatūrą. Tai labai svarbu vartotojams, kurie negali naudotis pele ar kitu rodymo įrenginiu. Užtikrinkite, kad vartotojai galėtų naršyti jūsų svetainėje naudodami Tab klavišą ir sąveikauti su elementais naudodami Enter arba Spacebar klavišus.

Atkreipkite dėmesį į elementų fokusavimo tvarką puslapyje. Fokusavimo tvarka turėtų sekti logišką ir intuityvų kelią per turinį. Galite naudoti tabindex atributą fokusavimo tvarkai valdyti, tačiau paprastai geriausia pasikliauti natūralia elementų tvarka HTML. tabindex naudokite tik norėdami ištaisyti problemas, susijusias su numatytąja fokusavimo tvarka.

Pateikite vizualius fokusavimo indikatorius, kad parodytumėte vartotojams, kuris elementas šiuo metu yra sufokusuotas. Numatytasis naršyklės fokusavimo indikatorius gali būti nepakankamas, todėl apsvarstykite galimybę pridėti savo stilių naudojant CSS. Užtikrinkite, kad fokusavimo indikatorius turėtų pakankamą kontrastą su fonu.

Pavyzdys:

/* CSS */
a:focus, button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

4. ARIA Atributai

ARIA (Prieinamos Turtingos Interneto Programos) yra atributų rinkinys, kurį galima pridėti prie HTML elementų, siekiant suteikti papildomos semantinės informacijos pagalbinėms technologijoms. ARIA atributai gali būti naudojami dinaminio turinio, sudėtingų valdiklių ir kitų interaktyvių elementų prieinamumui pagerinti.

Kai kurie dažniausiai naudojami ARIA atributai yra:

Pavyzdys:

<button aria-label="Uždaryti dialogo langą" onclick="closeDialog()">X</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Mano Dialogo Langas</h2>
  <p>Dialogo lango turinys čia...</p>
</div>

Naudojant ARIA atributus, svarbu laikytis ARIA naudojimo taisyklių:

5. Spalvų Kontrastas

Užtikrinkite, kad tarp teksto ir jo fono būtų pakankamas spalvų kontrastas. Nepakankamas spalvų kontrastas gali apsunkinti teksto skaitymą vartotojams su silpnu regėjimu ar spalvų aklumu.

WCAG reikalauja, kad kontrasto santykis būtų ne mažesnis kaip 4.5:1 normaliam tekstui ir 3:1 dideliam tekstui (18pt arba 14pt paryškintas). Galite naudoti spalvų kontrasto tikrinimo įrankius, kad patikrintumėte, ar jūsų svetainė atitinka šiuos reikalavimus. Yra daug nemokamų internetinių įrankių, pvz., WebAIM Contrast Checker.

Pavyzdys:

/* CSS */
body {
  color: #333; /* Tamsiai pilkas tekstas */
  background-color: #fff; /* Baltas fonas */
}

(Šis pavyzdys turi 7:1 kontrasto santykį, kuris atitinka WCAG reikalavimus.)

Venkite naudoti spalvą kaip vienintelę informacijos perteikimo priemonę. Vartotojai, kurie yra daltonikai, gali nesugebėti atskirti skirtingų spalvų. Naudokite papildomus ženklus, pavyzdžiui, tekstines etiketes ar piktogramas, kad sustiprintumėte spalvos prasmę.

6. Formos ir Etiketės

Tinkamas formos elementų ženklinimas yra labai svarbus prieinamumui. Naudokite <label> elementą, kad susietumėte teksto etiketę su kiekvienu formos įvesties lauku. <label> elemento for atributas turi atitikti atitinkamo įvesties elemento id atributą.

Pavyzdys:

<label for="name">Vardas:</label>
<input type="text" id="name" name="name">

Sudėtingoms formoms apsvarstykite galimybę naudoti <fieldset> ir <legend> elementus, kad sugrupuotumėte susijusius formos valdiklius. Tai gali padėti vartotojams suprasti kiekvienos valdiklių grupės paskirtį.

Pateikite aiškius ir glaustus klaidų pranešimus, kai vartotojai daro klaidų pildydami formą. Klaidų pranešimai turėtų būti rodomi šalia atitinkamo formos lauko ir turėtų pateikti nurodymus, kaip ištaisyti klaidą.

Naudokite required atributą, norėdami nurodyti, kurie formos laukai yra privalomi. Tai gali padėti vartotojams išvengti netyčinio nepilnų formų pateikimo.

7. Daugialypės Terpės Prieinamumas

Įsitikinkite, kad daugialypės terpės turinys, pavyzdžiui, vaizdo ir garso įrašai, yra prieinamas vartotojams su negalia. Pateikite subtitrus vaizdo įrašams ir transkripcijas garso įrašams. Subtitrai turėtų tiksliai transkribuoti sakytinį vaizdo įrašo turinį, įskaitant visus svarbius garso efektus ar foninį triukšmą.

Tiesioginiams vaizdo įrašams apsvarstykite galimybę naudoti realaus laiko subtitravimo paslaugas. Šios paslaugos gali pateikti subtitrus realiu laiku, leisdamos vartotojams su klausos sutrikimais sekti turinį. Daugelis vaizdo konferencijų platformų siūlo integruotas tiesioginio subtitravimo funkcijas.

Pateikite garso aprašymus vaizdo įrašams. Garso aprašymai pateikia vaizdinio turinio pasakojimą, apibūdinantį, kas vyksta ekrane. Garso aprašymai yra būtini vartotojams, kurie yra akli arba turi silpną regėjimą.

Užtikrinkite, kad daugialypės terpės valdikliai, tokie kaip paleidimo, pauzės ir garsumo valdikliai, būtų pasiekiami klaviatūra.

8. Dinaminis Turinys ir Atnaujinimai

Kai jūsų svetainės turinys atnaujinamas dinamiškai, svarbu pranešti vartotojams apie pakeitimus. Tai ypač svarbu vartotojams, kurie naudoja ekrano skaitytuvus, nes jie gali nežinoti, kad turinys pasikeitė.

Naudokite ARIA „gyvuosius regionus“ (live regions), kad praneštumėte apie dinaminius atnaujinimus ekrano skaitytuvams. ARIA „gyvieji regionai“ yra puslapio sritys, skirtos gauti atnaujinimus. Kai pasikeičia „gyvojo regiono“ turinys, ekrano skaitytuvas praneš apie pakeitimus vartotojui. Naudokite aria-live atributą „gyvajam regionui“ apibrėžti. aria-atomic ir aria-relevant atributai gali būti naudojami norint tiksliau nustatyti, kaip ekrano skaitytuvas praneša apie pakeitimus.

Pavyzdys:

<div aria-live="polite">
  <p id="status-message">Kraunama...</p>
</div>

<script>
  // Atnaujinti būsenos pranešimą, kai duomenys įkeliami
  function updateStatus(message) {
    document.getElementById("status-message").textContent = message;
  }
</script>

Šiame pavyzdyje aria-live="polite" atributas nurodo, kad ekrano skaitytuvas turėtų pranešti apie <div> elemento turinio pakeitimus, bet neturėtų pertraukti dabartinės vartotojo užduoties. Funkcija updateStatus() atnaujina <p> elemento turinį, o tai paskatins ekrano skaitytuvą pranešti naują būsenos pranešimą.

9. Prieinamumo Testavimas

Reguliariai tikrinkite savo svetainės prieinamumą, kad nustatytumėte ir ištaisytumėte visas problemas. Yra įvairių įrankių ir metodų, kuriuos galite naudoti prieinamumui tikrinti.

Prieinamumas Už Naršyklės Ribų

Nors šis vadovas daugiausia skirtas tinklalapių prieinamumui naršyklės kontekste, svarbu prisiminti, kad prieinamumas apima ne tik internetą. Apsvarstykite prieinamumą kitose skaitmeninėse srityse, pavyzdžiui:

Išvada

Tinklalapių prieinamumas yra esminis front-end programavimo aspektas. Laikydamiesi šiame vadove aprašytų principų ir metodų, galite sukurti įtraukias ir prieinamas žiniatinklio patirtis visiems vartotojams, nepriklausomai nuo jų gebėjimų. Atminkite, kad prieinamumas yra nuolatinis procesas. Reguliariai tikrinkite savo svetainę ir rinkite atsiliepimus iš vartotojų su negalia, kad užtikrintumėte, jog ji laikui bėgant išliktų prieinama. Teikdami pirmenybę prieinamumui, galite padaryti internetą įtraukesne ir teisingesne vieta visiems.

Priimdami prieinamumą, jūs ne tik laikotės taisyklių; jūs kuriate geresnį internetą visiems, plečiate savo pasiekiamumą ir stiprinate savo prekės ženklo reputaciją pasauliniu mastu.