DSD. A webes akadálymentesítés helyzete Magyarországon Pataki Máté DSD. Pataki Máté 1/ 41

Átírás

1 A webes akadálymentesítés helyzete Magyarországon Pataki Máté Pataki Máté 1/ 41

2 Témakörök W3C -Web Accessibility Initiative (WAI) Célcsoportok Fogyatékossággal élők Technológiailag megkülönböztetettek Speciális célcsoportok Jó példák? Működés ellenőrzése Pataki Máté 2/ 41

3 W3C - Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines 1.0: ajánlás (1999. máj. 5.) 2.0: munkaterv (2007. dec. 11.) Részletesebb útmutató UnderstandingWCAG 2.0 Technológiák sokszínűsége Szélesebb közönségnek Pataki Máté 3/ 41

4 WCAG 1.0 Web Content Accessibility Guidelines Priority 1 (must) Pl.: szöveges megfelelő biztosítása minden képhez Priority 2 (should) Pl.: style sheet használata (tartalom-megjelenítés) Priority 3 (may) Pl.: fontos linkekhez gyorsbillentyű rendelése Gépi és kézi ellenőrzés Pataki Máté 4/ 41

5 WCAG 1.0 Checklist Pataki Máté 5/ 41

6 Fogyatékossággal élők Fogyatékossággal élők Vakok Gyengénlátók Színvakok Hallássérültek Mozgássérültek Értelmi fogyatékosok Pataki Máté 6/ 41

7 Vakok Külön lap? (Budapest Portál, Hirado.hu) Más információ a vakoknak? Többi fogyatékossággal élő? Ajánlott a tartalom és megjelenítés elkülönítése Pataki Máté 7/ 41

8 Pataki Máté 8/ 41

9 Pataki Máté 9/ 41

10 Vakok Külön lap? (Budapest Portál, Hirado.hu) Más információ a vakoknak? Többi fogyatékossággal élő? Ajánlott a tartalom és megjelenítés elkülönítése Beszédes linkek Pl.: a Firefox 1.5 letöltése Ugyanolyan nevű linkek kerülése Pataki Máté 10 / 41

11 Linkek elnevezése legyen egyedi, és értelmes Pataki Máté 11 / 41

12 Vakok Külön lap? (Budapest Portál, Hirado.hu) Más információ a vakoknak? Többi fogyatékossággal élő? Ajánlott a tartalom és megjelenítés elkülönítése Beszédes linkek Pl.: a Firefox 1.5 letöltése Ugyanolyan nevű linkek kerülése Képek, appletek, videók Elnevezés (alt attribútum) Alternatív tartalom (longdesc vagy a szövegben) Pataki Máté 12 / 41

13 Képek elnevezése Pataki Máté 13 / 41

14 Gyengénlátók Nem mindig használnak felolvasóprogramot Betűméret állítása pl.: CSS-ben %-ban megadni, vagy különböző méretek biztosítása Nagy kontraszt (KOPI) Pataki Máté 14 / 41

15 Kis betűméret Explorer: Medium és Largest Pataki Máté 15 / 41

16 Kis betűméret Opera: 100% és 200% Pataki Máté 16 / 41

17 Böngésző-használati statisztika (2007. február) Pataki Máté 17 / 41

18 A Firefox Európában sokkal elterjedtebb Pataki Máté 18 / 41

19 MVGYOSZ honlapja Explorerben és Operában Pataki Máté 19 / 41

20 MEOSZ A google se jut be? Pataki Máté 20 / 41

21 Piros mezők kitöltése kötelező Pataki Máté 21 / 41

22 Piros csillaggal jelölt mezők Pataki Máté 22 / 41

23 Videó és a beszéd teljes szövege Pataki Máté 23 / 41

24 Pontos pozícionálás az almenü fekete sávjában Pataki Máté 24 / 41

25 Oldaltérkép / menütérkép Pataki Máté 25 / 41

26 Nincs elérhetőség, kapcsolat, -cím Pataki Máté 26 / 41

27 Nincs elérhetőség, kapcsolat, -cím Pataki Máté 27 / 41

28 Technológiailag megkülönböztetettek Technológiailag megkülönböztetettek Eltérő képernyőméret Elavult böngésző / operációs rendszer Gyenge hardware Pataki Máté 28 / 41

29 Eltérő képernyőméret Képernyők >19 CNN 220px Mobiltelefon Képernyő Memória Lapozás PDA 320x x480 Vízszintes görgetés Kis betűk (nagyítás) Pataki Máté 29 / 41

30 Elavult böngésző / operációs rendszer Nem biztos, hogy van: JavaScript Flash Java Javascripttel És nélküle Pataki Máté 30 / 41

31 Oldal mérete - letöltési sebesség Honlap címe Főlap mérete (kb) Tömörített méret (kb) 5kb/s modemmel (s) 128kb/s ADSL (s) erg.bme.hu ,3 iwiw.hu ,8 pannon.hu/egyeni ,0 bme.hu ,3 cnn.com ,6 microsoft.hu ,6 origo.hu ,9 index.hu ,5 Pataki Máté 31 / 41

32 Speciális célcsoportok Speciális célcsoportok Gyerekek Idősek Alacsony (informatikai) képzettségűek Idegen nyelvek és kultúrák Pataki Máté 32 / 41

33 Gyerekek Nem tud olvasni (Manó sorozat) Sok választási lehetőség nem jó Vezetni kell Könnyen elkalandozik a figyelme Mindenre rákattint (legjobb tesztalany :-) Pataki Máté 33 / 41

34 Idősek / alacsony képzettségűek Idősek Betűméret változtatható legyen Mozgó ikonok, reklámok, szövegek Elvonják a figyelmet Fárasztják a szemet Alacsony (informatikai) képzettségűek Felugró ablakok félrevezetik Szakzsargon mellőzése Súgó (ne informatikus írja, context sensitive) Pataki Máté 34 / 41

35 Jó példák? Paramédia ( H2F (hátrányos helyzetű felhasználók) 18 tag Fővárosi Vízművek Pataki Máté 35 / 41

36 Működés ellenőrzése Próbáljuk ki több böngészőben is: Internet Explorer (több gépen több verzió) Opera (több verzió is elmegy egy gépen) Firefox Netscape Safari (Apple) Lynx (szöveges böngésző) Mobiltelefon böngészője Pataki Máté 36 / 41

37 Működés ellenőrzése (IE6, Opera8, Opera5) Pataki Máté 37 / 41

38 Tesztelés W3C Validator ( Online ellenőrzés A honlapunk minden esetben legyen szabványos Bobby ( WAI irányelvek szerinti tesztelés Hibák jelzése Kézi ellenőrzésre való figyelmeztetés Pataki Máté 38 / 41

39 W3C Validator Pataki Máté 39 / 41

40 W3C Validator Pataki Máté 40 / 41

41 Köszönöm a figyelmet! Mate.Pataki@w3c.hu Pataki Máté 41 / 41