Témakörök

• W3C - Web Accessibility Initiative (WAI)
• WCAG 1.0
• Célcsoportok
  • Fogyatékossággal élők
  • Technológiailag megkülönböztetettek
  • Speciális célcsoportok
• Technológiá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 (2006. ápr. 27.)
    • Részletesebb útmutató
    • Understanding WCAG 2.0
    • Technológiák sokszínűsége
    • Szélesebb közönségnek

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 (offline)
  • 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)

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

Böngésző-használati statisztika

http://marketshare.hitslink.com/report.aspx?qprid=0 (2006. szeptember)

Színvakok / színtévesztők

• Háttér-betű kontrasztarány
• Csak szín ne hordozzon fontos információt
• Használjunk színeket, de egyéb módon is legyen elérhető ugyanaz az információ, pl.:
  • A piros és csillaggal jelölt mezők kitöltése kötelező
• Nem színes kijelzők
  • Régi gép
  • Mobiltelefon
  • PDA

Hallássérültek

• Hang ne hordozzon máshogy nem elérhető információt
  • Hallássérültek
  • Zajos környezet (étterem, műhely)
  • Hangkártya nélküli gépek (munkahely)
• Videó mellett felirat vagy leírás
• Hanghoz és zenéhez alternatív szöveges tartalom

Színvakok / színtévesztők

• Alternatív beviteli eszközök
  • Csak egér
  • Csak billentyűzet
  • Láb/szemegér
• Sok gépelés mellőzése (cookie)
• Pontos pozícionálás gond lehet
  • Kattintható felületek nagyok legyenek
  • Gyorsbillentyű használata

Értelmi fogyatékosok

• Vezetni a felhasználót (kikapcsolható)
  • Mindig tudja hol tart
  • Visszajuthat a kiindulópontra
  • Ikonok/jelek következetes használata
• Oldaltérkép
• Részletes súgó

Technológiailag megkülönböztetettek

• Eltérő képernyőméret
• Elavult böngésző / operációs rendszer
• Gyenge hardver

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)

Elavult böngésző / operációs rendszer

• Nem biztos, hogy van:
  • JavaScript
  • Flash
  • Java
  • ...

• http://www.fkf.hu/
  • Javascripttel
  • És nélküle

Gyenge hardver

• Gyenge hardver => elavult szoftver
• Lassú internet-kapcsolat (modem, mobil)
  • Képek legyenek kicsik
    • Képből kirakott menü mérete
    • HTML-ben átméretezett képek kerülése
  • HTML-kód tisztítása segíthet
  • Ajax sokat gyorsíthat
• Lassú processzor, kevés memória
  • Nagy méretű oldalakat lassan kezelik
  • Java appletek lassítják

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

• 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
  • Popup félrevezeti
  • Szakzsargon mellőzése
  • Súgó (ne informatikus írja, context sensitive)

Idegen nyelvek és kultúrák

• Cégeknél (idegen nyelvű vagy nyelven is)
• Fogalmazás (Amazon.com, .de és .jp)
• Dátum: 12/03/06 (nap/hó/év), 2006. március 12.
• Karakterkészlet, jobbról balra írás

Technológiák

• Flash
  • Csak a nyitóoldal (FKF - offline)
  • Alternatív tartalom (Harry Potter - offline)
• JavaScript
  • Alternatív lehetőségek
  • Kliens oldali ellenőrzés (is!)
  • CSS és/vagy JavaScript (DynDemo - offline)

Flash-sel és nélküle

DynDemo Internet Explorerben

DynDemo Lynx szöveges böngészőben

DynDemo Operában, JS nélkül

DynDemo Operában képek nélkül

DynDemo Operában szöveges módban

Működés ellenőrzése

• Szöveges böngésző
• Opera
  • Szöveges böngésző
  • Stíluslap kikapcsolása
  • PDA
• Internet Explorer + PopupCop
  • Flash kikapcsolása
  • ActiveX kikapcsolása
  • JavaScript kikapcsolása
• Bobby (http://webxact.watchfire.com/ - offline)
• W3C Validator (http://validator.w3.org/ - offline)

Köszönöm a figyelmet!

• A W3C Magyar Iroda honlapja: http://www.w3c.hu/
• A W3C WAI honlapja: http://www.w3.org/WAI/
• A W3C WCAG 2.0 Végső Munkaterv: http://www.w3.org/TR/WCAG20/
• Email: Mate.Pataki@w3c.hu