2.4.4 - Link célja (kontextuson belül)

Kategória: 2. Működtethető (Operable) Irányelv: 2.4. Navigálható Szint: A

Röviden a szabványpontról

A WCAG 2.4.4 (Link Purpose) előírja, hogy minden link célja megállapítható legyen magából a link szövegéből, vagy a link szövegéből együtt annak programozottan meghatározott kontextusával. Ez minden webes tartalomra vonatkozik, amely linkeket tartalmaz, legyenek azok szöveges linkek, kép linkek vagy más UI komponensekbe ágyazott linkek.

Mire vonatkozik: Minden webes tartalomra, amely linkeket tartalmaz, beleértve a szöveg linkeket, kép linkeket és egyéb felületi komponensekbe ágyazott linkeket.

Cél: Biztosítani, hogy a felhasználók, különösen:

Kognitív fogyatékossággal élők
Képernyőolvasót használók
Megérthessék, mi fog történni a link aktiválásakor
Hatékonyan navigálhassanak zavar és extra erőfeszítés nélkül

Kiket érint

Elsődleges felhasználók: Képernyőolvasó felhasználók, akik gyakran a linkek listáján keresztül navigálnak és a link szövegre támaszkodnak a döntés meghozatalához. Kognitív fogyatékossággal élő felhasználók, akik számára előnyös a tiszta, leíró link szöveg. Csak billentyűzetet használó felhasználók, akik gyorsan átfutják a linkeket a navigációhoz.

Másodlagos előnyök: Minden felhasználó jobb navigációs élményt kap a leíró linkekkel. Javítja a SEO-t és az általános tartalom tisztaságát.

Tesztelés

Link szöveg egyedül: Vizsgáld meg minden link látható szövegét, hogy egyértelműen leírja-e a link célját további kontextus nélkül
Kontextuális egyértelműség: Ha a link szöveg kétértelmű (pl. „Kattints ide”), ellenőrizd a környező tartalmat vagy programmatic kontextust (ARIA attribútumok, link csoportosítás)
Képernyőolvasó teszt: Használj képernyőolvasót (NVDA, VoiceOver, JAWS) a linkek közötti navigáláshoz és ellenőrizd, hogy a link szöveg és kontextus együtt egyértelmű célt ad-e
Automatizált eszközök: Használd az axe DevTools-t az általános vagy kétértelmű szövegű linkek felderítésére
Billentyűzetes navigáció: Navigálj a linkek között billentyűzettel és győződj meg róla, hogy a link szöveg érthető a környező tartalomból kiragadva is

Jó gyakorlatok

1. Leíró link szöveg

<!-- Jó: A link szöveg egyértelműen leírja a célt -->
<a href="/eves-jelentes-2023.pdf">2023. évi jelentés letöltése (PDF)</a>

<!-- Jó: Konkrét művelet leírása -->
<a href="/regisztracio">Regisztrálj ingyenes fiókért</a>

<!-- Jó: Termék specifikus információ -->
<a href="/laptop-hp-pavilion-15">HP Pavilion 15 laptop részletei</a>

<!-- Jó: Kontakt információ -->
<a href="mailto:info@cegem.hu">E-mail küldése: info@cegem.hu</a>

<!-- Jó: Külső linkek jelzése -->
<a href="https://w3.org/WAI" target="_blank" rel="noopener">
  W3C Web Accessibility Initiative (új ablakban nyílik)
</a>

A felhasználó pontosan tudja, mi fog történni a link aktiválásakor. A link szöveg önmagában érthető és informatív.

2. ARIA címkék használata kontextushoz

<!-- A link szöveg "További info" de az aria-label kontextust ad -->
<article>
  <h3>SuperWidget termék</h3>
  <p>Innovatív megoldás a modern irodákhoz...</p>
  <a href="/termek-reszletek/superwidget" aria-label="További információ a SuperWidget termékről">
    További információ
  </a>
</article>

<!-- Termék kártyák esetén -->
<div class="termek-kartya">
  <h4>iPhone 15 Pro</h4>
  <p>Ár: 449.990 Ft</p>
  <a href="/iphone-15-pro" aria-label="iPhone 15 Pro vásárlása 449.990 Ft-ért">
    Kosárba
  </a>
</div>

<!-- Cikk lista esetén -->
<article>
  <h3>Webes akadálymentesség alapjai</h3>
  <p>Útmutató kezdőknek a WCAG szabványok megértéséhez...</p>
  <a href="/cikk/webes-akadalymentesseg-alapjai" 
     aria-label="Webes akadálymentesség alapjai cikk teljes szövege">
    Tovább olvasom
  </a>
</article>

A látható link szöveg rövid, de az aria-label biztosítja a szükséges kontextust a képernyőolvasó felhasználók számára.

3. Kétértelmű kifejezések elkerülése

<!-- Jó: Kerüld az általános kifejezéseket, mint "Kattints ide" -->
<p>A visszatérítési szabályzat részleteiért <a href="/visszaterites-szabalyzat">olvassa el visszatérítési szabályzatunkat</a>.</p>

<!-- Jó: Konkrét műveletek leírása -->
<p>Hibát találtál? <a href="/hibajelentes">Jelents hibát</a> vagy <a href="/kapcsolat">vedd fel velünk a kapcsolatot</a>.</p>

<!-- Jó: Dokumentum típusok megjelölése -->
<div class="dokumentumok">
  <h3>Letölthető dokumentumok</h3>
  <ul>
    <li><a href="/aszf.pdf">Általános Szerződési Feltételek (PDF, 2MB)</a></li>
    <li><a href="/adatvedelmi-tajekoztato.pdf">Adatvédelmi tájékoztató (PDF, 1.5MB)</a></li>
    <li><a href="/arlista.xlsx">Árlistá (Excel, 500KB)</a></li>
  </ul>
</div>

<!-- Jó: Navigációs linkek -->
<nav aria-label="Breadcrumb navigáció">
  <ol>
    <li><a href="/">Kezdőlap</a></li>
    <li><a href="/termekek">Termékek</a></li>
    <li><a href="/termekek/laptopok">Laptopok</a></li>
    <li aria-current="page">HP Pavilion 15</li>
  </ol>
</nav>

A link szöveg önmagában értelmes és leírja a link célját. A felhasználók rögtön tudják, mire számíthatnak.

4. Kontextuális csoportosítás

<!-- Könyv fejezetek listája -->
<section>
  <h2>Webfejlesztés tankönyv</h2>
  <ul>
    <li><a href="/1-fejezet">1. fejezet: Bevezetés a HTML-be</a></li>
    <li><a href="/2-fejezet">2. fejezet: CSS alapok</a></li>
    <li><a href="/3-fejezet">3. fejezet: JavaScript kezdőknek</a></li>
    <li><a href="/4-fejezet">4. fejezet: Akadálymentesség</a></li>
  </ul>
</section>

<!-- Szolgáltatások listája -->
<section>
  <h2>Szolgáltatásaink</h2>
  <div class="szolgaltatas-grid">
    <div class="szolgaltatas-kartya">
      <h3>Weboldal készítés</h3>
      <p>Reszponzív weboldalak készítése modern technológiákkal</p>
      <a href="/szolgaltatasok/weboldal-keszites">Weboldal készítés részletei</a>
    </div>
    <div class="szolgaltatas-kartya">
      <h3>SEO optimalizálás</h3>
      <p>Keresőoptimalizálás a jobb találhatóságért</p>
      <a href="/szolgaltatasok/seo-optimalizalas">SEO szolgáltatás részletei</a>
    </div>
    <div class="szolgaltatas-kartya">
      <h3>Karbantartás</h3>
      <p>Folyamatos technikai támogatás és frissítések</p>
      <a href="/szolgaltatasok/karbantartas">Karbantartási szolgáltatás részletei</a>
    </div>
  </div>
</section>

<!-- Hírek/Blog bejegyzések -->
<section>
  <h2>Legfrissebb hírek</h2>
  <article>
    <h3>Új WCAG 2.2 szabvány megjelent</h3>
    <p>2023 októberében jelent meg a WCAG 2.2 szabvány új kritériumokkal...</p>
    <a href="/hirek/wcag-2-2-szabvany-megjelent">WCAG 2.2 szabvány hírek teljes szövege</a>
  </article>
  <article>
    <h3>Akadálymentesség a gyakorlatban</h3>
    <p>Gyakorlati tippek a webes akadálymentesség megvalósításához...</p>
    <a href="/hirek/akadalymentesseg-gyakorlatban">Akadálymentesség gyakorlati útmutató teljes szövege</a>
  </article>
</section>

Még ha a link szöveg rövidebb is, a csoportosítás és struktúra biztosítja a kontextust. A címek és bekezdések együtt egyértelművé teszik a linkek célját.

Rossz gyakorlatok

Általános link szöveg kontextus nélkül

<!-- Rossz: "Kattints ide" nem ad információt -->
<p>További információért <a href="/info">kattints ide</a>.</p>

<!-- Rossz: "Itt" sem informatív -->
<p>A teljes árlistát <a href="/arlista">itt</a> találod.</p>

<!-- Rossz: "Tovább" önmagában értelmetlen -->
<p>Regisztrációs folyamat: <a href="/reg-step2">Tovább</a></p>

Probléma: A felhasználók nem tudják megállapítani a link célját a környező szöveg olvasása nélkül, ami problémás a képernyőolvasó felhasználók számára, akik gyakran csak a linkek között navigálnak.

Ismétlődő kétértelmű linkek

<!-- Rossz: Több "Tovább olvasom" link kontextus nélkül -->
<ul>
  <li>1. cikk összefoglalója <a href="/cikk1">Tovább olvasom</a></li>
  <li>2. cikk összefoglalója <a href="/cikk2">Tovább olvasom</a></li>
  <li>3. cikk összefoglalója <a href="/cikk3">Tovább olvasom</a></li>
</ul>

<!-- Rossz: Ismétlődő "Részletek" linkek -->
<div class="termek-lista">
  <div>Laptop <a href="/laptop">Részletek</a></div>
  <div>Egér <a href="/eger">Részletek</a></div>
  <div>Billentyűzet <a href="/billentyuzet">Részletek</a></div>
</div>

Probléma: A linkek listájában navigálva a felhasználók nem tudják megkülönböztetni a különböző „Tovább olvasom” vagy „Részletek” linkeket.

Kép linkek alternatív szöveg nélkül

<!-- Rossz: Kép link hiányzó alt szöveggel -->
<a href="/kezdolap"><img src="home-icon.png"></a>

<!-- Rossz: Üres alt szöveg informatív képnél -->
<a href="/termek/laptop"><img src="laptop.jpg" alt=""></a>

<!-- Rossz: Kép + szöveg link rossz alt szöveggel -->
<a href="/kapcsolat">
  <img src="phone-icon.png" alt="Telefon ikon">
  Kapcsolat
</a>

Probléma: A képernyőolvasó felhasználók nem tudják a link célját, ha a kép nem rendelkezik megfelelő leíró alternatív szöveggel.

URL-ek linkként használva

<!-- Rossz: Nyers URL-ek linkként -->
<p>Látogass el ide: <a href="https://example.com/very-long-url-path/products/category/subcategory/item">https://example.com/very-long-url-path/products/category/subcategory/item</a></p>

<!-- Rossz: E-mail cím kontextus nélkül -->
<p>Írj nekünk: <a href="mailto:contact@company.com">contact@company.com</a></p>

Probléma: A hosszú URL-ek nehezen érthetők és nem informatívak. A felhasználók nem tudják, mire számíthatnak.

Link szöveg és cél eltérése

<!-- Rossz: A link szöveg nem egyezik a céllal -->
<a href="/regisztracio">Bejelentkezés</a>

<!-- Rossz: Félrevezető link szöveg -->
<a href="/arlista.pdf">Weboldal megtekintése</a>

<!-- Rossz: Nem egyértelmű művelet -->
<a href="javascript:deleteAccount()">Fiók beállítások</a>

Probléma: A link szöveg nem egyezik a tényleges céllal vagy művelettekkel, ami zavart okoz és megtöri a felhasználók bizalmát.

Források

Amennyiben szeretnél első kézből értesülni az új bejegyzésekről, iratkozz fel hírlevelünkre!