Tenglar fyrir skjálesara

Silktide finnur tengla sem eru ranglega uppbyggðir á þann hátt að þeir virka ekki rétt með hjálpartækni – tengla án læsilegs texta, tengla án áfangastaðar og stök tóm tenglamerki sem hafa orðið eftir á síðunni.

Til að tengill virki með hjálpartækni þarf hann bæði áfangastað (eigindina href) og eitthvað læsilegt inni í sér:

<!-- Virkar: áfangastaður og læsilegur texti -->
<a href="/about">Um okkur</a>

<!-- Virkar: myndtengill með alt-texta -->
<a href="/apple"><img src="apple.png" alt="Apple"></a>

Af hverju þetta skiptir máli

Skjálesari les upp hvern tengil eftir texta hans. Tengill með áfangastað en engan texta er lesinn upp sem bara „tengill“ – notandinn getur virkjað hann en hefur ekki hugmynd um hvert hann leiðir. Tengill með texta en án áfangastaðar lítur út fyrir að vera smellanlegur en leiðir ekki neitt. Bæði mynstrin rjúfa grundvallarsamkomulagið sem gerir fólki sem notar hjálpartækni kleift að vafra um síðu eftir tenglum hennar.

Hvernig á að laga þetta

1. Fyrir tengil með áfangastað en engan læsilegan texta: bættu texta inn í tengilinn eða bættu við alt-texta ef hann inniheldur aðeins mynd.
2. Fyrir tengil með texta en án áfangastaðar: bættu við href sem vantar. Ef þátturinn er í raun áfangastaður sem aðrir tenglar eiga að hoppa að skaltu færa id-eigindina yfir á þátt sem er ekki tengill:

<!-- Eldra akkeri fyrir áfangastað, ekki ráðlagt í HTML5 -->
<a name="example"></a>

<!-- Æskilegt: id á venjulegum þætti -->
<div id="example">...</div>

3. Fyrir tóm <a></a>-merki sem hafa engar eigindir: fjarlægðu þau, þau þjóna engum tilgangi. Þau verða oft eftir vegna ritstjóra eða skriftna.
4. Ef þátturinn er í raun hnappur – hann kallar á aðgerð í stað þess að fara á annan stað – skaltu nota <button>-þátt eða bæta role="button" við merkið sem fyrir er.

Hvernig Silktide prófar þetta

1. Finndu hvert <a>-merki á síðunni og lestu texta þess (þar með talinn alt-texta mynda og texta sem CSS bætir við), href-eigindina og allar id- eða name-eigindir.
2. Merktu þrjú vandamynstur:
   • Tengil með href en engan læsilegan texta.
   • Þátt með texta og id eða name en án href – áfangastað sem gefur sig út fyrir að vera tengill eða tengil sem vantar áfangastað.
   • Alveg tómt akkeri án texta, href, id eða name.
3. Tvö mynstur eru viljandi ekki merkt:
   • <a> með texta en án href, id eða name – HTML5 leyfir þetta sem „staðgengilstengil“ sem JavaScript fyllir oft út síðar.
   • Tóm akkeri með id eða name en án href – þetta eru eldri hoppáfangastaðir, ekki tenglar.

Frekari upplýsingar

• Understanding Success Criterion 4.1.2: Name, Role, Value (WCAG 2.2)
• H91: Using HTML form controls and links (WCAG technique)
• Tilgangur tengils
• Tómur tengill