1 W3C WAI, avagy Weblapok akadálymentesítése2 Témakörök A World Wide Web Consortium (W3C) W3C Magyar Iroda W3C - Web Accessibility Initiative (WAI) WC...
A World Wide Web Consortium (W3C) DSD W3C Magyar Iroda 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 Pataki Máté
2 / 62
A World Wide web Consortium (W3C)
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: ERCIM (INRIA) – Franciaország KEIO Egyetem – Japán Több mint 400 tag
Pataki Máté
3 / 62
W3C szabványok
DSD
Pataki Máté
4 / 62
W3C Magyar Iroda
16 helyi iroda, 2002-tő l: W3C Magyar Iroda DSD MTA SZTAK-ban mű ködik Tevékenységeink, szolgáltatásaink: Magyar nyelvű információk nyújtása Weboldal, hírlevél, szóróanyagok… W3C technológiák népszerű sítése Konferenciák, workshopok, oktatás szervezése Célunk: Magyar webes élet fejlő désének elő segítése Nemzetközivel kompatibilis hazai webes szabványok Pataki Máté
Web Content Accessibility Guidelines DSD Priority 1 (must)
Priority 2 (should)
Pl.: style sheet használata (tartalom-megjelenítés)
Priority 3 (may)
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 / 62
WCAG 1.0 Checklist
DSD
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html Pataki Máté
8 / 62
Fogyatékossággal élő k
Fogyatékossággal élő k DSD Vakok Gyengénlátók Színvakok Hallássérültek Mozgássérültek Értelmi fogyatékosok
Pataki Máté
9 / 62
Vakok
Külön lap? Budapest Portál Más DSD 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)
Pataki Máté
10 / 62
Képek elnevezése
DSD
Pataki Máté
11 / 62
Linkek elnevezése legyen egyedi, és értelmes
DSD
Pataki Máté
12 / 62
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é
13 / 62
Tartalom és megjelenítés elkülönítése
DSD
Pataki Máté
14 / 62
Jelöljük a strukturális elemeket
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 Jelöljük a fejlécet:
Foglaljuk össze a táblázat tartalmát summary="Munkatársak fizetése"
Pataki Máté
15 / 62
Táblázatok linearizálása Név
Kor
Név
Molnár 18 DSD Kor Szabó
14
Nagy
12
Molnár
Szabó
Nagy
18
14
12
Név
Kor
Molnár
18
Szabó
14
Nagy
12
Pataki Máté
16 / 62
Gyengénlátók
Nem mindig használnak felolvasóprogramot DSD Betű méret állítása pl.: CSS-ben %-ban megadni, vagy különböző méretek biztosítása Nagy kontraszt (KOPI)
Pataki Máté
17 / 62
Kis betű méret – Explorer: Medium és Largest
DSD
Pataki Máté
18 / 62
Kis betű méret – Opera: 100% és 200%
DSD
Pataki Máté
19 / 62
Böngésző -használati statisztika
DSD
http://marketshare.hitslink.com/report.aspx?qprid=0 (2006. február) Pataki Máté
20 / 62
MVGYOSZ honlapja Operában és Explorerben
DSD
http://mvgyosz.budapest.hu/Engine.aspx Pataki Máté
21 / 62
Színvakok / színtévesztő k
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.: A piros és csillaggal jelölt mező k kitöltése kötelező Nem színes kijelző k Régi gép Mobiltelefon PDA
Pataki Máté
22 / 62
Piros mező k kitöltése kötelező
DSD
Pataki Máté
23 / 62
Piros csillaggal jelölt mező k
DSD
Pataki Máté
24 / 62
Hallássérültek
Hang ne hordozzon máshogy nem elérhető DSD 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
Pataki Máté
25 / 62
Videó és a beszéd teljes szövege
DSD
Pataki Máté
26 / 62
Mozgássérültek
Alternatív beviteli eszközök DSD 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
Pataki Máté
27 / 62
Speciális billentyű zetek
DSD
Pataki Máté
28 / 62
Billentyű zetkezelő eszközök
DSD
Pataki Máté
29 / 62
Speciális egerek, lábegér, joystick
DSD
Pataki Máté
30 / 62
Szemmozgást észlelő mutatóeszköz
DSD
Pataki Máté
31 / 62
Szívó-fujó irányítóeszköz
DSD
Pataki Máté
32 / 62
Pontos pozícionálás az almenü fekete sávjában
DSD
Pataki Máté
33 / 62
Értelmi fogyatékosok
Vezetni a felhasználót (kikapcsolható) DSD Mindig tudja hol tart Visszajuthat a kiindulópontra Ikonok/jelek következetes használata Oldaltérkép Részletes súgó
Pataki Máté
34 / 62
Oldaltérkép / menütérkép
DSD
Pataki Máté
35 / 62
Technológiailag megkülönböztetettek
Technológiailag megkülönböztetettek DSD Eltérő képernyő méret Elavult böngésző / operációs rendszer Gyenge hardware
Pataki Máté
36 / 62
Eltérő képernyő méret
Képernyő k >19’’ CNN 220px DSD Mobiltelefon Képernyő Memória Lapozás PDA 320x200 640x480 Vízszintes görgetés Kis betű k (nagyítás) Pataki Máté
37 / 62
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é
38 / 62
Mobil böngészés elő retörése
T-Mobile Web'n'Walk (korlátlan hozzáférés bizonyos DSD szolgáltatásokhoz): 330 oldaletöltés havonta és felhasználónként 199%-os bevételnövekedés az adatforgalomban (SMS nélkül) Forrás: Opera, 2006. április BBC BBC: 2005-ben kétszeresére nő tt a mobil tartalmak iránti kérések száma Közel 250 millió kérés naponta 28%-a a mobil felhasználóknak csak mobilról használja az oldalt (PC-rő l nem) Forrás: BBC, 2005. november Pataki Máté
39 / 62
Mobil böngészés elő retörése
DSD
felhasználok jelentő s részének a készüléke képes a mobil webezésre. Az 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. Forrás: W3C-MWI/Nokia A
Pataki Máté
40 / 62
Mobil böngészés a WC-tő l a konyháig :-)
DSD
Pataki Máté
41 / 62
Elavult böngésző / operációs rendszer
Nem biztos, hogy van: JavaScript DSD Flash Java … http://www.fkf.hu/ Javascripttel És nélküle
Pataki Máté
42 / 62
Gyenge hardware
Gyenge hardware => elavult software DSD 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 Pataki Máté
43 / 62
Oldal mérete - letöltési sebesség Honlap címe
Főlap mérete (kb)
Tömörített méret (kb)
erg.bme.hu
DSD 48
43
9,6
8,6
microsoft.hu
153
97
30,6
19,4
index.hu
471
343
94,2
68,6
pannon.hu/egyeni
478
199
95,6
39,8
cnn.com
492
234
98,4
46,8
origo.hu
509
221
101,8
44,2
bme.hu
757
197
151,4
39,4
Pataki Máté
Modemes, 5kb/s letöltés (s)
Tömörített sebessége (s)
44 / 62
Speciális célcsoportok
Speciális célcsoportok DSD Gyerekek Idő sek Alacsony (informatikai) képzettségű ek Idegen nyelvek és kultúrák
Pataki Máté
45 / 62
Gyerekek
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é
46 / 62
Idő sek / alacsony képzettségű ek
Idő sek BetűDSD 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)
Pataki Máté
47 / 62
Idegen nyelvek és kultúrák
Cégeknél (idegen nyelvű vagy nyelven is) Fogalmazás (Amazon.com, .de és .jp) DSD Dátum: 12/03/06 (nap/hó/év), 2006. március 12. Karakterkészlet, jobbról balra írás
Pataki Máté
48 / 62
Technológiák
Flash CsakDSD a nyitóoldal (FKF) Alternatív tartalom (Harry Potter) JavaScript Alternatív lehető ségek Kliens oldali ellenő rzés (is!) CSS és/vagy JavaScript: DynDemo Applet és ActiveX Nincs mindig engedélyezve Bizonyos esetekben szükséges (online játék) Legtöbb esetben elkerülhető Pataki Máté
49 / 62
Flash-sel és nélküle
DSD
Pataki Máté
50 / 62
DynDemo Internet Explorerben
DSD
Pataki Máté
51 / 62
DynDemo Lynx szöveges böngésző ben
DSD
Pataki Máté
52 / 62
DynDemo Operában, JS nélkül
DSD
Pataki Máté
53 / 62
DynDemo Operában képek nélkül
DSD
Pataki Máté
54 / 62
DynDemo Operában szöveges módban
DSD
Pataki Máté
55 / 62
Mű ködés ellenő rzése
Szöveges böngésző DSD 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/) W3C Validator (http://validator.w3.org/) Pataki Máté
56 / 62
Mű ködés ellenő rzése (IE6, Opera8, Opera5)
DSD
Pataki Máté
57 / 62
Firefox – Rendes megjelenítés
DSD
Pataki Máté
58 / 62
Sebességtesztelés - Netlimiter
DSD
Programonként állítható sebesség Pontosabb képet mutat, mintha csak az oldal méretét néznénk Átérezzük a modemes felhasználók helyzetét
