Varmista, taulukon asianmukaiset ARIA-tunnisteet

Saavutettava taulukko ARIA-tunnisteilla

Elementti, jonka role="table", on staattinen taulukkomainen rakenne, jossa rivit sisältävät soluja. Solut eivät ole fokusoitavissa tai valittavissa, mutta solujen sisällä olevat widgetit voivat olla interaktiivisia.

Suositus: Käytä aina kun mahdollista natiivisia HTML <table> -elementtejä.

ARIA-tunnisteiden lisääminen:

Jotta taulukko olisi saavutettava, semanttiset taulukkoelementit (<table>, <thead>, <tr>, <th>, <td>) tulisi linkittää vastaaviin rooleihin: "table", "row", "columnheader", "cell".

1. Lisää role="table" säiliöelementille.
2. Lisää role="row" kaikille riveille.
3. Lisää role="cell" jokaiselle solulle.
4. Lisää role="columnheader" kaikille sarakeotsikoille.
5. Lisää role="rowheader" kaikille riviotsikoille.
6. Lisää aria-rowcount="rivin-maara" säiliöelementtiin (missä rivin-maara on taulukon rivien todellinen määrä).
7. Taulukon otsikko voidaan määrittää aria-labelledby- tai aria-label-attribuutilla.

Tällä tavalla ruudunlukijat ja muut apuvälineet pystyvät tulkkaamaan taulukon rakenteen ja sisällön oikein.

Alla on esimerkki oikeanlaisesta HTML-rakenteesta ja -merkinnöistä: