1 / 41

DSD

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

orsin
Download Presentation

DSD

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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) • 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

  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

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

  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

  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. http://www.budapest.hu/vak

  9. http://www.budapest.hu

  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 http://marketshare.hitslink.com/report.aspx?qprid=0 (2007. február)

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

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

  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 • 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 • Képernyő • 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 • … • http://www.fkf.hu/ • Javascripttel • És nélküle

  31. Oldal mérete - letöltési sebesség

  32. Speciális célcsoportok • 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 • 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)

  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 (http://webxact.watchfire.com/) • 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. Köszönöm a figyelmet! http://www.w3c.hu Email:Mate.Pataki@w3c.hu

More Related