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

Az előadások a következő témára: "A webes akadálymentesítés helyzete Magyarországon Pataki Máté"— Előadás másolata:

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

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

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ó Understanding WCAG 2.0 Technológiák sokszínűsége Szélesebb közönségnek

4 Web Content Accessibility Guidelines Priority 1 (must)
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

5 WCAG 1.0 Checklist

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

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

8

9

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

11 Linkek elnevezése legyen egyedi, és értelmes

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)

13 Képek elnevezése

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)

15 Kis betűméret – Explorer: Medium és Largest

16 Kis betűméret – Opera: 100% és 200%

17 Böngésző-használati statisztika
(2007. február)

18 A Firefox Európában sokkal elterjedtebb

19 MVGYOSZ honlapja Explorerben és Operában

20 MEOSZ – A google se jut be?

21 Piros mezők kitöltése kötelező

22 Piros csillaggal jelölt mezők

23 Videó és a beszéd teljes szövege

24 Pontos pozícionálás az almenü fekete sávjában

25 Oldaltérkép / menütérkép

26 Nincs elérhetőség, kapcsolat, email-cím

27 Nincs elérhetőség, kapcsolat, email-cím

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

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

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

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 47 41 8 0,3 iwiw.hu 430 127 25 0,8 pannon.hu/egyeni 500 158 32 1,0 bme.hu 747 200 40 1,3 cnn.com 664 257 51 1,6 microsoft.hu 307 258 52 origo.hu 567 304 61 1,9 index.hu 1071 723 145 4,5

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

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 :-)

34 Idősek / alacsony képzettségűek
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)

35 Jó példák? Paramédia (http://www.paramedia.hu/)
H2F (hátrányos helyzetű felhasználók) 18 tag Fővárosi Vízművek

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

37 Működés ellenőrzése (IE6, Opera8, Opera5)

38 Tesztelés W3C Validator (http://validator.w3.org/) 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

39 W3C Validator

40 W3C Validator

41 Email: Mate.Pataki@w3c.hu
Köszönöm a figyelmet!