Jó megoldások – akadálymentes webes komponensek, Infoalap logóval

Akadálymentes hivatkozások készítésének leírása

Bevezetés

A link widget interaktív hivatkozást biztosít egy erőforrásra. A célerőforrás lehet külső vagy helyi, azaz az aktuális oldalon vagy az alkalmazáson kívül vagy azon belül. A fejlesztőknek erősen ajánlott, hogy natív HTML hivatkozáselemet, például egy href attribútummal rendelkező HTML <a> elemet használjanak.

Jelen fejezet célja olyan hivatkozási megoldások bemutatása, amelyek eltérnek a natív HTML hivatkozás elemtől, de hivatkozásként viselkednek. A példákban a képernyőolvasó szoftverek megfelelően olvassák és kezelik ezeket az elemeket, illetve a billentyűs kezelés is használható. Ehhez a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Link 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.

A példa áttekintése

Az itt szereplő példák a hivatkozások három változatát mutatják be. Ezeket a mintákat akkor szokták használni, amikor valamilyen hivatkozásos viselkedésre van szükség olyan elemnél, amely eltér a HTML-elemtől.

Megjegyzés: Amikor csak lehetséges, használjon HTML <a> elemet a hivatkozások létrehozásához. A web-böngészők hasznos funkciókat biztosítanak a natív HTML-hivatkozások számára, például új ablakban nyithatják meg a célt, továbbá lehetővé teszik a cél URL címének másolását a rendszer vágólapjára.

A WAI-ARIA link szerep használatakor (hasonlóan más widget-szerepekhez) a böngészők nem biztosítják a szabványos hivatkozásoknál megszokott plusz funkciókat, mint például a hivatkozás céljának megnyitási módjait vagy a helyimenü parancsait. A link szerepkör használatakor az elem ezen funkcióinak biztosítása a fejlesztő felelőssége.

A hivatkozásmintának három változata van. Ezek a következők:

  1. <span> elem szöveges tartalommal.
  2. <img> elem alt attribútummal.
  3. CSS :before content tulajdonság egy <span> elemen.

Billentyűzet támogatás

Szerep, tulajdonság, állapot és tabindex attribútumok

A role="link" szerep az 1. és a 3. példában a <span> elemet hivatkozásként azonosítja be a kisegítő technológiák számára.

A role="link" szerep a 2. példában az <img> elemet hivatkozásként azonosítja be a kisegítő technológiák számára.

A <span> elemen belül a tabindex="0" gondoskodik arról, hogy az oldalon a hivatkozás benne legyen a tabsorrendben.

A 2. példában az <img> elemen belül az alt attribútum a hivatkozás akadálymentes nevét definiálja.

A 3. példában a <span> elemen belül az aria-label a hivatkozás akadálymentes nevét definiálja.


www.infoalap.hu