---
title: Ligipääsetavuse parandamine
description: Auditeerib ja parandab HTML-i ligipääsetavust: ARIA-sildid, klaviatuurinavigatsioon, fookus, kontrast ja vormivead.
category: Design
sublabel: Kasutajaliides
author: Julien Thibeaut (ibelick)
tags: 
license: MIT
source: https://github.com/ibelick/ui-skills
---

# 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

| prioriteet | kategooria | mõju |
|----------|----------|--------|
| 1 | ligipääsetavad nimed | kriitiline |
| 2 | klaviatuurile ligipääs | kriitiline |
| 3 | fookus ja dialoogid | kriitiline |
| 4 | semantika | kõrge |
| 5 | vormid ja vead | kõrge |
| 6 | teavitused | keskmine–kõrge |
| 7 | kontrast ja olekud | keskmine |
| 8 | meedia ja liikumine | madal–keskmine |
| 9 | tööriista piirid | kriitiline |

## 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

```html
<!-- 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