Digitális akadálymentesség

Befejeződött

Számos fogalmat, szintaxist és elemet kell figyelembe vennie, hogy a weblapokat akadálymentessé tegye minden képességű személy számára. Ez az egység áttekintést nyújt az alapvető témákról. Az akadálymentes webhelyek készítésének részleteiről az ajánlott forrásokból tájékozódhat.

HTML5 és ARIA

A HTML5 a Hypertext Markup Language (HTML) legújabb verziója. A webes szabványokat fejlesztő nemzetközi közösség, a World Wide Web Consortium (W3C) javasolja. Minden szándék és cél érdekében a HTML5 a web jelenlegi szabványa, és a webhely alapvető szerkezetének összeállításához kell használni. Ha akadálymentes webhelyeket szeretne létrehozni, a HTML5 szintaxisát és címkéit kell elsajátítania.

Az akadálymentes rich internetalkalmazások (ARIA) olyan műszaki specifikációk, amelyek a HTML5-kel együtt használhatók a weblapok és alkalmazások akadálymentesebbé tételéhez. Az ARIA nem része a HTML5-nek, de attribútumai html5-elemekkel is használhatók bizonyos esetekben.

További információ az ARIA HTML-ben való használatáról.

Címsorok és tájékozódási pontok

Kapcsolatok, aki nem látja a weblapok vizuális jelzéseit, a cím- és címsorelemekre támaszkodva értelmezi a lap felépítését. A HTML5 több szakaszoló elemből áll, amelyek egyértelműen képesek kommunikálni egy oldal szerkezetével: <fejléc>, <navigációs>, <fő> és <élőláb>. Ha megfelelően használják, ezek a HTML5-elemek segítenek a képernyőolvasót használó felhasználóknak a weblapok közötti navigálásban.

Az akadálymentesség maximalizálása érdekében azonban a LEGJOBB, ha ARIA-szerepkörökkel használja a HTML5-elemeket. Az ARIA-szerepkörök a következők: role="banner", role="navigation", role="main", and role="contentinfo." Ezek az ARIA-szerepkörök egy olyan tájékozódási struktúrát hoznak létre, amely lehetővé teszi, hogy a képernyőolvasókat használó felhasználók gyorsan és egyszerűen navigáljanak a weblap kívánt részére. Például ahelyett, hogy várnia kellene, amíg a képernyőolvasó egyenként elbeszéli az egyes elemeket, egy személy azonnal átugorhat egy adott tájékozódási pontra a weblapon.

További információ: W3C ARIA Landmarks Example.

Lapstruktúra

A webhelyeknek programozott címet vagy a címsorok megfelelő formázását is tartalmazniuk kell. Azok a weblapok, amelyek nem rendelkeznek címmel, vagy nem megfelelően használják a címsorelemeket, megnehezítik a képernyőolvasót használó felhasználók számára, hogy tudják, hol találhatók egy adott oldalon.

A következő problémák elkerülése érdekében:

  • Győződjön meg arról, hogy a weblapok a címelem> használatával <informatív és kontextusnak megfelelő lapcímet adnak meg.
  • Győződjön meg arról, hogy a programozott címsorok mindig használhatók, és megfelelően vannak beágyazva – például egy h3> elem csak akkor kövesse <a h1> elemet, ha <van közöttük h2><elem.  
  • Ne használjon címsorelemeket csak stilisztikai okokból.

Szín

Mint minden digitális tartalom esetén, a szín használata is alapvető szempont a weblapok létrehozásakor. Győződjön meg arról, hogy nem a szín az egyetlen vizuális eszköz az információk továbbítására, a művelet jelzésére, a válasz megadására vagy a vizuális elemek megkülönböztetésére. Ha csak színt használ, előfordulhat, hogy a vakok vagy a színvakok nem tudják megmondani, hogy mely mezőkre van szükség, mely elemek vannak kiválasztva, és így tovább. Győződjön meg arról, hogy a szöveg és a képek színkontrasztaránya legalább 4,5 és 1 között van. Számos színkontraszt-elemző érhető el online ingyen. Használhatja például a Színkontraszt-elemzőt az Akadálymentességi Elemzések a Windowsban az akadálymentes kontrasztarányok biztosításához.

 Az útmutató néhány kivétele a következő:

  • Nagyméretű szöveg: A nagyméretű szöveg (18 pontos normál vagy 14 pontos félkövér) és a nagyméretű szöveg képeinek kontrasztaránya 3:1 lehet.
  • Incidensek: Az inaktív felhasználói felület (UI) összetevő részét képező szöveghez vagy képhez nincs környezeti követelmény. Vagy olyan szöveg vagy kép esetében, amely tiszta díszítésű, nem látható senkinek, vagy olyan kép része, amely más jelentős vizuális tartalmat tartalmaz.
  • Emblémák: Az embléma vagy márkanév részét képező szövegnek nincs minimális kontrasztkövetelménye.

People viewing large text on a computer screen.

Nagy képernyős szöveg akadálymentességi célokra

Adattáblák

Az adattáblák bizonyos kisegítő technológiákkal (AT) kapcsolatos alkalmazások, például képernyőolvasók számára nehézkesek lehetnek. Ha az adattáblákat a lehető legnagyobb mértékben elérhetővé szeretné tenni, amikor táblákat használ a webhelyén, mindenképpen végezze el a következő lépéseket:

  • Használjon natív HTML-táblázatelemeket (table, thead, tbody, tr, thés td).
  • A táblafejlécek megfelelő azonosítása (használja az th elemet).
  • Összetett táblák (több fejlécsor) esetén győződjön meg arról, hogy a fejlécek a megfelelő adatokhoz vannak társítva.
  • A hatókörattribútummal megállapíthatja, hogy a cella egy sor, oszlop vagy sor vagy oszlopcsoport fejléce-e (a sor, oszlop, sorcsoport vagy oszlopcsoport értékeinek használatával).
  • Adjon hozzá egy attribútumot id minden olyan cellához, amelyet más cellák fejléceként használnak, majd hivatkozzon a megfelelő id értékre az headers egyes adatcellák egyik attribútumával.

Data table and its corresponding native HTML table elements.

Ha ezek a lépések nem történnek meg, a kisegítő technológiát használó felhasználóknak nehézséget okozhat a webhely adattábláinak megértése.

Űrlap időtúllépése és visszajelzése

Ha a hibaüzenetek nem egyértelműen azonosíthatók, előfordulhat, hogy a kisegítő technológiát használó személyek nem tudják pontosan kitölteni az űrlapokat egy webhelyen. Az időzított válaszok megakadályozhatják, hogy a kisegítő technológiát használó személyek kitölthessenek egy űrlapot, vagy webalkalmazást használhassanak.

Az ellenőrzés után egyértelműen jelezheti a hibaüzeneteket a következő módon:

  • Következetes módszer használata a hibaüzenetek rámutatására.
  • A hibás mező(ek) azonosítása.
  • Hibamezők azonosítása az űrlap elején.
  • Hibamezők azonosítása az egyes mezők címkéjében.

Lehetőség szerint alternatív bemenetekre vonatkozó javaslatokat kell megadni. Ez a megközelítés azonban nem szükséges, ha ez legyőzné az űrlap célját. Ha például az űrlap egy teszt része, lehetséges, hogy egy alternatív bemenetre vonatkozó javaslat egy olyan kérdésre ad választ vagy választ, amely nem feltétlenül megfelelő.

A jogi vagy pénzügyi tranzakciók esetében hibamegelőzést kell biztosítani. Az egyik lehetőség az, hogy a végső beküldés előtt a felhasználók áttekinthetik a bemeneteiket.

Kapcsolatok képernyőolvasót használó felhasználók a weblap hivatkozásainak megtekintésével navigálhatnak a weblapon.

Ha egy weblapon több hivatkozás neve azonos, de különböző URL-címekre mutat, az emberek összezavarodhatnak. Győződjön meg arról, hogy a hivatkozásnevek jelentéssel bírnak, egyediek és leíróak, akár kontextusban, akár nem.

Kerülje a kontextuson kívül megjelenő általános, nem leíró hivatkozásneveket, például a "További erőforrások" listában. A képernyőolvasót használó személy nem rendelkezik semmilyen kontextussal vagy megértéssel arról, hogy mi a hivatkozás, vagy hogy miért van ott. Ezek a példák egy általános, elérhetetlen hivatkozásneveket tartalmazó listát és egy akadálymentes, leíró hivatkozásneveket tartalmazó listát mutatnak be.

Akadálymentes hivatkozások– példa:

Web page with a series of three descriptive link names.

Leíró hivatkozásnevek sorozata

Nem elérhető hivatkozások– példa:

Web page with a series of three generic, non-descriptive link names

Általános, nem leíró hivatkozásnevek sorozata

Képek

Kapcsolatok vakok nem láthatják a képeket, és webhelyfejlesztőkre és tartalomkészítőkre támaszkodva írják le őket.

Kapcsolatok gyengén látók számára nehézséget okozhat a szöveg képének olvasása, mert nagyítva képpontos. Egyéb nehézségek akkor fordulnak elő, ha a kontraszt nem elég erős, vagy a kép túl kicsi.

Adjon meg rövid, konkrét és informatív helyettesítő szöveget képekhez, például fényképekhez és gombokhoz.  

Nem érhető el példa képre:

<img src="MSFTlogo.jpg" alt="logo" />

Akadálymentes kép– példa:

<img src="MSFTlogo.jpg" alt="Microsoft logo" />

Bár a elérhetetlen példa emblémáként írja le a képet, nem adja meg az embléma típusát, így nem hasznos azoknak, akik helyettesítő szövegre támaszkodnak. Az akadálymentes példában szereplő minősítő hozzáadásával a felhasználó pontosan tudja, hogy mi az embléma.

Egy másik nem szöveges elem, amelyet figyelembe kell venni, a dekoratív képek. Ha például egy weblap stilizált szegélyt tartalmaz, nem kell részletesen leírnia a helyettesítő szövegben. Egy üres alt attribútum hozzáadásával jelezheti, hogy dekoratív a kódban.

Example of nontext elements requiring and not requiring descriptive alternative text attributes.

Példa képre és díszítő szegélyre

Elérhetetlen példa:

<img src="border.gif" />

Akadálymentes példa:

<img src="border.gif" alt="" />

Az akadálymentes példa nem tartalmaz szöveget. Azonban az a tény, hogy az attribútum szerepel, alt de nem jelenít meg szöveget, azt jelzi, hogy egy képernyőolvasót használó személy számára a kép dekoratív, és nem tartalmaz kritikus információkat.

Az akadálymentesség javításával kapcsolatos további információkért tekintse meg a W3C nem érhető el kezdőlapját a bemutató előtt és után.