A modern weboldalak elkészítése során gyakran a vizuális DOM struktúrára fókuszálunk, de a kisegítő technológiák (pl. képernyőolvasók) más szempontból nézik a tartalmat: egy strukturált, szemantikus reprezentációt kapnak – ez az akadálymentességi fa (accessibility tree). Ebben a cikkben bemutatom, hogyan épül fel, mi a szerepe, és hogyan segíthet fejlesztőként az akadálymentesítésben.
Mi az az akadálymentességi fa?
A böngésző a HTML DOM-ból egy egyszerűsített, szemantikus struktúrát hoz létre – ezt nevezzük akadálymentességi fának (Accessibility Tree). Ez csak olyan elemeket tartalmaz, amelyek valódi jelentéssel bírnak: szerepük, nevük és állapotuk van.
Egy egyszerű link vagy gomb például automatikusan szerepel az Accessibility Tree-ben, a kisegítő technológia a gombhoz tartozó tulajdonságok alapján jelzi ezt a felhasználónak.
Hogyan jutunk el a DOM-tól az akadálymentességi fáig?
A folyamat lépései:
- A böngésző felépíti a DOM tree-t.
- Elkészül a render tree, amelyből kimaradnak a rejtett (
display:none) vagy kizárólag layout-hoz használódó elemek. - A böngésző ezt alakítja át Accessibility Tree-vé: csak szemantikusan releváns elemek maradnak, szerep, név és állapot adatokkal.
- A kisegítő technológiák (AT) ezen a fán keresztül kommunikálnak az alkalmazással az Accessibility API-k segítségével. A felhasználói interakciók eseményekként visszakerülnek a DOM-ba.
Mit tartalmaz egy Accessibility Tree csomópont?
Minden csomópont négy fő tulajdonsággal rendelkezik:
- role: például
button,checkbox,navigation,listitem. - name: az elérhető név, például belső szövegből vagy
aria-label-ből származtatva. - state: mint például
checked,disabled,expanded. - description (leírás): opcionális,
aria-describedbyvagytitlealapján.
Példa: <button>Send</button> → szerep button, név „Send”.
Alternatív: <span role="button" aria-label="Send">, ahol az ARIA attribútum biztosítja a nevet és szerepet.
Miért fontos ez a fejlesztők számára?
A kisegítő technológiák kizárólag az akadálymentességi fát használják az audio vagy Braille kimenet létrehozásához. Ha a HTML nem tartalmaz megfelelő szemantikus információkat, a kisegítő technológiák nem tudják helyesen értelmezni a felületet. Az ARIA attribútumok megfelelő használatával (pl. aria-expanded, aria-hidden) javíthatjuk az akadálymentességi fát, de csak akkor, ha a natív HTML nem elegendő.
ARIA és szemantikus HTML – mikor mit használjunk?
- Mindig előnybe részesítsd a natív HTML elemeket:
<button>,<nav>,<header>stb. Ezek automatikusan szerepelnek az Accessibility Tree-ben. - ARIA-t csak akkor alkalmazz, ha a natív HTML nem elégséges: például egy egyedi UI vezérlőhöz, amely nem natív HTML komponensekkel épül fel.
Összegzés
Ahogy láthattuk, minden innen indul. Ha az accessibility tree nem megfelelő, akkor a kisegítő technológiák nem a megfelelő információkat fogják közvetíteni a felhasználóik számára.
A böngészőben az „Akadálymentesítési tulajdonságok” opciót választva megtekinthető az adott elemhez tartozó csomópont. Itt érdemes ellenőrizni a beállításokat, de a legjobb, ha teszteled az oldalt kisegítő technológiákkal (pl. képernyőolvasóval).
Vélemény, hozzászólás?