Akadálymentes weblapok, alapok

css html Web
Viktor

Az akadálymentes weboldalak készítése nem csupán kedvesség, hanem alapvető szakmai követelmény, hogy a fogyatékkal élő felhasználók (például látássérültek, akik képernyőolvasót használnak) is teljes értékű élményt kapjanak. A WCAG (Web Content Accessibility Guidelines) a W3C által kiadott irányelvek gyűjteménye, amelyek célja, hogy a webes tartalmak mindenki számára hozzáférhetők legyenek,

Az irányelvek négy alapelvre épülnek (POUR):

  • Érzékelhető (Perceivable): a tartalom többféleképpen is felfogható (pl. képekhez alternatív szöveg).
  • Működtethető (Operable): az oldal használható legyen billentyűzettel is.
  • Érthető (Understandable): az információ és a működés legyen világos és kiszámítható.
  • Robusztus (Robust): a tartalom jól működjön különböző eszközökön és segítő technológiákkal.

Bővebben elérhető például a W3Schools oldalán.

Szemantikus HTML használata

Mindig azt az elemet használd, amit a szabvány ajánl. Arra használjuk a html tageket, amikre valók!
pl. gomb – <button> és nem sima div. Navigációnál <nav>, fejléc, fő tartalom, lábléc, lista stb.

  • Az oldal nyelve legyen beállítva. <html lang=”hu”>
  • Címsorok helyes használata: <h1> -ből csak 1db legyen, ami ténylegesen a főcím. A további fejezeteket/tartalmi részeket értelemszerűen H2, H3,H4… címsorokkal lássuk el!
  • Képeknél: alt attributum használata
  • Listák használata ténylegesen a listákhoz, nem sima div, vagy p
  • Űrlapok akadálymentesítése: minden beviteli mezőhöz tartozzon <label>
  • WAI-ARIA (Accessible Rich Internet Applications)

Fontosabb ARIA attributumok

role

Megmondja a segítő technológiáknak, mi az elem szerepe.

Gyakori példák:

  • role="button"
  • role="navigation"
  • role="dialog"
  • role="alert"

aria-label

Láthatatlan, de felolvasott címke.

<button aria-label="Bezárás">✖</button>

Hasznos:

  • ikon gomboknál
  • amikor nincs szöveg a jelemben

aria-labelledby

Egy létező elem szövegét használja címkeként.

Egy létező elem szövegét használja címkeként.

<h2 id="cim">Bejelentkezés</h2>
<form aria-labelledby="cim">

aria-describedby

Kiegészítő magyarázatot ad egy elemhez.

<input id="email" aria-describedby="help">
<p id="help">Az e-mail címed nem osztjuk meg.</p>

aria-hidden

Elrejti az elemet a képernyőolvasók elől.

<span aria-hidden="true">★</span>
Használat:
  • díszítő ikonok
  • duplikált tartalom

2. Alapvető HTML5 Attribútumok

Sokszor a legegyszerűbb megoldások a leghatékonyabbak. Ne felejtsd el ezeket:

AttribútumHol használjuk?Miért fontos?
alt<img>Ha a kép nem tölt be, vagy a felhasználó nem látja, a képernyőolvasó ezt olvassa fel.
lang<html>Meghatározza az oldal nyelvét, így a felolvasó szoftver a helyes kiejtést használja.
titleBármely elemTovábbi kiegészítő információt nyújt, bár érdemes óvatosan használni, mert nem minden eszköz kezeli jól.
tabindexInteraktív elemekSzabályozza a fókusz sorrendjét a „Tab” billentyű használatakor. A tabindex="0" bevonja az elemet a sorba, a -1 kiveszi.

3. Formok és Inputok akadálymentesítése

A űrlapok kitöltése kritikus pont. Itt két fő megoldás létezik:

  • for (a <label> elemen): Összeköti a címkét az input id-jával. Ezáltal a címkére kattintva is aktiválódik a beviteli mező.
  • required: Jelzi a szoftvernek (és a felhasználónak), hogy a mező kitöltése kötelező.
  • aria-invalid: Ha hiba van a kitöltésben, ezzel jelezhetjük a szoftvernek, hogy javításra van szükség.

Néhány példa

EuroSkills2017-es feladatsor, A-modul, html+css, melyben egy fiktív cég bemutatkozó weboldalát kell elkészíteni.

skip-link használata: Az oldal elején lévő „Skip to content” link alapvető a billentyűzetről navigálók számára, hogy átugorhassák a menüt. TAB billentyűvel próbáld ki!

Szemantikus HTML5 és ARIA szerepkörök: main, header, footer, section… role=”banner”, role=”contentinfo”. Segítenek a képernyőolvasóknak a gyors tájékozódásban.

Navigációs címkék: nav-aria label=”primary” és a nav aria-label=”footer” A fenti menü az elsődleges menü, a footerben pedig van egy másodlagos. Így a látássérült felhasználó tudja, melyik menüben jár éppen.

aria-current=”page”: Ez az attribútum jelzi, hogy éppen melyik menüponton állunk (Home), ami elengedhetetlen az interaktív élményhez.

Dekoratív elemek elrejtése: A 🤖 emoji az aria-hidden=”true” attribútumot kapta, így a felolvasó nem fogja feleslegesen bemondani, hogy „robot arc”, csak a mellette lévő szöveget.

Kép leírása: Az alt szöveg leíró jellegű, és a figcaption osztálya (sr-only) biztosítja, hogy csak a képernyőolvasók lássák a kiegészítő információt.

aria-labelledby: A szekció címének összekötése (features-title) segít a felhasználónak megérteni az adott blokk kontextusát.