Linkszöveg, amelynek kontextus nélkül is van értelme

Hogyan navigálnak valójában a képernyőolvasót használók

Mielőtt arról beszélnénk, hogyan írjunk linkszöveget, segít megérteni, hogyan használják valójában az emberek a linkeket, amikor nem látják az oldalt.

A képernyőolvasók olyan gyorsbillentyűt kínálnak, amelyről a legtöbb látó felhasználó nem is tudja, hogy létezik: egyetlen billentyű (a legtöbb képernyőolvasóban jellemzően az L betű) lenyomásával végig lehet lépkedni az oldal összes linkjén, egyesével felolvasva őket, kontextuson kívül. A felhasználók ezt egy oldal gyors átfutására használják, ahogyan egy látó felhasználó szeme átfutná a címsorokat és a cselekvésre ösztönző gombokat.

Ha az oldalán tizenkét link van, amely azt mondja: „Tovább”, akkor ez a lista értelmetlen. A felhasználó ezt hallja: „Tovább. Tovább. Tovább. Tovább…”. Nem tudják megmondani, hogy bármelyik hová vezet.

Ez az az alapvető probléma, amelyet a linkszöveg akadálymentessége próbál megoldani: minden linknek önmagát leírónak kell lennie, mert a kontextus eltűnik, amikor linkről linkre navigál.

Mit mond a WCAG

A 2.4.4 Link célja (kontextusban) A szinten megköveteli, hogy minden link célja meghatározható legyen önmagában a linkszövegből, vagy a linkszövegből a környező kontextusával együtt (a bekezdés, listaelem, táblázatcella vagy címsor, amelyben elhelyezkedik).

A 2.4.9 Link célja (csak a link) AAA szinten tovább megy, megkövetelve a link céljának meghatározhatóságát önmagában a linkszövegből, a kontextusra való hagyatkozás nélkül. Erre törekedni jó ötlet, még akkor is, ha csak az AA-megfelelést célozza meg.

A 2.5.3 Címke a névben (A szint) megköveteli, hogy amikor egy linknek vagy gombnak látható szövegcímkéje van, az akadálymentes név ezzel a szöveggel kezdődjön. Egy „Tudjon meg többet az akadálymentességről” feliratú ikongomb, amelynek aria-label értéke „Kattintson ide”, megbukik ezen a kritériumon.

Gyakori hibák és mit tegyünk helyettük

„Kattintson ide” és „Tovább”

Ezek a legelterjedtebb linkakadálymentességi hibák a weben.

<!-- Megbukik: nincs jelentése kontextuson kívül -->
<a href="/blog/wcag-compliance">Tovább</a>

<!-- Megfelel: önmagát leíró -->
<a href="/blog/wcag-compliance">Olvassa el a WCAG 2.2 megfelelőségi útmutatónkat</a>

A javítás szinte mindig egyszerű: cserélje a homályos kifejezést olyan szövegre, amely leírja a célt vagy a műveletet.

Általános „ide” linkek

A „Kattintson ide a jelentés letöltéséhez” ugyanezen okból bukik meg — maga a linkelt szó csak az „ide”.

<!-- Megbukik -->
<p>A teljes eredményekért kattintson <a href="/report.pdf">ide</a>.</p>

<!-- Megfelel: a linkszöveg leírja, mi van linkelve -->
<p>Töltse le a <a href="/report.pdf">2025-ös akadálymentességi auditjelentést (PDF)</a>.</p>

Vegye észre a PDF-jelzést zárójelben — ez jó gyakorlat, hogy tájékoztassa a felhasználókat arról, hogy a link követése egy PDF-et fog megnyitni, nem egy weboldalt.

Ugyanarra a célra mutató linkek eltérő szöveggel, vagy eltérő célok azonos szöveggel

Mindkettő zavart okoz. Ha öt navigációs link mind azt mondja: „Tudjon meg többet”, de különböző szolgáltatásoldalakra mutat, a felhasználók nem tudják megjósolni, hová jutnak. Fordítva, két különböző link, amely azt mondja: „WCAG-megfelelőségi útmutató”, de különböző oldalakra vezet, ugyanolyan zavaró.

Csak ikonból álló linkek és gombok

Egy olyan linknek vagy gombnak, amely csak ikont tartalmaz — látható szöveg nélkül —, akadálymentes névvel kell rendelkeznie, amelyet aria-label vagy aria-labelledby biztosít. Enélkül a képernyőolvasók az ikonkép fájlnevét jelentik be, vagy egyáltalán semmit.

<!-- Megbukik: „link, grafika"-ként vagy az SVG fájlnevekent jelentik be -->
<a href="/social/twitter">
  <svg><!-- twitter ikon --></svg>
</a>

<!-- Megfelel: az aria-label biztosítja az akadálymentes nevet -->
<a href="/social/twitter" aria-label="QualiBooth a Twitteren">
  <svg aria-hidden="true"><!-- twitter ikon --></svg>
</a>

Az SVG-n lévő aria-hidden="true" megakadályozza, hogy a képernyőolvasók bejelentsék az SVG címét vagy tartalmát — mivel magának a linknek már van címkéje, az ikon tartalma redundáns.

Az aria-label használata a látható szöveg kiegészítésére

Amikor egy oldalon több „Letöltés” link van, és nem tudja megváltoztatni a látható szöveget (tervezési korlát), az aria-label kiterjesztheti az akadálymentes nevet:

<!-- A látható szöveg „Letöltés", de az akadálymentes név a teljes karakterlánc -->
<a href="/report-2025.pdf" aria-label="A 2025-ös akadálymentességi jelentés PDF letöltése">
  Letöltés
</a>

Itt egy figyelmeztetés: a WCAG 2.5.3 megköveteli, hogy az akadálymentes név a látható szöveggel kezdődjön. Az „A 2025-ös akadálymentességi jelentés PDF letöltése” a „Letöltés” szóval kezdődik — jó. A „2025-ös akadálymentességi jelentés — PDF letöltése” nem — rossz.

Új lapon megnyíló linkek

Egy új lap figyelmeztetés nélküli megnyitása dezorientálja a felhasználókat, különösen a kognitív fogyatékossággal élőket vagy a képernyőolvasót használókat, akik esetleg nem veszik észre, mi történt. Jelezze az új lapon való megnyílás viselkedését a linkszövegben vagy egy vizuálisan rejtett megjegyzéssel.

<!-- Vizuálisan és a segítő technológia számára is jelzi az új lap viselkedést -->
<a href="https://example.com" target="_blank">
  Példajelentés megtekintése
  <span class="sr-only">(új lapon nyílik meg)</span>
</a>

Amikor a linkszöveg úgy működik, hogy nem egyértelmű

A kontextus jogosan biztosíthatja a hiányzó jelentést a WCAG 2.4.4 alatt. Egy „Letöltés” link elfogadható, ha egy olyan táblázatcellában helyezkedik el, amelynek oszlopfejléce azt mondja: „Éves jelentés”, sorfejléce pedig: „2025”. A kontextus egyértelművé teszi a célt.

Ez különbözik egy önálló bekezdés végén lévő „Tovább” linktől. A bekezdés kontextust biztosít, de a „Tovább” még mindig megbukik, mert a linkszöveg bármely bekezdésre alkalmazható lenne — nem azonosítja egyértelműen a célt.

Képlinkek

Amikor a link tartalma inkább kép, mint szöveg, a kép alt attribútuma válik a link akadálymentes nevévé. Az alt szövegnek a link célját kell leírnia, nem magát a képet.

<!-- Az alt a link célját írja le, nem a kép megjelenését -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Akadálymentességi auditszolgáltatások">
</a>

Ha a kép pusztán díszítő jellegű, és ugyanabban a linkben látható szöveg kíséri, a képnek alt="" értékkel kell rendelkeznie, hogy elkerülje ugyanazon szöveg kétszeri bejelentését.

Egy gyors audit, amelyet önmaga is elvégezhet

Nyissa meg oldalát, és hívja elő a linkek listáját a képernyőolvasójával (vagy telepítse az ingyenes HeadingsMap vagy WAVE böngészőbővítményt, hogy lássa a kontextusból kiemelt linkeket). Olvassa végig a listát. Ha nem tudja megmondani, hová vezet minden link pusztán a szövegből, akkor javításra szorul.

A leggyakoribb javítás egy <span class="sr-only"> (vizuálisan rejtett, képernyőolvasók számára hozzáférhető) hozzáadása további kontextussal, vagy egyszerűen a linkszöveg teljes átírása. Az átírás mindig előnyben részesített — gyakran mindenki számára javítja a használhatóságot, nem csak a képernyőolvasót használók számára.

Webhelye linkjeinek és más WCAG-kritériumok alapos felülvizsgálatához kézi akadálymentességi auditjaink lefedik a link célját egy szélesebb körű felülvizsgálat részeként, olyan tesztelők által, akik nap mint nap segítő technológiát használnak.