W3C WAI Akadálymentesség Vándor Tamás 2009. november 3.

Az előadások a következő témára: "W3C WAI Akadálymentesség Vándor Tamás 2009. november 3."— Előadás másolata:

1 W3C WAI Akadálymentesség Vándor Tamás tamas.vandor@webra.hu 2009. november 3.

2 Melyik oldal vajon kinek szól? A fekete biztos a vakoknak?

3 Tévedések  Külön lap létrehozása vakoknak  Akadálymentesség=vakbarát  Gyengénlátók nagy kontrasztú oldala=vakoknak szóló oldal  Az akadálymentesség csak a fogyatékkal élők szempontjából jó  Túl sok követelmény, amelyet nem lehet betartani  A WAI-ban nem lehet táblázatot használni

4 Célcsoportok  Fogyatékossággal élők  Technológiailag megkülönböztetettek  Speciális célcsoportok

5 Fogyatékossággal élők  Vakok  Külön lap?  Beszédes linkek  Gyengénlátók  Nagy kontraszt  Betűméret állítása  Színvakok  Szín ne hordozzon fontos információt  Hallássérültek  Zajos környék (étterem, műhely)  Videó mellett felirat vagy leírás  Mozgássérültek  Csak egér vagy csak billentyűzet  Sok gépelés (cookie)  Értelmileg visszamaradottak  Vezetni a felhasználót (kikapcsolható)

6 Technológiailag megkülönböztetettek  Eltérő képernyőméret  19’’ LCD képernyők (CNN 220px)  Mobil, PDA (vízszintes görgetés)  Elavult böngésző  JavaScript, Flash, Java (Vagy pl. reptér – letiltott JavaScript)  Gyenge hardware  Modem (képek, Winword HTML)  Akadozó hálózati kapcsolat (ma is gyakori rövid időszakaszokon szélessávú elérésen is)  Proxy szűrés

7 Web Content Accessibility Guidelines  Priority 1 (must)  Priority 2 (should)  Priority 3 (may) KIETB ajánlás is tartalmazza! USA Rehabilitation Act 508. section

8 Prioritás 1  Alternatív szöveg biztosítása  Szín ne hordozzon információt  Nyelvváltások jelzése  CSS nélküli olvashatóság  A dinamikus tartalmak alternatívái az eredetivel együtt változzanak  Ne villogjon  Egyszerű nyelvezet  Redundáns linkek biztosítása szerver oldali image map navigációhoz  Kliens oldali image map a szerver oldali helyett, kivéve ha a régiók nem definiálhatók geometrikus alakzatokkal  Tábla sor- és oszlopfejlécek azonosítása  Keret (frame) azonosítás és navigáció  Applet és script nélkül is használható az oldal  Multimédia objektumok esetén szöveges leírás biztosítása  Multimédia objektum és szöveges alternatíva időbeli szinkronja  Ha minden erőfeszítés ellenére sem sikerült az eredeti oldalt akadálymentessé tenni, akkor és csak akkor biztosítani kell egy alternatív oldalra mutató linket

9 Milyen a jó HTML?  DOCTYPE – ne bízzunk a böngészők találgatásaiban  CSS nem a HTML része – nullázás, resetelés  HTML nyelv teljes kihasználása – néhány elemet elfelejtettünk  Böngésző osztályok (A,C,X) megvalósítása könnyebb WAI-val  JavaScript  Külső JS fájlok  Ne függj vagy bízz a JavaScript-ben  Ellenőrizd létezik-e  Változók és láthatóság  Több eseménykezelő 

10 Melyik a jobb? 1. This is a title 2. This is a title 3. This is a title

11 Melyik a jobb? 1. alma körte 2. alma körte 3. alma körte 4. alma körte

12 Melyik a jobb? 1. List of Stuff apple orange 2. List of Stuff apple orange

13 Melyik a jobb? 1. © 2009 Webra … 2. © 2009 Webra …

14 Prioritás 2 – 1. rész  Háttér és előtér szín kontrasztja képek esetén  Jelölő (markup) nyelv használata képek helyett pl. fesorolás  Ellenőrzött, ajánlásoknak megfelelő dokumentumok (HTML, CSS)  CSS használata arra, amire való: elrendezés, prezentálás  Relatív egységek az abszolút helyett az attribútumok értékeimben pl. em  HEADER elemek használata  Felsorolások, számozott listák helyes használata  BLOCKQUOTE használata  Dinamikus tartalom akadálymentes legyen vagy biztosítsunk alternatív szöveget  Villogás kiküszöbölése  Automatikus frissítés elkerülése  Átirányítás elkerülése  Felugró ablakok elkerülése és a tartalom megváltoztatásáról a felhasználó értesítés  W3C technológiák használata  Régi technológiák mellőzése  Információ kisebb blokkokba történő rendezése

15 Prioritás 2 – 2. rész  Értelmezhető, beszédes linkek  Meta adatok használata  Honlaptérkép  Konzisztens navigáció  Ne használjunk táblázatokat az oldal elrendezésének kialakítására  Ha táblázatot használunk az oldal elrendezésére, ne használjunk sor- és/vagy oszlopfejléceket  Keretek céljának leírása  Űrlapok esetén ügyeljünk a címkék és vezérlők helye pozícionálására  Definiáljuk a címkék és vezérlőik összetartozását  Script és applet használata esetén az eseménykezelők legyenek beviteli eszköz függetlenek  Kerüljük el a mozgó tartalmak alkalmazását  Direkt elérhetőség az applet és script elemekre vagy kompatibilitás akadálymentes technológiákkal  A külön interfésszel rendelkező elemek esetén az interfész eszköz független legyen  Logikai eseménykezelők az eszközfüggő eseménykezelők helyett

16 Prioritás 3 – 1. rész  Rövidítések és betűszavak magyarázata  A dokumentum elsődleges nyelvének azonosítása  TAB sorrend  Gyorsbillentyűk, billentyű kombinációk linkekhez, image mapekhez, űrlapokhoz, vezérlőkhöz  Nyomtatható, elválasztó karakter alkalmazása egymás melletti linkek esetén  Preferenciák  Navigációs mechanizmusok átláthatóvá tétele  Csoportosított linkek, csoport azonosítása  Különböző szintű keresési lehetőségek  Fejlécek, bekezdések, listák elején megkülönböztető jel használata  Információ többoldalas dokumentumok vagy gyűjtemények esetén  ASCII rajzok átugrása, értelmezése  Alternatív leírás biztosítása a képekhez, grafikonokhoz, hanganyaghoz, amelyek a szöveg értelmezése szempontjából fontosak  Konzisztens arculat  Kliens oldali image map régióihoz leírás biztosítása

17 Prioritás 3 – 2. rész  Összefoglaló táblázatokhoz  Rövidítés a fejlécekhez  A nem linearizálható táblázatokhoz alternatív szöveg biztosítása  Szövegbeviteli mezők alapértelmezett feltöltése

18 Automatikus ellenőrzés - WebXACT http://webxact.watchfire.com/

19 További automatikus ellenőrzések  HTML ellenőrzés http://validator.w3.org/  CSS ellenőrzés http://jigsaw.w3.org/css-validator/ Tipp: FireFox Developer toolbar