1 W3C WAI, avagy Weblapok akadálymentesítése Pataki Máté2 Témakörök A World Wide Web Consortium (W3C) W3C Magyar Iroda W3C -Web AccessibilityInitiativ...
A World Wide Web Consortium (W3C) DSD W3C Magyar Iroda W3C - Web Accessibility Initiative (WAI) WCAG 1.0 Célcsoportok n Fogyatékossággal élők n Technológiailag megkülönböztetettek n Speciális célcsoportok Technológiák Működés ellenőrzése Pataki Máté
2 / 67
A World Wide web Consortium (W3C) n n n n n
n
A webszabványok fejlesztésének nyilvános fóruma DSD Jelszavai: Semlegesség és egyetértés Hogy kihasználhassuk a Web nyújtotta összes lehetőséget... 1994-ben Tim Berners Lee alapította a MIT-n További anyaintézmények: n ERCIM (INRIA) – Franciaország n KEIO Egyetem – Japán Több mint 400 tag
Pataki Máté
3 / 67
Egymásra épülő W3C szabványok
DSD
Pataki Máté
4 / 67
W3C Magyar Iroda n n n
n
16 helyi iroda, 2002-től: W3C Magyar Iroda DSD MTA SZTAK-ban működik Tevékenységeink, szolgáltatásaink: n Magyar nyelvű információk nyújtása n Weboldal, hírlevél, szóróanyagok… n W3C technológiák népszerűsítése n Konferenciák, workshopok, oktatás szervezése Célunk: n Magyar webes élet fejlődésének elősegítése n Nemzetközivel kompatibilis hazai webes szabványok Pataki Máté
5 / 67
W3C - Web Accessibility Initiative (WAI) http://www.w3.org/WAI/ DSD n Web Content Accessibility Guidelines n 1.0: ajánlás (1999. máj. 5.) n 2.0: munkaterv (2007. máj. 17.) n
Részletesebb útmutató n Understanding WCAG 2.0 n Technológiák sokszínűsége n Szélesebb közönségnek n
Pataki Máté
6 / 67
WCAG 1.0 n
Web Content Accessibility Guidelines DSD n Priority 1 (must) n
n
Priority 2 (should) n
n
Pl.: style sheet használata (tartalom-megjelenítés)
Priority 3 (may) n
n
Pl.: szöveges megfelelő biztosítása minden képhez
Pl.: fontos linkekhez gyorsbillentyű rendelése
Gépi és kézi ellenőrzés
Pataki Máté
7 / 67
WCAG 1.0 Checklist
DSD
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html Pataki Máté
8 / 67
Fogyatékossággal élők n
Fogyatékossággal élők DSD n Vakok n Gyengénlátók n Színvakok n Hallássérültek n Mozgássérültek n Értelmi fogyatékosok
Pataki Máté
9 / 67
Vakok n
Külön lap? Budapest Portál DSD n Más információ a vakoknak? n Többi fogyatékossággal élő? n Ajánlott a tartalom és megjelenítés elkülönítése
Pataki Máté
10 / 67
http://www.budapest.hu/vak
DSD
Pataki Máté
11 / 67
http://www.budapest.hu
DSD
Pataki Máté
12 / 67
Vakok n
n
Külön lap? Budapest Portál DSD n Más információ a vakoknak? n Többi fogyatékossággal élő? n Ajánlott a tartalom és megjelenítés elkülönítése Beszédes linkek n Pl.: a Firefox 1.5 letöltése n Ugyanolyan nevű linkek kerülése
Pataki Máté
13 / 67
Linkek elnevezése legyen egyedi, és értelmes
DSD
Pataki Máté
14 / 67
Vakok n
n
n
Külön lap? Budapest Portál DSD n Más információ a vakoknak? n Többi fogyatékossággal élő? n Ajánlott a tartalom és megjelenítés elkülönítése Beszédes linkek n Pl.: a Firefox 1.5 letöltése n Ugyanolyan nevű linkek kerülése Képek, appletek, videók n Elnevezés (alt attribútum) n Alternatív tartalom (longdesc vagy a szövegben)
Pataki Máté
15 / 67
Képek elnevezése
DSD
Pataki Máté
16 / 67
Tartalom és megjelenítés elkülönítése <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Antoni Gaudí - Introduction
Antoni Gaudí
Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.
The BME celebrates the 150th anniversary of Gaudí's birth in 2002.
DSD
La Casa Milà
Gaudí's work was essentially useful. La Casa Milà is an apartment building and <em>real people live there.
La Sagrada Família
The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited building in Barcelona.
CSS:
h1, h2 {color:red} Pataki Máté
17 / 67
Tartalom és megjelenítés elkülönítése
DSD
Pataki Máté
18 / 67
Jelöljük a strukturális elemeket n n n n n
Jelöljük a dokumentum nyelvét: lang="hu" DSD A fejezetcímeket jelöljük sorjában:
,
,
… Listák legyenek lista típusúak: ,
,
Használjuk rendesen a <noframe> elemet (ne az legyen ott, hogy az ön böngészője nem támogatja) Táblázatoknál n Jelöljük a fejlécet:
n Foglaljuk össze a táblázat tartalmát summary="Munkatársak fizetése"
Pataki Máté
19 / 67
Táblázatok linearizálása Név
Kor
Név
Molnár 18 DSD Kor Szabó Nagy
Molnár
Szabó
Nagy
18
14
12
14 12
Név
Kor
Molnár
18
Szabó
14
Nagy
12
Pataki Máté
20 / 67
Gyengénlátók n n
n
Nem mindig használnak felolvasóprogramot DSD Betűméret állítása n pl.: CSS-ben %-ban megadni, vagy n különböző méretek biztosítása Nagy kontraszt (KOPI)
Pataki Máté
21 / 67
Kis betűméret – Explorer: Medium és Largest
DSD
Pataki Máté
22 / 67
Kis betűméret – Opera: 100% és 200%
DSD
Pataki Máté
23 / 67
Böngésző-használati statisztika
DSD
http://marketshare.hitslink.com/report.aspx?qprid=0 (2007. szeptember) Pataki Máté
Háttér-betű kontrasztarány DSD 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.: n A piros és csillaggal jelölt mezők kitöltése kötelező Nem színes kijelzők n Régi gép n Mobiltelefon n PDA
Pataki Máté
27 / 67
Piros mezők kitöltése kötelező
DSD
Pataki Máté
28 / 67
Piros csillaggal jelölt mezők
DSD
Pataki Máté
29 / 67
Hallássérültek n
n n
Hang ne hordozzon máshogy nem elérhető DSD információt n Hallássérültek n Zajos környezet (étterem, műhely) n Hangkártya nélküli gépek (munkahely) Videó mellett felirat vagy leírás Hanghoz és zenéhez alternatív szöveges tartalom
Pataki Máté
30 / 67
Videó és a beszéd teljes szövege
DSD
Pataki Máté
31 / 67
Mozgássérültek n
n n
Alternatív beviteli eszközök DSD n Csak egér n Csak billentyűzet n Láb/szemegér Sok gépelés mellőzése (cookie) Pontos pozícionálás gond lehet n Kattintható felületek nagyok legyenek n Gyorsbillentyű használata
Pataki Máté
32 / 67
Speciális billentyűzetek
DSD
Pataki Máté
33 / 67
Speciális billentyűzetek
DSD
Lábbal kezelhető billentyűzet
Fejjel irányítható billentyűzet és egér (http://www.lomakkeyboard.com/)
Pataki Máté
34 / 67
Billentyűzetkezelő eszközök
DSD
Pataki Máté
35 / 67
Speciális egerek, lábegér, joystick
DSD
Pataki Máté
36 / 67
Szemmozgást észlelő mutatóeszköz
DSD
http://nipg.inf.elte.hu/headmouse/headmouse.html
Pataki Máté
37 / 67
Szívó-fújó irányítóeszköz
DSD
Pataki Máté
38 / 67
Pontos pozícionálás az almenü fekete sávjában
DSD
Pataki Máté
39 / 67
Értelmi fogyatékosok n
n n
Vezetni a felhasználót (kikapcsolható) DSD n Mindig tudja hol tart n Visszajuthat a kiindulópontra n Ikonok/jelek következetes használata Oldaltérkép Részletes súgó
Pataki Máté
40 / 67
Oldaltérkép / menütérkép
DSD
Pataki Máté
41 / 67
Technológiailag megkülönböztetettek n
Technológiailag megkülönböztetettek DSD n Eltérő képernyőméret n Elavult böngésző / operációs rendszer n Gyenge hardware
Pataki Máté
42 / 67
Eltérő képernyőméret n
n
n
n n
Képernyők >19’’ n CNN 220px DSD Mobiltelefon n Képernyő n Memória n Lapozás PDA n 320x200 n 640x480 Vízszintes görgetés Kis betűk (nagyítás) Pataki Máté
43 / 67
Mobil böngészés előretörése A webezés a legnagyobb adatforgalmat genetáló szolgáltatás
DSD
Forrás: Nokia study, 2005. Pataki Máté
44 / 67
Mobil böngészés előretörése n
n
T-Mobile Web'n'Walk (korlátlan hozzáférés bizonyos DSD szolgáltatásokhoz): n 330 oldaletöltés havonta és felhasználónként n 199%-os bevételnövekedés az adatforgalomban (SMS nélkül) n Forrás: Opera, 2006. április BBC n BBC: 2005-ben kétszeresére nőtt a mobil tartalmak iránti kérések száma n Közel 250 millió kérés naponta n 28%-a a mobil felhasználóknak csak mobilról használja az oldalt (PC-ről nem) n Forrás: BBC, 2005. november Pataki Máté
45 / 67
Mobil böngészés előretörése
DSD
nA
felhasználok jelentős részének a készüléke képes a mobil webezésre. nAz aktív webezők száma rohamosan nő, és még csökkenő árak mellett is növekednek az ebből származó bevételek. nForrás: W3C-MWI/Nokia Pataki Máté
46 / 67
Mobil böngészés a WC-től a konyháig :-)
DSD
Pataki Máté
47 / 67
A mobiltelefon terjedése
DSD
Pataki Máté
48 / 67
Elavult böngésző / operációs rendszer n
n
Nem biztos, hogy van: n JavaScript DSD n Flash n Java n … http://www.fkf.hu/ n Javascripttel n És nélküle
Pataki Máté
49 / 67
Gyenge hardware n n
n
Gyenge hardware => elavult software DSD Lassú internet-kapcsolat (modem, mobil) n Képek legyenek kicsik n Képből kirakott menü mérete n HTML-ben átméretezett képek kerülése n HTML kód tisztítása segíthet n Ajax sokat gyorsíthat Lassú processzor, kevés memória n Nagy méretű oldalakat lassan kezelik n Java appletek lassítják Pataki Máté
50 / 67
Oldal mérete - letöltési sebesség Honlap címe
Főlap Tömörített mérete (kb) méret (kb)
DSD
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é
51 / 67
Speciális célcsoportok n
Speciális célcsoportok DSD n Gyerekek n Idősek n Alacsony (informatikai) képzettségűek n Idegen nyelvek és kultúrák
Pataki Máté
52 / 67
Gyerekek n n n n n
Nem tud olvasni (Manó sorozat) DSD Sok választási lehetőség nem jó Vezetni kell Könnyen elkalandozik a figyelme Mindenre rákattint (legjobb tesztalany :-)
Pataki Máté
53 / 67
Idősek / alacsony képzettségűek n
n
Idősek DSD n Betűméret változtatható legyen n Mozgó ikonok, reklámok, szövegek n Elvonják a figyelmet n Fárasztják a szemet Alacsony (informatikai) képzettségűek n Felugró ablakok félrevezetik n Szakzsargon mellőzése n Súgó (ne informatikus írja, context sensitive)
Pataki Máté
54 / 67
Idegen nyelvek és kultúrák n n n n
Cégeknél (idegen nyelvű vagy nyelven is) Fogalmazás (Amazon.com, .de és .jp) DSD Dátum: 12/03/07 (nap/hó/év), 2007. március 12. Karakterkészlet, jobbról balra írás
Pataki Máté
55 / 67
Technológiák n
n
n
Flash DSD n Csak a nyitóoldal (FKF) n Alternatív tartalom (Harry Potter) JavaScript n Alternatív lehetőségek n Kliens oldali ellenőrzés (is!) n CSS és/vagy JavaScript: DynDemo Applet és ActiveX n Nincs mindig engedélyezve n Bizonyos esetekben szükséges (online játék) n Legtöbb esetben elkerülhető Pataki Máté
56 / 67
Flash-sel és nélküle
DSD
Pataki Máté
57 / 67
DynDemo Internet Explorerben
DSD
Pataki Máté
58 / 67
DynDemo Lynx szöveges böngészőben
DSD
Pataki Máté
59 / 67
DynDemo Operában, JS nélkül
DSD
Pataki Máté
60 / 67
DynDemo Operában képek nélkül
DSD
Pataki Máté
61 / 67
DynDemo Operában szöveges módban
DSD
Pataki Máté
62 / 67
Működés ellenőrzése n
Próbáljuk ki több böngészőben is: DSD n Internet Explorer (több gépen több verzió) n Opera (több verzió is elmegy egy gépen) n Firefox n Netscape n Safari (Apple) n Lynx (szöveges böngésző) n Mobiltelefon böngészője
