Esirakenduse ligipääsetavuse arendus: optimeerimine ekraanilugejate jaoks

Tänapäeva ühendatud maailmas ei ole ligipääsetavate digitaalsete kogemuste loomine pelgalt hea tava; see on tõelise ülemaailmse kaasatuse põhinõue. Esirakenduse arendajatena on meil oluline vastutus tagada, et veeb oleks kasutatav kõigile, sõltumata nende võimetest. Selle püüdluse üks kriitilisemaid aspekte on meie liideste optimeerimine ekraanilugejatele – abitehnoloogiale, mida kasutavad miljonid pimedad või vaegnägijad.

See põhjalik juhend süveneb esirakenduse ligipääsetavuse arenduses ekraanilugejate optimeerimise põhiprintsiipidesse ja praktilistesse tehnikatesse. Meie eesmärk on anda teile teadmised ja tööriistad, et luua veebirakendusi, mis pole mitte ainult funktsionaalsed, vaid ka tajutavad, kasutatavad ja mõistetavad kõigile kasutajatele üle maailma.

Ekraanilugejate ja nende kasutajate mõistmine

Enne tehnilistesse optimeerimistesse süvenemist on oluline mõista, mis on ekraanilugejad ja kuidas inimesed neid kasutavad. Ekraanilugejad on tarkvararakendused, mis tõlgendavad veebilehe visuaalset sisu ja esitavad selle kasutajale sünteesitud kõne või punktkirja väljundi kaudu. Need võimaldavad kasutajatel digitaalses sisus navigeerida, seda mõista ja sellega suhelda.

Põhimõisted, mida tuleks mõista:

• Kuidas kasutajad navigeerivad: Ekraanilugeja kasutajad navigeerivad sageli pealkirjade, linkide, maamärkide, vormielementide ja muude interaktiivsete juhtelementide abil, mitte lineaarselt läbi lehe.
• Edastatav teave: Ekraanilugejad loevad ette tekstisisu, piltide alternatiivtekste, vormielementide silte ja interaktiivsete elementide kirjeldavat teavet.
• Kasutajakogemus: Hästi optimeeritud liides pakub selget, loogilist ja tõhusat kogemust. Vastupidiselt võib halb optimeerimine põhjustada pettumust, segadust ja tõrjutust.

Oluline on meeles pidada, et ekraanilugejate kasutajad ei ole monoliitne rühm. Nende vajadused ja eelistused võivad erineda, mistõttu on põhjalik testimine erinevate kasutajate ja abitehnoloogiatega hädavajalik.

Alus: semantiline HTML

Ekraanilugeja optimeerimise aluskiviks on HTML-i korrektne ja semantiline kasutamine. Semantiline HTML kasutab elemente, mis annavad selgelt edasi oma tähenduse ja eesmärgi nii veebilehitsejatele kui ka abitehnoloogiatele.

Miks on semantiline HTML ekraanilugejate jaoks oluline

• Struktuur ja hierarhia: Pealkirjad (<h1> kuni <h6>) määratlevad dokumendi struktuuri, võimaldades kasutajatel kiiresti mõista sisu ülesehitust ja navigeerida konkreetsetesse jaotistesse.
• Elementide eesmärk: Elemendid nagu <nav>, <header>, <footer>, <main> ja <aside> toimivad maamärkidena, pakkudes navigeerimiseks kontekstuaalseid vihjeid.
• Interaktiivsed elemendid: Kasutades omaseid HTML-elemente nagu <button>, <a>, <input> ja <select>, on tagatud sisseehitatud ligipääsetavusfunktsioonid, mida ekraanilugejad mõistavad.

Semantilise HTML-i parimad tavad

• Kasutage pealkirju loogiliselt: Tagage selge ja hierarhiline struktuur. Ärge jätke pealkirjatasemeid vahele (nt ärge minge <h2>-lt otse <h4>-le).
• Kasutage maamärgirolle asjakohaselt: Kasutage elemente nagu <nav> navigeerimismenüüde jaoks, <main> lehe põhisisu jaoks ja <footer> lehe jaluste jaoks.
• Kasutage <button> toimingute ja <a> navigeerimise jaoks: See eristus on ekraanilugejate jaoks elemendi kavandatud käitumise mõistmisel ülioluline.
• Veenduge, et kõigil vormielementidel oleksid sildid: Kasutage <label> elementi koos atribuudiga for, mis viitab sisendi ID-le.
• Pakkuge piltidele kirjeldavat alternatiivteksti: Informatiivsete piltide puhul peaks atribuut alt edasi andma pildi sisu. Puhtalt dekoratiivsete piltide puhul kasutage tühja alt="".

Näide: Selle asemel, et kasutada nupu välimusega stiilitud <div>-elementi, kasutage alati <button>-elementi. See tagab, et ekraanilugejad teatavad sellest kui "nupust" ja kasutajad saavad selle aktiveerida tavaliste klaviatuurikāskudega.

ARIA (Accessible Rich Internet Applications) võimendamine

Kuigi semantiline HTML pakub tugeva aluse, sisaldavad kaasaegsed veebirakendused sageli keerukaid kohandatud vidinaid ja dünaamilist sisu. Siin tulebki mängu ARIA. ARIA on atribuutide kogum, mida saab lisada HTML-elementidele, et pakkuda täiendavat semantikat ja parandada kohandatud kasutajaliideste ligipääsetavust.

Millal kasutada ARIAt

ARIAt tuleks kasutada, et:

• Täiendada olemasolevat semantikat: Kui omased HTML-elemendid ei paku piisavalt teavet.
• Kirjeldada dünaamilist sisu: Et teavitada kasutajaid sisu muudatustest, näiteks uuendustest, teadetest või uute andmete laadimisest.
• Määratleda rollid kohandatud vidinatele: Et muuta kohandatud juhtnupud (nagu liugurid, akordionid või vahelehed) abitehnoloogiatele mõistetavaks.

Peamised ARIA atribuudid ekraanilugeja optimeerimiseks

• role: Määratleb kasutajaliidese elemendi tüübi, mida komponent esindab (nt role="dialog", role="tab").
• aria-label: Pakub tekstisildi elemendile, kui nähtavat silti pole saadaval. Seda kasutatakse sageli ikooninuppude puhul.
• aria-labelledby: Seostab elemendi teise elemendiga, mis toimib selle sildina (nt vormi sisendi sidumine selle nähtava sildiga).
• aria-describedby: Seostab elemendi teise elemendiga, mis pakub kirjeldust või juhiseid.
• aria-live: Teavitab abitehnoloogiaid sisu muudatustest lehe konkreetses piirkonnas. Väärtuste hulka kuuluvad:
• off (vaikimisi): Teadet ei edastata.
• polite: Ekraanilugeja teatab muudatusest, kui see on ooterežiimis.
• assertive: Ekraanilugeja katkestab ja teatab muudatusest koheselt.
• aria-expanded: Näitab, kas kokkupandav element on laiendatud või ahendatud (nt akordionide puhul).
• aria-hidden: Peidab elemendi ja selle alam-elemendid abitehnoloogiate eest. Kasutage äärmise ettevaatusega, tavaliselt sisu puhul, mis on visuaalselt peidetud ja peaks olema ka programmiliselt peidetud.

Näide: Kujutage ette otsinguikooniga nuppu, mis kuvab ainult ikooni. Ilma nähtava sildita võib ekraanilugeja sellest teatada kui "nupp". Selle parandamiseks kasutaksite atribuuti aria-label:

            <button aria-label="Otsi">
  <i class="icon-search" aria-hidden="true"></i>
</button>

            

              
                Copy
              
            
          

Atribuut aria-hidden="true" ikoonil endal takistab ekraanilugejal ikoonimärgi tõlgendamist, tagades, et see loeb ainult ligipääsetavat nime "Otsi".

ARIA parimad tavad

• Järgige ARIA Authoring Practices Guide'i (APG): See juhend pakub mustreid ligipääsetavate kohandatud komponentide loomiseks.
• Ärge leiutage uuesti omaseid elemente: Kui omane HTML-element suudab saavutada sama tulemuse, kasutage seda. ARIA peaks täiustama, mitte asendama, omast semantikat.
• Testige rangelt: ARIA võib olla keeruline. Testige alati tegelike ekraanilugejatega (nt NVDA, JAWS, VoiceOver) ja erinevate veebilehitsejatega.
• Kasutage kõige spetsiifilisemat rolli: Kui on olemas spetsiifilisem roll kui üldine (nt tabpanel asemel region), kasutage spetsiifilist.

Dünaamilise sisu ja kasutaja interaktsioonide optimeerimine

Kaasaegsed veebirakendused on väga dünaamilised, kus sisu uuendatakse reaalajas ilma lehe täieliku uuesti laadimiseta. On ülimalt oluline tagada, et ekraanilugejad suudaksid nende muudatustega sammu pidada.

Uuenduste käsitlemine aria-live abil

Atribuut aria-live on hädavajalik kasutajate teavitamiseks asünkroonsetest sisu uuendustest.

• Teadanded: Süsteemiteadete, veateadete või olekuvärskenduste jaoks kasutage aria-live="assertive", et tagada kohene teavitamine.
• Vestlussõnumid või vood: Sisu puhul, mis uueneb sageli, kuid ei vaja kohest katkestamist, on aria-live="polite" sageli piisav.

Näide: Ostukorvi uuendamine uue kaubaga:

            <div id="cart-status" aria-live="polite">
  Teie ostukorvis on nüüd 3 toodet.
</div>

            

              
                Copy
              
            
          

Kui JavaScript uuendab teksti selles div-elemendis, teatab ekraanilugeja muudatusest viisakalt.

Fookuse haldamine

Fookuse haldamine on ekraanilugeja kasutajate jaoks kriitilise tähtsusega, et mõista, kus nad lehel asuvad ja kuidas dünaamiliste elementidega suhelda.

• Modaaldialoogid: Kui modaalaken avaneb, tuleks fookus programmiliselt viia esimesele interaktiivsele elemendile modaalaknas. Kui modaalaken suletakse, peaks fookus naasma elemendile, mis selle käivitas. Kasutage modaaldialoogide jaoks atribuuti aria-modal="true".
• Dünaamilise sisu laadimine: Kui sisu laaditakse uude alasse, kaaluge fookuse viimist sinna alasse, kui see on peamine uus sisu, millega kasutaja peab suhtlema.
• Klaviatuuriga navigeerimine: Veenduge, et kõik interaktiivsed elemendid on klaviatuuri abil ligipääsetavad ja kasutatavad ning neil on selge visuaalne fookuse indikaator.

Näide: JavaScripti kasutamine fookuse viimiseks modaalaknasse:

            const modal = document.getElementById('myModal');
const firstFocusableElement = modal.querySelector('button, a, input');

// When opening modal
firstFocusableElement.focus();

            

              
                Copy
              
            
          

Ligipääsetavad vormid

Vormid on tavaline valdkond, kus tekivad ligipääsetavuse probleemid. Vormide kasutatavuse tagamine ekraanilugejatega nõuab tähelepanu detailidele.

• Selged sildid: Nagu mainitud, seostage sildid alati sisenditega, kasutades <label for="id">.
• Vigade käsitlemine: Näidake selgelt valideerimisvigu ja seostage need asjakohaste vormiväljadega, kasutades aria-describedby. Andke juhiseid vigade parandamiseks.
• Nõutavad väljad: Märgistage nõutavad väljad atribuudiga aria-required="true".
• Sisendigrupid: Ühise sildiga raadionuppude või märkeruutude puhul kasutage <fieldset> ja <legend>.

Näide: Veateatega vorm:

            <div class="form-group"
     aria-describedby="email-error"
>
  <label for="email">E-posti aadress</label>
  <input type="email" id="email" required>
  <div id="email-error" class="error-message" aria-live="assertive"></div>
</div>

<script>
  // On validation error:
  const emailErrorDiv = document.getElementById('email-error');
  emailErrorDiv.textContent = 'Palun sisestage kehtiv e-posti aadress.';
</script>

            

              
                Copy
              
            
          

Optimeerimine erinevate ekraanilugeja/veebilehitseja kombinatsioonide jaoks

Veebi ökosüsteem on mitmekesine, hõlmates erinevaid ekraanilugejaid (NVDA, JAWS, VoiceOver, TalkBack) ja veebilehitsejate kombinatsioone. Kuigi põhiprintsiibid kehtivad universaalselt, võib esineda nüansse.

Põhilised kaalutlused

• Veebilehitsejate ühilduvus: Testige oma ligipääsetavusfunktsioone peamistes veebilehitsejates (Chrome, Firefox, Safari, Edge).
• Ekraanilugejaga testimine: Testige regulaarselt levinumate ekraanilugejatega platvormidel, mida teie kasutajad tõenäoliselt kasutavad.
• Windows: NVDA (tasuta), JAWS (kommerts)
• macOS: VoiceOver (sisseehitatud)
• iOS: VoiceOver (sisseehitatud)
• Android: TalkBack (sisseehitatud)
• Mobiil vs. töölaud: Ekraanilugeja käitumine võib lauaarvuti ja mobiilsete operatsioonisüsteemide vahel oluliselt erineda.

Testimise tööriistad

• Veebilehitseja arendaja tööriistad: Paljudel veebilehitsejatel on ligipääsetavuse inspektorid, mis suudavad esile tuua semantilisi probleeme või puuduvaid ARIA atribuute.
• WAVE (Web Accessibility Evaluation Tool): Veebipõhine tööriist, mis annab ülevaate ligipääsetavuse vigadest ja funktsioonidest.
• axe DevTools: Veebilehitseja laiendus, mis integreerub teie arendustöövooga, et tuvastada ligipääsetavuse probleeme.
• Manuaalne klaviatuuriga testimine: Navigeerige kogu oma saidil, kasutades ainult klaviatuuri (Tab, Shift+Tab, Enter, tühik, nooleklahvid).

Ülemaailmsed perspektiivid ligipääsetavuses

Ligipääsetavus on ülemaailmne mure. Rahvusvahelisele publikule disainides ja arendades arvestage järgmisega:

• Keeleerinevused: Veenduge, et teie sait toetab õigesti erinevaid keeli ja märgistikke. Semantiline HTML ja ARIA atribuudid tuleks rakendada viisil, mis austab keele suunda (nt dir="rtl" paremalt vasakule kirjutatavate keelte jaoks).
• Kultuurinormid: Olge teadlik ikoonidest või visuaalsetest vihjetest, mis ei pruugi kultuurideüleselt hästi tõlkida. Pakkuge tekstilisi alternatiive.
• Abitehnoloogia kasutuselevõtt: Kuigi populaarsed ekraanilugejad on levinud, võivad kasutuselevõtu määrad ja spetsiifilised abitehnoloogiad piirkonniti erineda. Laiaulatuslik testimine on võtmetähtsusega.
• Juriidilised nõuded: Paljudes riikides on spetsiifilised veebi ligipääsetavuse seadused ja standardid (nt ADA USAs, EN 301 549 Euroopas). WCAG (Web Content Accessibility Guidelines) järgimine aitab üldiselt neid nõudeid ülemaailmselt täita.

Kõike kokku võttes: kontrollnimekiri ekraanilugeja optimeerimiseks

Siin on lühike kontrollnimekiri, mis juhendab teid ekraanilugeja optimeerimisel:

Struktuur ja semantika

• Kasutage semantilisi HTML5 elemente korrektselt (<header>, <nav>, <main>, <article>, <aside>, <footer>).
• Rakendage loogiline pealkirjade struktuur (<h1> kuni <h6>).
• Kasutage <button> toimingute ja <a> navigeerimise jaoks.

Sisu ja meedia

• Pakkuge kõigile informatiivsetele piltidele tähendusrikast alt-teksti.
• Kasutage dekoratiivsete piltide jaoks tühja alt="".
• Veenduge, et video- ja helisisul oleksid ligipääsetavad alternatiivid (subtiitrid, transkriptsioonid).

Vormid ja interaktsioon

• Seostage kõik vormi juhtnupud nähtavate siltidega, kasutades <label>.
• Kasutage aria-label või aria-labelledby, kui nähtavad sildid pole võimalikud.
• Pakkuge selgeid juhiseid ja tagasisidet vormi valideerimiseks ja vigade korral.
• Märgistage nõutavad väljad atribuudiga aria-required="true".
• Grupeerige seotud vormielemendid <fieldset> ja <legend> abil.

Dünaamiline sisu ja olek

• Kasutage aria-live oluliste, dünaamiliste sisu uuenduste jaoks.
• Hallake fookust programmiliselt modaalakende, dünaamilise sisu laadimise ja keerukate vidinate puhul.
• Kasutage ARIA rolle, olekuid ja omadusi täpselt kohandatud komponentide jaoks.
• Veenduge, et interaktiivsetel elementidel oleksid selged visuaalsed fookuse indikaatorid.

Testimine ja valideerimine

• Teostage manuaalset, ainult klaviatuuriga navigeerimise testimist.
• Testige peamiste ekraanilugejatega (NVDA, JAWS, VoiceOver, TalkBack).
• Kasutage ligipääsetavuse hindamise tööriistu (WAVE, axe).
• Kaaluge kasutajatestimist inimestega, kes kasutavad ekraanilugejaid.

Kokkuvõte

Esirakenduse ligipääsetavuse arendus, eriti ekraanilugejate optimeerimine, on pidev pühendumine kaasavale disainile. Omaks võttes semantilise HTML-i, kasutades läbimõeldult ARIAt, hallates dünaamilist sisu ja fookust ning pühendudes põhjalikule testimisele, saame luua veebikogemusi, mis annavad jõudu kõigile kasutajatele, sõltumata nende võimetest või geograafilisest asukohast.

Arendajatena püüdleme selle poole, et luua veeb, mis on tõeliselt kõigi jaoks. Ligipääsetavuse prioritiseerimine ei ole järelmõte; see on lahutamatu osa kvaliteetsete, kasutajakesksete digitaalsete toodete ehitamisest, mis leiavad vastukaja kogu maailmas.