Toki, jos voisin opas saavutettavuuteen

Lomakkeen kenttien ohjeistukset

Olen usein törmännyt lomakkeisiin, joissa on lisättynä ohjeita kenttien vierelle. Mutta melko harvoin niitä on liitetty attribuutilla aria-describedby toisiinsa. Tämä tarkoittaa, että visuaalsiesti voit nähdä tiedon liittyvän kenttiin, mutta avustavilla teknologioilla tämä tieto voi jäädä ymmärtämättä. Tarkasta nämä esimerkit ruudunlukijalla ja huomaat mikä ero tällä aria-attribuutilla voi olla.

Haasteellinen esimerkki



Tämän ohjeistuksen on tarkoitus kertoa käyttäjälle mitä tähän kenttään on tarkoitus syöttää.

Parempi esimerkki



Tämä tieto on liitetty kenttään aria-describedby-attribuutin kanssa.

Loppukommentit

Käyttökokemuksen parantaminen ei muuta vaatinut kuin <label> elementin oikein käyttämisen ja ohjeiden liittämisen kenttään aria-attribuutilla.