Tervezői útmutató a webes hozzáférhetőség alapjainak alapjaihoz

A webnek olyan helynek kell lennie, ahol mindenki hozzáférhet ugyanazon tartalomhoz a világ bármely pontjáról. Az érzékeny technikák hosszú utat tettek eszköz-agnosztikus tervek. De mi a helyzet hozzáférhetőség-agnosztikus tervek?

A webes hozzáférhetőség már évek óta létezik, de megvalósítása új fejlesztéseket igényel a technológia és a webfejlesztés terén. Sok fejlesztő szeretne segíteni, de nehéz megérteni, hogyan kell kialakítani a hozzáférhetőséget, mert sok mozgó alkatrész van. Ez magában foglalja a nagy kontrasztú szöveget, a vakok, az optimalizált médiához tartozó hangoldalakat és a nem JS / CSS-böngészőkhöz kapcsolódó hibákat.

Ebben a bejegyzésben lefedem a hozzáférhetőség megtervezésének alapjait, hogy mi az, milyen célokat kíván megoldani, és milyen lépéseket tehet az indításhoz. Ne feledje, hogy ez egy rendkívül részletes téma, és hónapokig vagy évekig tart, hogy teljesen megértsék. De az előnyök megéri az erőfeszítést, és minden webes projektje minden látogatót tartós benyomást kelt a hozzáférhető tartalomról.

Intro To Accessibility

Általánosságban elmondható, hogy a hozzáférhetőség az épület tartalmának ötlete, hogy bárki elfogyaszthatja. Ez magában foglalhatja a vakokat, akik nem tudnak olvasni, és magában foglalhatja a fogyatékkal élő embereket is, akik nem tudnak egérrel vagy billentyűzettel működni (vagy akár).

De ez magában foglalhatja az embereket is enyhe hiányosságok a látásban. Ez magában foglalhatja az embereket is diszlexia vagy olvasási felfogás kérdése. Tény, hogy az ötlet “webes hozzáférhetőség” magába foglalja minden lehetséges értékvesztés, amely befolyásolhatja, hogy valaki hogyan kapcsolódik egymáshoz vagy fogyaszt egy webhelyet.

Talán még ennél is fontosabb, hogy a webes hozzáférhetőség a Wikipédia definíciójában leírtak szerint lehetséges:

Mégis Anne Gibson a listán kívül állítja, hogy a Wikipedia definíciója túl homályos, és nem éppen a fogyatékkal élőkről. Ez tényleg az mindenki az interneten a világ minden tájáról lehet, hogy nem rendelkezik optimális hozzáféréssel az internethez.

Sok devi azt hiszi, hogy a hozzáférhetőség csak a vakok számára szól, akik nem tudnak olvasni. De valójában négy elsődleges kategóriája van a webes hozzáférhetőségnek:

1. Vizuális - gyenge látás vagy rossz / nincs látás
2. auditoros - hallássérült vagy süket
3. megismerő - bonyolult az információ megértése vagy fogyasztása
4. Motor - fizikai akadálymentesítési problémák, amelyek speciális beviteli eszközöket, például billentyűzetet vagy hangvezérlő programot igényelhetnek

Ezek a kategóriák mindegyike kiterjedt technikákkal rendelkezik ugyanolyan gyorsan változik, mint a webes szabványok. Azonban a WCAG-ban ratifikált szabványokkal kapcsolatos stabilitási érzés van (Web Content Accessibility Guidelines).

Néhány weboldal, mint például a kormányzati intézményeknek törvényi előírásoknak kell megfelelniük ezeknek az irányelveknek. Nemzetközi szinten érvényesülnek a W3C-n keresztül.

Vessünk egy pillantást a webes hozzáférhetőség mögötti bürokráciára, majd merüljünk be néhány alkalmazható tervezési tippre.

A W3C és hozzáférhető kialakítás

Nagyon kevés a webes hozzáférhetőséghez kapcsolódó rövidítések. Ezek bonyolultak lehetnek, ha újdonságok vagyunk a témában, de egyszer egyszer egyszerűsítettem, remélem, több értelme lesz.

• W3C (World Wide Web Consortium) - Egy nemzetközi csoport, amely meghatározza a protokollok, nyelvek és szabályok webes szabványait. Minden hivatalos hozzáférhetőségi irányelv e szervezet alá tartozik.
• WAI (Webes akadálymentesítési kezdeményezés) - Egy hivatalos program, amely mindenre kiterjed a hozzáférhetőségről. Ez az átfogó kifejezés magában foglalja a modern hozzáférhetőség valamennyi szabályát, irányelveit és technikáját.
• WCAG (Webtartalom hozzáférhetőségi irányelvek) - Szabványok és szabályok csoportja, amelyek segítik a tervezőket, hogy a hozzáférhetőség szintje alapján rangsorolják webhelyeiket.
• ÁRIA (Hozzáférhető gazdag internetes alkalmazások) - Egy speciális szabvány, amely meghatározza, hogy hogyan lehet olyan hozzáférhető, gazdag alkalmazásokat építeni, amelyek a JavaScript / Ajax és hasonló technológiákra támaszkodnak. Olvasson többet erről ebben a hozzászólásban Anna Monus.

Más iránymutatások léteznek a WAI esernyő alatt, beleértve a UAAG felhasználói ügynökök számára és ATAG webes szerzői eszközök számára. Mostantól a leginkább érdeklődni kell a WAI által tett javaslatokkal és a WAI szabályzatának WCAG néven ismertetett irányelveivel..

A W3C fogyatékkal élők számára ez a posta egy nagyszerű erőforrás ahhoz, hogy többet megtanuljon, és megosztja történeteit arról, hogy a fogyatékkal élők hogyan férnek hozzá az internethez. Nehéz lehet megérteni az összes bonyolult problémát, nem is beszélve arról, hogyan lehet megoldani őket. De a legjobb forrás az emberek, akik naponta szembesülnek ezzel a problémával.

Egy másik fontos téma, amit meg kell érteni, a WCAG megfelelősége. Ez a következőkhöz kapcsolódik a weboldal elérhetőségének szintje számos tényezőt lefed. A szintek a megfelelőségen alapulnak A, AA és AAA minősítési rendszer. Ezt ellenőrizheti egy webes hozzáférhetőség-ellenőrző eszközzel. A legjobb pontszám az AAA.

Ha többet szeretne megtudni ezekről az irányelvekről, olvassa el a W3C bemutatóját a WCAG 2.0 megértéséről. Tekintse meg ezeket a kapcsolódó linkeket a további részletekért:

• WCAG 2.0 Egyszerűsített
• A WCAG teljesítményének 508. szakasza

Lépések a hozzáférhető kialakításhoz

Javasoljuk, hogy látogasson el az A11Y projekt honlapjára a gyakorlati hozzáférhetőségi tippekre. Az A11Y (amely szintén egy számnév) egy ingyenes nyílt forráskódú projekt, amely a GitHub-on található, a hozzáférhető webes tervezési technikákat.

Böngészhetjük a hozzáférhetőségi elemek ellenőrzőlistáját, vagy akár egy csomó tervezési mintát az olyan elemekhez, mint a legördülő listák, lapok, harmonikák, gombok és modális ablakok (többek között).

Nehéz ezt a dolgot megtanulni és egyszerre végrehajtani. Lépjen be lépésről lépésre, és hajlandó többet kutatni, ha összezavarod.

Nézze meg az A11Y útmutatót és gyors tippeket az indításhoz. Ön konkrét javaslatokba ütközik, mint például az ugrás a tartalomra linkek és a nagy kontrasztú színsémák. Ezeknek a technikáknak mindegyikük saját részletességgel rendelkezik, így a végrehajtás elsősorban a tesztelésről szól, hogy megnézze, mi működik.

Fontolja meg a vak felhasználókat, akik automatizált tartalomolvasót használhatnak. Előfordulhat, hogy van egy audio fordítója, vagy akár egy speciális billentyűzet, amellyel inkább az egérrel navigálhat a weben. Ez az oka megfelelő szemantikus HTML (tekintse meg ezt a cikket) olyan fontos, mint a tulajdonságok Tabindex és accesskey.

Ha azt szeretné, hogy merüljön be, akkor fontolja meg egy akadálymentesítési témát. Tanulmányozhatja az architektúrát és testreszabhatja a tervezést, hogy megfeleljen a projektnek.

Elérhetőség tesztelési eszközök

Ha el szeretné kezdeni, válassza ki a hozzáférhetőséget, és próbálja ki. Ezután használhatja a tesztelési eszközöket a siker szintjének mérésére.

Érdemes megemlíteni, hogy ez a folyamat frusztráló lehet. Olyan sok szempontot kell megfontolni, és a WCAG iránymutatásai annyira nehezen érthetőek, hogy az információ túlterheléssel járhat.

A lényeg az, hogy csak mozogjunk. Válasszon egyet a hozzáférhetőség területéről, és tegye a hangsúlyt. Ezután használja ezeket az eszközöket, hogy segítsen csípni és javítani a munkáját.

Például próbálkozhat a WCAG kontrasztjellemzőivel javítható az olvashatóság. Miután kiválasztotta a színeit, csak használja ezt a szabad kontrasztarány-ellenőrzőt, hogy megnézze, működnek-e együtt.

Sajnos a WCAG 2.0 irányelvei olyan zavaróak, hogy nehézségekbe ütközhet a követelmények megértése. De minél többet próbálsz, annál többet fogsz tanulni, és annál többet fogsz megérteni.

Olyan webhely teszteléséhez, amely már online van, nézd meg a WAVE-t. Ez egy ingyenes vizuális ellenőrző amely megjeleníti a webhely hibáit, figyelmeztetéseit, kontrasztjait és egyéb sajátosságait. Megjelenik egy vizuális nézet és a problémák listája az oldalsávban.

Van egy másik ingyenes alkalmazás a Cynthia Says weboldalán is Ellenőrizze a WCAG A, AA, AAA sikerek értékelésére szolgáló webhelyeket, és 508 sz.

És ha nyílt forráskódúvá válik, nézd meg ezeket ingyenes hozzáférhetőség tesztelési eszközök a GitHub-on.

• HTML CodeSniffer
• Automatizált akadálymentesítési tesztelési eszköz
• WCAG Validator

Böngésző-kiegészítők

A böngésző bővítményei valószínűleg a leggyorsabb és legegyszerűbb módszereket biztosítják a hozzáférhetőség teszteléséhez. Bármelyik számítógépen bármelyik webhelyen futtathatja ezeket, hogy valóban hasznos eredményeket kapjon.

Az AInspector for Firefox-nak a hozzáférhetőség szempontjából kötelezőnek kell lennie. Ez ellenőrzi mindent, és sokkal alaposabb, mint a WAVE tesztelő.

A Mozilla felhasználók tetszeni fognak a WCAG kontraszt-ellenőrzővel is, amely szintén ingyenes kiegészítő.

A Chrome-felhasználók nem rendelkeznek az AInspector-szal, de rendelkeznek a Google által hivatalosan létrehozott Accessibility Developer eszközökkel. Ez további eszközöket ad az ellenőrző ablakhoz a hozzáférhetőségi irányelvek ellenőrzéséhez.

A Chrome felhasználók számára a fény kontrasztja a szín kontrasztot és néhány más ingyenes kiterjesztést is tartalmaz.

Sajnos nem találtam sokat a Safari felhasználók számára, de találtam egy bővítményt az Opera számára, amely ellenőrizték a WCAG 2.0 megfelelőségét. Ha hajlandó eléggé keresni a Google-t, akkor további eszközöket találhat ott.

További irodalom

Ha komolyan gondolod, hogy a webes hozzáférhetőség megismerése, akkor készülj fel egy hosszú útra. Nem könnyű, de nagyon elégedett.

Mostanra jobban meg kell értenie a webes hozzáférhetőség tényleges meghatározását, miért létezik, és kisebb részleteket arról, hogy a fejlesztők miként javíthatják webhelyeiket. A következő lépés a további kutatás és gyakorlat, hogy ezeket az elveket a munkafolyamatba beépítsük.

További információkért nézze meg az alábbi bejegyzéseket, és győződjön meg róla, hogy a WCAG iránymutatásait közvetlenül a forrásból kívánja megnézni.

• A HTML táblázathoz való hozzáférhetőség javítása a jelölővel
• Hozzáférhető kialakítás a fogyatékkal élő felhasználók számára
• 6 tipp a weboldal elérhetőségének javításához
• Győződjön meg róla, hogy a webhely hozzáférhető a látássérülteknek