A hivatkozások és képek akadálymentességének biztosítása

  • 4 perc

A weblapok két leggyakoribb összetevője a hivatkozások és a képek. Ezek az elemek jelentős hatással vannak az akadálymentességre. A megfelelő hivatkozásszöveg és helyettesítő szöveg biztosítása az első lépések egyike, amellyel az összes felhasználó számára fejlesztheti a lapokat.

Hivatkozás szövege

A hivatkozások a webes böngészés alapvető elemét képezik. Annak biztosítása, hogy a képernyőolvasó megfelelően tudja olvasni a hivatkozásokat, lehetővé teszi, hogy minden felhasználó végigböngészhesse a webhelyét.

Vegye figyelembe a következő példaszöveg két hivatkozását:

Megjegyzés:

A két példa bemutatja, hogy mit ne használjon webfejlesztőként.

Bár ezek a hivatkozások jól tűnhetnek egy teljes látókörű személy számára, nem fognak működni, ahogy egy képernyőolvasóval elvárhatja. Ne feledje, hogy a képernyőolvasók felolvassák a szöveget. Ha megjelenik egy URL-cím a szövegben, a képernyőolvasó felolvassa az URL-címet. Általánosságban elmondható, hogy az URL-cím nem közvetít értelmes információkat, és bosszantónak tűnhet. Előfordulhat, hogy ezt a problémát tapasztalta, ha a telefonja valaha is hangosan olvas egy URL-címmel ellátott szöveges üzenetet.

A képernyőolvasók azt is képesek olvasni, hogy csak a hivatkozások egy oldalon, sokkal ugyanúgy, mint egy látássértő személy lenne szkennel egy oldalt a hivatkozások. Ha a hivatkozás szövege mindig "kattintson ide", minden felhasználó a következőt fogja hallani: "kattintson ide, kattintson ide, kattintson ide, kattintson ide, kattintson ide, kattintson ide, ..." Most már minden hivatkozás megkülönböztethetetlen egymástól, ami bosszantó élmény.

A "kattintás" szó is probléma, mert nem minden felhasználó kattint. Telefon felhasználók koppintanak, a billentyűzet felhasználói kiválaszthatják az Enter billentyűt vagy a szóközt, más ügyfelek pedig más eszközöket fognak használni.

Mindig értelmes hivatkozásszöveget kell használnunk. A jó hivatkozás szövege röviden leírja, hogy mi található a hivatkozás másik oldalán. A korábbi példában a kis pingvinekről szóló hivatkozás a Faj Wikipedia oldalára mutat. A kis pingvinek kifejezés tökéletes hivatkozásszöveg lenne, mert egyértelművé teszi, hogy valaki mit fog megtudni, ha kiválasztja a hivatkozást:

  • "A kis pingvin, más néven a tündér pingvin, a legkisebb pingvin a világon."

Megjegyzés:

Bónuszként annak biztosítása érdekében, hogy a webhely mindenki számára elérhető legyen, segít a keresőmotoroknak a webhelyen való böngészésben. A keresőmotorok hivatkozásszöveget használnak a lapok témaköreinek megismeréséhez. Tehát a jó hivatkozásszöveg használata mindenkinek segít!

ARIA-attribútumok

Képzelje el a következő termékoldalt:

Termék Leírás Sorrend
Vezérlő [Description]('#') [Order]('#')
Szuper widget [Description]('#') [Order]('#')

Ez egy olyan lap általános elrendezése, amely a táblázat különböző elemeivel kapcsolatos információkat jeleníti meg, a leírásra és a sorrendre mutató hivatkozásokkal. A leírás és a sorrend szövegének duplikálása logikus lehet egy böngészőt használó személy számára. A képernyőolvasót használó személy azonban csak a leírást és a sorrendet hallja kontextus nélkül.

Az ilyen típusú forgatókönyvek támogatásához a HTML támogatja az Akadálymentes gazdag internetes alkalmazások (ARIA) néven ismert attribútumokat. Ezekkel az attribútumokkal további információkat biztosíthat a képernyőolvasók számára.

Használhatja például egy hivatkozás leírására, aria-label ha a lap formátuma nem teszi lehetővé. A widget leírása a következő lehet:

<a href="#" aria-label="Widget description">description</a>

Az ARIA számos felhasználási módja van azon túl, hogy szöveget ad hozzá a képernyőolvasóknak a hivatkozások olvasásához. Segítségével leírhatja azokat a szerepköröket, amelyeket bizonyos elemek játszanak, ha a szemantikus HTML nem érhető el. Ha például fát hoz létre, az ARIA-szerepkörök segítségével leírhatja a képernyőolvasó felületét:

<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>

Fontos

A korábban ismertetett szemantikai korrektúra és jó hivatkozási szöveg használata általában felülírja az ARIA használatát. Nem a böngészők és a képernyőolvasók az egyetlen ügyfelek, amelyeket egy felhasználó használhat, és a lap megtervezése minden ügyfél és felhasználó számára jól működik.

Helyettesítő szöveg képekhez

Általános szabályként a képernyőolvasók nem tudják beolvasni a kép tartalmát. Bár egyesek mesterséges intelligenciát is használhatnak, előfordulhat, hogy a létrehozott eredmények nem feltétlenül pontosak. Szerencsére a képek akadálymentességének biztosítása nem sok munkát vesz igénybe – erről szól az alt attribútum. Minden értelmes képnek rendelkeznie kell egy alt attribútummal (más néven helyettesítő szöveg), amely leírja, hogy mik vagy milyen információkat próbálnak közvetíteni.

A tisztán dekoratív képeknek üres sztringre kell állítaniuk az attribútumukat alt : alt="". Ez a beállítás megakadályozza, hogy a képernyőolvasók szükségtelenül bejelentsék a dekoratív képet.

Megjegyzés:

Ahogy várható volt, a keresőmotorok nem tudják megérteni, hogy mi van a képen. Helyettesítő szövegre támaszkodnak. Tehát még egyszer, biztosítva, hogy az oldal elérhető legyen, bónuszokat biztosít!