A webes akadálymentesítés helyzete Magyarországon Pataki Máté Pataki Máté 1/ 41
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
W3C - Web Accessibility Initiative (WAI) http://www.w3.org/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
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
WCAG 1.0 Checklist http://www.w3.org/tr/wai-webcontent/full-checklist.html Pataki Máté 5/ 41
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
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
http://www.budapest.hu/vak Pataki Máté 8/ 41
http://www.budapest.hu Pataki Máté 9/ 41
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
Linkek elnevezése legyen egyedi, és értelmes Pataki Máté 11 / 41
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
Képek elnevezése Pataki Máté 13 / 41
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
Kis betűméret Explorer: Medium és Largest Pataki Máté 15 / 41
Kis betűméret Opera: 100% és 200% Pataki Máté 16 / 41
Böngésző-használati statisztika http://marketshare.hitslink.com/report.aspx?qprid=0 (2007. február) Pataki Máté 17 / 41
A Firefox Európában sokkal elterjedtebb http://www.xitimonitor.com/enus/browsers-barometer/firefoxdecember-2007/index-1-2-3-117.html Pataki Máté 18 / 41
MVGYOSZ honlapja Explorerben és Operában http://www.mvgyosz.hu Pataki Máté 19 / 41
MEOSZ A google se jut be? Pataki Máté 20 / 41
Piros mezők kitöltése kötelező Pataki Máté 21 / 41
Piros csillaggal jelölt mezők Pataki Máté 22 / 41
Videó és a beszéd teljes szövege Pataki Máté 23 / 41
Pontos pozícionálás az almenü fekete sávjában Pataki Máté 24 / 41
Oldaltérkép / menütérkép Pataki Máté 25 / 41
Nincs elérhetőség, kapcsolat, email-cím Pataki Máté 26 / 41
Nincs elérhetőség, kapcsolat, email-cím Pataki Máté 27 / 41
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
Eltérő képernyőméret Képernyők >19 CNN 220px Mobiltelefon Képernyő Memória Lapozás PDA 320x200 640x480 Vízszintes görgetés Kis betűk (nagyítás) Pataki Máté 29 / 41
Elavult böngésző / operációs rendszer Nem biztos, hogy van: JavaScript Flash Java http://www.fkf.hu/ Javascripttel És nélküle Pataki Máté 30 / 41
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 1,6 origo.hu 567 304 61 1,9 index.hu 1071 723 145 4,5 Pataki Máté 31 / 41
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
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
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
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 Pataki Máté 35 / 41
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
Működés ellenőrzése (IE6, Opera8, Opera5) Pataki Máté 37 / 41
Tesztelés W3C Validator (http://validator.w3.org/) Online ellenőrzés A honlapunk minden esetben legyen szabványos Bobby (http://webxact.watchfire.com/) WAI irányelvek szerinti tesztelés Hibák jelzése Kézi ellenőrzésre való figyelmeztetés Pataki Máté 38 / 41
W3C Validator Pataki Máté 39 / 41
W3C Validator Pataki Máté 40 / 41
Köszönöm a figyelmet! http://www.w3c.hu Email: Mate.Pataki@w3c.hu Pataki Máté 41 / 41