Hozzáférhetőség (Accessibility) HTML-ben

A hozzáférhetőség (angolul: accessibility vagy röviden a11y) biztosítja, hogy weboldalad mindenki számára használható legyen – látássérültek, mozgáskorlátozottak és más felhasználók számára is.

Miért fontos a hozzáférhetőség?

Nem minden felhasználó használja a webet azonos módon. Vannak, akik képernyőolvasót, billentyűzetet vagy alternatív bemeneti eszközöket használnak. Egy hozzáférhető weboldal mindenki számára jobb élményt nyújt.

Alt attribútum képeknél

A <img> elemekhez mindig adj meg alt attribútumot, amely leírja a kép tartalmát. Ez segít a képernyőolvasót használó felhasználóknak megérteni, mit ábrázol a kép.

Űrlapmezők és címkék

Űrlapelemekhez mindig társítsunk <label> elemet, amely azonosítóval (for/id) kapcsolódik az inputhoz. Ez lehetővé teszi, hogy a képernyőolvasók helyesen társítsák a mezőt a feliratával.

Billentyűzet-navigáció támogatása

Nem minden felhasználó használ egeret. A <tabindex> attribútum segítségével biztosíthatjuk, hogy az elemek elérhetőek legyenek a billentyűzettel is (például a Tab gombbal).

ARIA attribútumok használata

Az ARIA (Accessible Rich Internet Applications) attribútumok segítenek az olyan összetettebb UI-elemek leírásában, amelyeket a HTML natívan nem támogat (pl. <aria-label> egy gombnál).

Hasznos tanácsok

Néhány egyszerű szabály betartásával jelentősen javíthatod oldalad hozzáférhetőségét. Ezek nem csak a fogyatékkal élők számára fontosak, hanem mindenki számára kényelmesebbé teszik a használatot.

• <alt> – Kép tartalmának szöveges leírása
• <label> – Kapcsolat az űrlapmezők és azok címkéi között
• tabindex – Billentyűzettel is elérhetővé tesz egy elemet
• aria-label – További információt ad a képernyőolvasók számára
• contrast – Olvasható színkontraszt a szöveg és a háttér között