fixing-accessibility

Paranda ligipääsetavuse probleemid.

kuidas kasutada

• /fixing-accessibility Rakenda neid piiranguid kogu selle vestluse kasutajaliidese töös.

• /fixing-accessibility <file> Vaata fail läbi kõigi allpool toodud reeglite alusel ja anna aru:

• rikkumised (tsiteeri täpset rida või koodilõiku)
• miks see oluline on (üks lühike lause)
• konkreetne parandus (koodi tasemel soovitus)

Ära kirjuta kasutajaliidese suuri osi ümber. Eelista minimaalseid, sihitud parandusi.

millal rakendada

Kasuta neid juhiseid, kui: - lisad või muudad nuppe, linke, sisestusvälju, menüüsid, dialooge, vahekaarte, rippmenüüsid - ehitad vorme, valideerimist, veaolekuid, abitekste - teostad kiirklahve või kohandatud interaktsioone - tegeled fookuse olekute, fookuse lõksustamise või modaalakende käitumisega - renderdad ainult ikooniga juhtelemente - lisad ainult hõljumisel toimivaid interaktsioone või peidetud sisu

reeglikategooriad prioriteedi järgi

kiirviide

1. ligipääsetavad nimed (kriitiline)

• igal interaktiivsel juhtelemendil peab olema ligipääsetav nimi
• ainult ikooniga nuppudel peab olema aria-label või aria-labelledby
• igal input-, select- ja textarea-elemendil peab olema silt
• linkidel peab olema tähendusrikas tekst (mitte „kliki siia“)
• dekoratiivsed ikoonid peavad olema aria-hidden

2. klaviatuurile ligipääs (kriitiline)

• ära kasuta div- ega span-elementi nupuna ilma täieliku klaviatuuritoeta
• kõik interaktiivsed elemendid peavad olema Tab-klahviga kättesaadavad
• fookus peab klaviatuurikasutajatele nähtav olema
• ära kasuta tabindex-väärtust, mis on suurem kui 0
• Escape peab vajaduse korral sulgema dialoogid või ülekatted

3. fookus ja dialoogid (kriitiline)

• modaalaknad peavad avatuna fookuse lõksustama
• sulgemisel taasta fookus käivitavale elemendile
• määra dialoogide sees algfookus
• dialoogi avamine ei tohiks lehte ootamatult kerida

4. semantika (kõrge)

• eelista natiivseid elemente (button, a, input) rollipõhistele häkkidele
• kui kasutad rolli, peavad olemas olema nõutud aria-atribuudid
• loendid peavad kasutama ul- või ol-elementi koos li-ga
• ära jäta pealkirjatasemeid vahele
• tabelid peavad vajaduse korral kasutama päiste jaoks th-elementi

5. vormid ja vead (kõrge)

• vead peavad olema väljadega seotud aria-describedby abil
• kohustuslikest väljadest peab teada antama
• vigased väljad peavad määrama aria-invalid
• abitekst peab olema seotud sisestusväljadega
• keelatud saatmistoimingud peavad selgitama, miks need keelatud on

6. teavitused (keskmine–kõrge)

• kriitilised vormivead peaksid kasutama aria-live'i
• laadimisolekud peaksid kasutama aria-busy't või olekuteksti
• toast-teated ei tohi olla ainus viis kriitilise info edastamiseks
• laiendatavad juhtelemendid peavad kasutama aria-expanded ja aria-controls atribuute

7. kontrast ja olekud (keskmine)

• taga teksti ja ikoonide piisav kontrast
• ainult hõljumisel toimivatel interaktsioonidel peab olema klaviatuurivaste
• keelatud olekud ei tohi tugineda ainult värvile
• ära eemalda fookusraami ilma nähtava asenduseta

8. meedia ja liikumine (madal–keskmine)

• piltidel peab olema korrektne alt-tekst (tähendusrikas või tühi)
• kõnega videod peaksid asjakohasel juhul pakkuma subtiitreid
• austa mittehädavajaliku liikumise puhul prefers-reduced-motion seadet
• väldi heliga automaatselt käivituvat meediat

9. tööriista piirid (kriitiline)

• eelista minimaalseid muudatusi, ära refaktoreeri mitteseotud koodi
• ära lisa aria't, kui natiivne semantika probleemi juba lahendab
• ära migreeri kasutajaliidese teeke, kui seda ei paluta

levinud parandused

<!-- icon-only button: add aria-label -->
<!-- before --> <button><svg>...</svg></button>
<!-- after -->  <button aria-label="Close"><svg aria-hidden="true">...</svg></button>

<!-- div as button: use native element -->
<!-- before --> <div onclick="save()">Save</div>
<!-- after -->  <button onclick="save()">Save</button>

<!-- form error: link with aria-describedby -->
<!-- before --> <input id="email" /> <span>Invalid email</span>
<!-- after -->  <input id="email" aria-describedby="email-err" aria-invalid="true" /> <span id="email-err">Invalid email</span>

ülevaatuse juhised

• paranda esmalt kriitilised probleemid (nimed, klaviatuur, fookus, tööriista piirid)
• eelista natiivset HTML-i enne aria lisamist
• tsiteeri täpset koodilõiku, kirjelda viga, paku välja väike parandus
• keerukate vidinate (menüü, dialoog, combobox) puhul eelista väljakujunenud ligipääsetavaid primitiive kohandatud käitumisele