Sok weboldalon, amelyen adatokat kell kezelni és megjeleníteni, az adatok egy rácsszerkezetben jelennek meg. Ezeket az adatrácsokat nem minden esetben kezelik megfelelően a képernyőolvasó programok, és a tartalom nem járható be csak a billentyűzet használatával. A rács (grid) widget olyan tároló, amely lehetővé teszi a felhasználók számára, hogy navigációs billentyűkkel, például a nyíl, Home és End billentyűkkel mozoghassanak a benne lévő információk vagy interaktív elemek között. Habár a WAI-ARIA attribútumok nevében és a kisegítő technológiákban a row és a column szavakat használják az elemek logikai szerkezetének leírása és bemutatása során, azonban a grid szerep használata egy elemen nem feltétlenül jelenti azt, hogy az elem vizuálisan táblázatos. A rácsnak két fajtája van, az adatrács és az elrendezési rács.
Jelen fejezet célja olyan rácskomponens bemutatása, amely képernyőolvasó program és csak billentyűzet használata esetén is jól navigálható, és az információkat is megfelelően ki lehet olvasni a táblázatból. Ehhez a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Grid komponens Rendezhető adatrács szerkeszthető cellákkal eleme szolgált kiindulásként, annak módosított, magyar nyelvű és magyar formátumú változata szerepel a komponens gyakorlati példájában.
Megjegyzés: A rácskomponens-példák közül egy kerül bemutatásra. További rácskomponens-mintákat talál, ha a bemutatandó példa oldalon a letöltés lehetőséget választja. A következő példák tölthetők le:
A rács (grid) egyik megvalósítását mutatja be az elkészült példa. A rács pénzügyi tranzakciókat mutat be. A rács billentyűzettámogatással rendelkezik, ezen kívül lehetővé tesz tartalomszerkesztést és rendezést is.
Az adatcellák a szabványos navigációs billentyűk és billentyűkombinációk használatával fókuszálhatók. Ezek közé tartoznak a nyílbillentyűk, valamint a Home, az End, a Control + Home, és a Control + End.
A Page Down és a Page Up billentyű nem támogatott, mivel az ilyen görgetéshez hasonló funkciók nem hasznosak ennyire kevés sor esetén.
A dátum és az összeg oszlopok rendezési funkciót biztosítanak, ezért az oszlopfejlécek fókuszálhatók.
A leírás a cella aktiválásával szerkeszthető (Enter billentyű).
A kategória egy felugró menü segítségével módosítható (Enter vagy Szóköz billentyű).
A grid szerep egy <table> elemre vonatkozik, ezt az elemet azonosítja rácsként. A row, a rowheader, a colheader és a gridcell szerepeket nem kell megadni, mert a <tr>, a <th>, és a <td> tag-ek utalnak rájuk.
A <table> elemben az aria-labelledby="grid2Label" a rácsot címkéző címsorelemre utal.
A <th> elemben az aria-sort="ascending" akkor kerül alkalmazásra, amikor egy oszlop növekvő sorrendben van rendezve.
A <th> elemben az aria-sort="descending" akkor kerül alkalmazásra, amikor egy oszlop csökkenő sorrendben van rendezve.
A <th> elemben az aria-sort="none" akkor kerül alkalmazásra, ha egy oszlop rendezhető, de nincs rendezve.