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é

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

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

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

WCAG 1.0 Checklist http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

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

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

http://www.budapest.hu/vak

http://www.budapest.hu

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

Linkek elnevezése legyen egyedi, és értelmes

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)

Képek elnevezése

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)

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

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

Böngésző-használati statisztika http://marketshare.hitslink.com/report.aspx?qprid=0 (2007. február)

A Firefox Európában sokkal elterjedtebb http://www.xitimonitor.com/en-us/browsers-barometer/firefox-december-2007/index-1-2-3-117.html

MVGYOSZ honlapja Explorerben és Operában http://www.mvgyosz.hu

MEOSZ – A google se jut be?

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

Piros csillaggal jelölt mezők

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

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

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

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

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

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

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)

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

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

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

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

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)

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

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

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

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

W3C Validator

W3C Validator

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