A kisegítő lehetőségek megtervezése
Az akadálymentesség viszonylag nagy témakör. Nem fedhetjük le teljesen egyetlen Learn-modulban. Vannak azonban olyan alapvető alapelvek, amelyeket minden létrehozott lapon implementálni szeretne. Az akadálymentes lap megtervezése mindig egyszerűbb, mint egy meglévő lapra visszatérni, hogy akadálymentessé tegye azt.
A HTML használata a tervezéshez
A HTML számos olyan elemet biztosít, amellyel lapokat hozhat létre, például gombokat, hivatkozásokat és űrlapvezérlőket. Mindegyik elem beépített funkciókkal rendelkezik, például kattintható, összekapcsolható vagy fókuszba helyezhető.
Megjegyzés:
A fókusz egy webfejlesztési kifejezés, amely azt jelenti, hogy a vezérlők képesek fogadni a billentyűzetről érkező bemeneteket. Egy gomb képes elfogadni a fókuszt, így a szóköz kiválasztásával aktiválhatja vagy "rákattinthatja" azt.
A CSS és a JavaScript használatával bármilyen elem bármilyen típusú vezérlőhöz hasonlóan néz ki. Például <span> létrehozhat egy <button> elemet, és <b> válhat belőle <a>. Bár ez a funkció néhány billentyűparancsot biztosít a lap formázásához vagy elrendezéséhez, eltávolítja a beépített funkciókat. Az olyan eszközök, mint a képernyőolvasó, nem fogják tudni megérteni, hogy <span> a rendszer ezt használja.<a> Ha valaki billentyűzettel böngész, nem tudja az elemek szimulálására <button> programozott elemekre <div> összpontosítani.
Egy másik HTML-elem, amelyet gyakran kihagynak, a fejlécek (<h1> át <h6>). Vizuális szempontból a fejléccímkék a legnagyobbtól a legkisebb szövegméretig kezdődnek. Ez a konvenció sok fejlesztőt arra késztet, hogy lemondjon a fejlécelemekről, és ehelyett stilizálja <div> vagy más általános elemeket.
Sajnos a stilizált általános elemek nem szerkezeti, hanem csak vizuális információkat közvetítenek. A képernyőolvasók felhasználói erősen támaszkodnak a címsorokra , hogy információkat találjanak, és böngészhessenek egy oldalon. A leíró címsortartalom írása és a szemantikai címsorcímkék használata fontos ahhoz, hogy könnyen navigálható webhelyet hozzon létre a képernyőolvasók felhasználói számára.
Ajánlott eljárásként mindig a megfelelő HTML-t kell használnia, amikor vezérlőket hoz létre egy oldalon. Ha hivatkozásra van szüksége, használja <a>vagy használja <button> a gombot.
Jó vizuális jelek használata
A fejlesztők gyakran úgy gondolják, hogy a képernyőolvasók az egyetlen akadálymentességi eszköz. Előfordulhat azonban, hogy a felhasználók számos más eszközt is használnak, vagy egyáltalán nem használnak eszközöket. A böngészőt használó felhasználók bizonyos vizuális jelekre támaszkodnak az oldallal való interakció megértéséhez.
A CSS egyik nagyszerű funkciója, hogy teljes körű vezérlést biztosít a lapok megjelenítéséhez, beleértve bizonyos megjelenítési elemek eltávolítását is. Eltávolíthatja például a körvonalat egy szövegdobozból, vagy eltávolíthatja az aláhúzást egy hivatkozásból. Sajnos az ilyen típusú jelek eltávolítása megnehezítheti, hogy valaki, aki attól függ, hogy felismerje a vezérlő típusát.
Fontolja meg a billentyűzetet
Egyes felhasználók nem használhatnak egeret vagy trackpadet/érintőpárnát. Ehelyett ezek a felhasználók a billentyűzettel történő interakciókra támaszkodnak, hogy az egyik elemről a másikra lépjenek. Fontos, hogy a lapok logikai sorrendben jeleníthessék meg a tartalmat, hogy a billentyűzetfelhasználók az egyes interaktív elemeket lemozdulva érhessék el.
Amikor egy felhasználó lapozással lép végig egy lapon, a fókusz az egyik vezérlőről a következőre kerül a HTML-forrásban szereplő vezérlőelemek sorrendjének megfelelően. A lap vezérlőinek a HTML-forrásban kell szerepelnie abban a sorrendben, amelyben a lap böngészni fog, miközben a CSS-sel vizuálisan el szeretné helyezni a lapot a felhasználók számára.
Tegyük fel például, hogy két oszlopból hoz létre űrlapot. Érdemes megfontolni, hogy mi a természetes folyamat, ha valaki kitölti az űrlapot, majd felsorolja a vezérlőket ebben a sorrendben. Ezután a CSS használatával létrehozhatja az oszlopokat, és megjelenítheti a vezérlőket a megfelelő helyeken.
A billentyűzet-navigáció erősen támaszkodik a szemantikai HTML-ra. Egyes vezérlők (például gombok) elfogadják a fókuszt, míg div az elemek nem. Ha olyan vezérlőket hoz létre újra, amelyek már léteznek a HTML-ben, megnehezíti, hogy valaki billentyűzettel használja a lapot.
Fontos
A billentyűzet-navigációt manuálisan kell tesztelni, és minden létrehozott oldalon meg kell tennie. A WebAIM további információkat tartalmaz a billentyűzet navigációs stratégiáiról.