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.
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:
<span>
elem szöveges tartalommal.<img>
elem alt attribútummal.<span>
elemen.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.