Akadálymentesítés és az egyetemes tervezés (Accessibility and the universal design)

Átírás

1 Akadálymentesítés és az egyetemes tervezés (Accessibility and the universal design)

2 Akadályozottak lehetnek Egy honlap vagy számítógépes program használata nemcsak egy mozgássérült, vak vagy siket embernek jelenthet gondot, hanem például annak is, aki csak éppen ismerkedik a technológiával, aki nem rendelkezik a legmodernebb hardver felszereléssel, esetleg mobiltelefonját használja böngészésre, vagy aki csak egyszerűen fáradt és nem tud annyira koncentrálni.

3 Akadálymentesíteni kívánt csoportok I. Fogyatékos személyek 1. Vak felhasználók 2. Gyengénlátó emberek 3. Színtévesztő és színvak felhasználók 4. Hallássérült emberek 5. Mozgáskorlátozott felhasználók 6. Értelmi fogyatékos emberek II. Technológiailag megkülönböztetett felhasználók 1. Átlagostól eltérő képernyőméret 2. Elavult böngésző 3. Gyenge hardver III. Speciális célcsoportok Gyerekek Idős emberek Alacsony képességű felhasználók Idegen nyelvek és kultúrák képviselői Anyanyelvi olvasó helyesírás

4 Amire igazán figyelni kell vak gyengénlátó színtévesztő hétköznapi helyzetek: Képi információk esetén legyen megadva szöveges alternatíva, vagy bő leírás Videó esetén legyen megadva szöveges leírás [leírva mi látható a videófilmben] Minden fontos információ szövegesen is elérhető (felolvasó programok) legyen Jelentésjelölő tag-ek használata Beszédes, egyedi elnevezésű linkek Táblázat címe, összegző leírás, fejrészek megjelölés, felolvasási sor, bő leírás TAB billentyűvel való végighaladás biztosítása Állítható betűméretek, Jó minőségű, nagyméretű képek, látható ikonok, látható linkek Csak szín ne hordozzon másképp nem elérhető információtartalmat Kellően kontrasztos színösszeállítás/képek Állítható háttérszín/betűszín Erős napsütés, gyenge átviteli sebesség, monokróm eszköz használata. Fáradt szem, fájó szem. Nem színhű kijelző használata.

5 Amire igazán figyelni kell Csak hang ne hordozzon jelzés értékű információt Videó esetén legyen videófeliratozás Videó esetén teljes leírás [mi hallható, ki beszél, mit mond] On-line rádiók/tv-k: szöveges formában is közölni kell az információkat (Jelnyelv) Egyszerű, rövid tagmondatok használata. A hang tiszta legyen, és ha van háttérzene, az legyen kikapcsolható Nagy legyen a hangzásbeli kontraszt a tartalom és a háttérhangok között hétköznapi helyzetek: Hangszóróval nem rendelkező szg. Olyan munkahely, ahol többen is dolgoznak egy szobában. Hangos helyszínek: étterem, műhely, tömegközlekedés, szórakozóhely.

6 Amire igazán figyelni kell Ne használjunk nagyon pici ikonokat. Ne használjunk pici méretű képeket linkekként, legyenek nagyobb méretűek a kattintható felületek. Ne kényszerüljön a felhasználó bravúrosan almenüpontokat választani. Az almenün úgy kell végigvezetni az egeret, hogy ne hagyjuk el a világoskék sávot, mert ha elhagyjuk az almenüsor eltűnik! Sok gépelés elkerülése => bejelentkezési adatok megőrzése. TAB billentyűvel való végighaladás az oldalon. hétköznapi helyzetek: Kéztörés, ínhüvelygyulladás. A fáradtság a pozicionálást és a helyes ütemben való duplaklikkelést nehezíti.

7 Az internetes böngészőprogramok kisegítő szolgáltatásai Különböző mértékben támogatják a böngészők a weblapokhoz történő egyenlő esélyű hozzáférést. Az alábbiak általában mindegyikben beállíthatóak Alapértelmezett betűtípusok megadása 1 - Alapértelmezett betűméretek megadása - Az oldalak alapértelmezett háttérszínének a megadása - Az oldalak alapértelmezett szövegszínének a megadása - Az hivatkozások alapértelmezett színének megadása - Betűméret nagyítása/kicsinyítése Az olvashatóság javítható elsősorban, gyengén látóknak segít, a szem fáradékonyságán segít! Színtévesztő és színvak felhasználók számára segít elsősorban! 4 - Egyéni stíluslapok megadása (Stíluslapok kikapcsolása) 1: Többnyire beállítható az is, hogy változó szélességű karaktereket használjon vagy azonos méretűeket. 2: Explorer 6: csak akkor van erre mód, ha a css-ben relatív módon lettek a betűméretek definiálva.

8 3 A betűméretek abszolút és relatív megadásának módjai Megoldás az újabb böngészőkben: CTRL+, CTRL- és CTRL0 A honlap készítőjének az alap betűmérethez Képest kell megadnia a szövegek méretét, pl. százalékos értékkel, vagy a fent mutatott Szavak használatával.

9 Akadálymentesítés a kód szintjén

10 Akadálymentes a kód szintjén 2. A képekhez alternatív szövegek írása és hosszú leírás alk. <img src= kapu.jpg alt= Kapu /> <img src= graf.jpg alt= Grafikon longdesc= graf.txt /> <img src= graf.jpg alt= Grafikon longdesc= graf.html /> A képtérképet tartalmazó oldal esetén az <area> tag-hez alt attribútum megadása. Címsorok megfelelő alkalmazása <h1> <h2> <h6> tagek használata, sorrend betartása, <h1>-gyel való kezdés Kiemelések jelentésjelöléssel <b> </b> helyett <strong> </strong> <i> </i> helyett <em> </em> <u> </u> - t nem használunk, hisz ez a linknek van fenntartva

11 1. Szabványosság ellenőrzése W3C Validátorok: HTML Validátor CSS Validátor Firefox böngésző validátorbővítményei: HTML Validátor LinkChecker (hivatkozások ellenőrzésére) Firefox-ba WAVE kiterjesztés Colour Contrast Analyzer HTML5 validálására szolgáló weboldal: validator.nu (A HTML5 aktuális állapota szerint vizsgálja az oldalakat Ellenőrző eszközök

12 2. Akadálymentesség ellenőrzése Szöveges böngészők: Lynx Opera speciális lehetőségei: User mode funkció (alternatív megjelenítőn hogy nézne ki az oldal) Emulate text browser (hogyan nézne ki szöveges böngészőben, textonly.css-t használ) A Firefox lehetőségei: Firefox-ba WAVE kiterjesztés Colour Contrast Analyzer Több böngészőben és oprendszeren tesztelés: Browsershots.org weboldal igénybevétele (80 különböző böngésző-oprsz. páros megadása, 12 képernyőfelbontás, 5 színmélység, 8 Javascript beállítás. A végeredmény egy képgaléria.) Ellenőrző eszközök

13 2. Akadálymentesség ellenőrzése WCAG 1.0 checklist alapján dolgozik A, AA, AAA-ra ellenőriz: HiSoftware Cynthia Says ( WCAG 2.0 checklist alapján dolgozik: Firefox-ba WAVE kiterjesztés Hibakeresés elindítása (Errors, Features and Alerts gomb). Ikonok magyarázata (Icons Key - Help). Jelzi ahol kézi ellenőrzés is szükséges!!! (Hisz nem minden WCAG 2.0 feltétel ellenőrizhető automatizáltan.) Ellenőrzés végén megnyomni (Reset Page gomb). Struktúra és sorrend megtekintése (Structure/Order pl. címsorok ell.). Ellenőrző eszközök