15 KiB
Hozzáférhető weboldalak létrehozása
Sketchnote készítette: Tomomi Imura
Előadás előtti kvíz
Az internet ereje az egyetemességében rejlik. Az akadálymentes hozzáférés mindenki számára, a fogyatékosságtól függetlenül, alapvető fontosságú.
- Sir Timothy Berners-Lee, a W3C igazgatója és a világháló feltalálója
Ez az idézet tökéletesen rávilágít arra, hogy miért fontos akadálymentes weboldalakat készíteni. Egy alkalmazás, amely nem érhető el mindenki számára, definíció szerint kirekesztő. Webfejlesztőként mindig szem előtt kell tartanunk az akadálymentességet. Ha már a kezdetektől erre összpontosítunk, jó úton járunk afelé, hogy mindenki számára elérhetővé tegyük az általunk készített oldalakat. Ebben a leckében megismerheted azokat az eszközöket, amelyek segítenek az akadálymentesség biztosításában, és megtanulhatod, hogyan építsd be ezt a szemléletet a munkádba.
Ezt a leckét elérheted a Microsoft Learn oldalán!
Használható eszközök
Képernyőolvasók
Az egyik legismertebb akadálymentességi eszköz a képernyőolvasó.
A képernyőolvasók olyan kliensek, amelyeket leggyakrabban látássérültek használnak. Ahogyan időt szánunk arra, hogy a böngésző megfelelően közvetítse az általunk megosztani kívánt információkat, úgy arra is figyelnünk kell, hogy a képernyőolvasó is helyesen tegye ezt.
A legegyszerűbb formájában a képernyőolvasó felülről lefelé, hallhatóan olvassa fel az oldalt. Ha az oldal csak szövegből áll, az olvasó hasonló módon közvetíti az információkat, mint egy böngésző. Természetesen a weboldalak ritkán állnak csupán szövegből; tartalmazhatnak linkeket, grafikákat, színeket és más vizuális elemeket. Gondoskodni kell arról, hogy ezeket az információkat a képernyőolvasó helyesen olvassa fel.
Minden webfejlesztőnek érdemes megismerkednie egy képernyőolvasóval. Ahogyan ismered a böngészők működését, úgy a képernyőolvasók működését is meg kell tanulnod. Szerencsére a legtöbb operációs rendszerbe beépítve található képernyőolvasó.
Néhány böngészőben beépített eszközök és bővítmények is találhatók, amelyek képesek szöveget felolvasni, vagy alapvető navigációs funkciókat biztosítani, például ezek az Edge böngésző akadálymentességi eszközei. Ezek szintén fontos akadálymentességi eszközök, de működésük jelentősen eltér a képernyőolvasóktól, és nem szabad őket képernyőolvasó-tesztelő eszközökkel összetéveszteni.
✅ Próbálj ki egy képernyőolvasót és egy böngésző szövegfelolvasót. Windows rendszeren a Narrátor alapértelmezetten elérhető, de telepíthető a JAWS és az NVDA is. macOS-en és iOS-en a VoiceOver alapértelmezetten elérhető.
Nagyítás
A látássérültek által gyakran használt másik eszköz a nagyítás. A legegyszerűbb típus a statikus nagyítás, amelyet a Control + plusz jel (+) billentyűkombinációval vagy a képernyőfelbontás csökkentésével lehet vezérelni. Ez a nagyítás az egész oldalt átméretezi, ezért fontos a reszponzív dizájn alkalmazása, hogy a felhasználói élmény nagyított nézetben is megfelelő legyen.
Egy másik típusú nagyítás speciális szoftvereket használ, amelyek a képernyő egy adott területét nagyítják fel, és pásztáznak, hasonlóan egy valódi nagyítóhoz. Windows rendszeren a Nagyító beépített eszköz, míg a ZoomText egy harmadik féltől származó nagyítószoftver, amely több funkcióval és nagyobb felhasználói bázissal rendelkezik. macOS-en és iOS-en a beépített nagyítószoftver neve Zoom.
Kontrasztellenőrzők
A weboldalak színeit gondosan kell megválasztani, hogy megfeleljenek a színtévesztők vagy a gyenge kontrasztú színeket nehezen látók igényeinek.
✅ Tesztelj egy általad kedvelt weboldalt a színek használatára egy böngészőbővítménnyel, például a WCAG színellenőrzőjével. Mit tanultál?
Lighthouse
A böngésződ fejlesztői eszközei között megtalálod a Lighthouse eszközt. Ez az eszköz fontos, hogy első ránézésre felmérd egy weboldal akadálymentességét (és más elemzéseket is végez). Bár nem szabad kizárólag a Lighthouse-ra hagyatkozni, egy 100%-os eredmény jó kiindulópont.
✅ Keresd meg a Lighthouse-t a böngésződ fejlesztői eszközei között, és futtass elemzést bármelyik weboldalon. Mit fedeztél fel?
Akadálymentes tervezés
Az akadálymentesség viszonylag nagy téma. Segítségképpen számos forrás áll rendelkezésre.
Bár nem tudunk minden aspektust lefedni az akadálymentes oldalak létrehozásával kapcsolatban, az alábbiakban néhány alapvető elvet ismertetünk, amelyeket érdemes megvalósítani. Egy akadálymentes oldal megtervezése a kezdetektől mindig könnyebb, mint egy meglévő oldal utólagos akadálymentesítése.
Jó megjelenítési elvek
Színhelyes paletták
Az emberek különböző módon látják a világot, beleértve a színeket is. Amikor színsémát választasz az oldaladhoz, győződj meg róla, hogy az mindenki számára hozzáférhető. Egy nagyszerű eszköz színpaletták generálásához a Color Safe.
✅ Azonosíts egy weboldalt, amely nagyon problémás a színek használatában. Miért?
Használj megfelelő HTML-t
A CSS és a JavaScript segítségével bármelyik elem bármilyen vezérlőelemmé alakítható. Egy <span> lehet egy <button>, és egy <b> válhat hiperhivatkozássá. Bár ez egyszerűbbé teheti a stílusozást, semmit sem közvetít a képernyőolvasók számára. Használj megfelelő HTML-t, amikor vezérlőelemeket hozol létre egy oldalon. Ha hiperhivatkozást szeretnél, használj <a> elemet. A megfelelő HTML használata a megfelelő vezérlőhöz a szemantikus HTML alkalmazásának nevezik.
✅ Látogass el bármelyik weboldalra, és nézd meg, hogy a tervezők és fejlesztők megfelelően használják-e a HTML-t. Találsz olyan gombot, amelynek linknek kellene lennie? Tipp: kattints jobb gombbal, és válaszd a 'Forrás megtekintése' lehetőséget a böngésződben, hogy megnézd az alapul szolgáló kódot.
Készíts leíró címsorhierarchiát
A képernyőolvasó felhasználók nagyban támaszkodnak a címsorokra, hogy információkat találjanak és navigáljanak egy oldalon. A leíró címsortartalom írása és a szemantikus címsorcímkék használata fontos az egyszerűen navigálható oldalak létrehozásához a képernyőolvasó felhasználók számára.
Használj jó vizuális jeleket
A CSS teljes irányítást biztosít az oldal bármely elemének megjelenése felett. Létrehozhatsz szövegdobozokat körvonal nélkül, vagy hiperhivatkozásokat aláhúzás nélkül. Sajnos ezeknek a jeleknek az eltávolítása megnehezítheti azok felismerését azok számára, akik ezekre támaszkodnak.
A link szövegének fontossága
A hiperhivatkozások alapvető fontosságúak az interneten való navigációhoz. Ezért biztosítani kell, hogy a képernyőolvasók megfelelően olvassák fel a linkeket, hogy minden felhasználó navigálhasson az oldaladon.
Képernyőolvasók és linkek
Ahogy várható, a képernyőolvasók ugyanúgy olvassák a link szövegét, mint az oldal bármely más szövegét. Ezt szem előtt tartva az alábbi példák elfogadhatónak tűnhetnek.
A kis pingvin, más néven tündérpingvin, a világ legkisebb pingvinje. Kattints ide további információkért.
A kis pingvin, más néven tündérpingvin, a világ legkisebb pingvinje. Látogasd meg a https://en.wikipedia.org/wiki/Little_penguin oldalt további információkért.
MEGJEGYZÉS Ahogy hamarosan olvasni fogod, soha ne hozz létre linkeket, amelyek úgy néznek ki, mint a fenti példák.
Ne feledd, hogy a képernyőolvasók más interfészek, mint a böngészők, és más funkciókkal rendelkeznek.
A probléma az URL használatával
A képernyőolvasók felolvassák a szöveget. Ha egy URL megjelenik a szövegben, a képernyőolvasó felolvassa az URL-t. Általában az URL nem közvetít értelmes információt, és zavaró lehet. Talán már tapasztaltad ezt, ha a telefonod valaha hangosan felolvasott egy URL-t tartalmazó szöveges üzenetet.
A probléma a "kattints ide" használatával
A képernyőolvasók képesek csak a hiperhivatkozásokat felolvasni egy oldalon, hasonlóan ahhoz, ahogy egy látó ember átfutja az oldalt linkek után kutatva. Ha a link szövege mindig "kattints ide", a felhasználó csak annyit hall, hogy "kattints ide, kattints ide, kattints ide, kattints ide, kattints ide, ...". Az összes link megkülönböztethetetlenné válik egymástól.
Jó link szöveg
A jó link szöveg röviden leírja, hogy mi található a link másik oldalán. Az előző példában, amely a kis pingvinekről szól, a link a faj Wikipedia-oldalára mutat. A kis pingvinek kifejezés tökéletes link szöveg lenne, mivel egyértelművé teszi, hogy mit tudhat meg valaki, ha rákattint a linkre - a kis pingvinekről.
A kis pingvin, más néven tündérpingvin, a világ legkisebb pingvinje.
✅ Böngéssz az interneten néhány percig, hogy találj oldalakat, amelyek homályos linkelési stratégiákat használnak. Hasonlítsd össze őket más, jobban linkelt oldalakkal. Mit tanultál?
Keresőmotorok megjegyzései
Az akadálymentesség biztosításával nemcsak a felhasználóknak segítesz, hanem a keresőmotoroknak is, hogy könnyebben navigáljanak az oldaladon. A keresőmotorok a link szövegét használják az oldalak témáinak megértéséhez. Tehát a jó link szöveg mindenki számára előnyös!
ARIA
Képzeld el a következő oldalt:
| Termék | Leírás | Rendelés |
|---|---|---|
| Widget | Leírás | Rendelés |
| Szuper widget | Leírás | Rendelés |
Ebben a példában a leírás és rendelés szöveg ismétlése érthető egy böngészőt használó számára. Azonban egy képernyőolvasót használó személy csak a leírás és rendelés szavakat hallaná ismétlődve, kontextus nélkül.
Az ilyen helyzetek támogatására a HTML támogat egy attribútumkészletet, amelyet Accessible Rich Internet Applications (ARIA) néven ismerünk. Ezek az attribútumok lehetővé teszik, hogy további információkat adj meg a képernyőolvasók számára.
MEGJEGYZÉS: Mint sok más HTML-funkció esetében, a böngésző- és képernyőolvasó-támogatás változhat. Azonban a legtöbb főbb kliens támogatja az ARIA attribútumokat.
Az aria-label segítségével leírhatod a linket, ha az oldal formátuma nem teszi lehetővé. A widget leírása például így állítható be:
<a href="#" aria-label="Widget description">description</a>
✅ Általánosságban elmondható, hogy a fent leírt szemantikus jelölés használata előnyt élvez az ARIA használatával szemben, de néha nincs szemantikus megfelelője bizonyos HTML-widgeteknek. Jó példa erre egy fa (tree). Nincs HTML-egyenérték egy fához, ezért az ilyen elemeket egy általános <div>-ként azonosítod a megfelelő szerepkörrel és ARIA-értékekkel. Az MDN ARIA dokumentációja további hasznos információkat tartalmaz.
<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>
Képek
Magától értetődik, hogy a képernyőolvasók nem tudják automatikusan elolvasni, mi van egy képen. A képek akadálymentessé tétele nem igényel sok munkát - erre való az alt attribútum. Minden jelentőséggel bíró képnek rendelkeznie kell egy alt attribútummal, amely leírja, hogy mi van rajta.
A pusztán dekoratív képek alt attribútumát üres karakterláncra kell állítani: alt="". Ez megakadályozza, hogy a képernyőolvasók feleslegesen bejelentsék a dekoratív képet.
✅ Ahogy várható, a keresőmotorok sem képesek megérteni, mi van Számos kormány rendelkezik törvényekkel az akadálymentességi követelményekről. Tájékozódj saját országod akadálymentességi törvényeiről. Mi tartozik ezek hatálya alá, és mi nem? Például ez a kormányzati weboldal.
Feladat
Elemezz egy nem akadálymentesített weboldalt
Köszönet: Turtle Ipsum az Instrumenttől
Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás Co-op Translator segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy téves értelmezésekért.