DSD
W3C WAI, avagyWeblapok akadálymentesítése
Pataki Máté
DSD
Pataki Máté 2 / 67
Témakörök
n A World Wide Web Consortium (W3C)n W3C Magyar Irodan W3C - Web Accessibility Initiative (WAI)n WCAG 1.0n Célcsoportok
n Fogyatékossággal élőkn Technológiailag megkülönböztetettekn Speciális célcsoportok
n Technológiákn Működés ellenőrzése
DSD
Pataki Máté 3 / 67
A World Wide web Consortium (W3C)
n A webszabványok fejlesztésének nyilvános fóruman Jelszavai: Semlegesség és egyetértésn Hogy kihasználhassuk a Web nyújtotta összes
lehetőséget...n 1994-ben Tim Berners Lee alapította a MIT-nn További anyaintézmények:
n ERCIM (INRIA) – Franciaországn KEIO Egyetem – Japán
n Több mint 400 tag
DSD
Pataki Máté 4 / 67
Egymásra épülő W3C szabványok
DSD
Pataki Máté 5 / 67
W3C Magyar Iroda
n 16 helyi iroda, 2002-től: W3C Magyar Irodan MTA SZTAK-ban működikn Tevékenységeink, szolgáltatásaink:n Magyar nyelvű információk nyújtása
nWeboldal, hírlevél, szóróanyagok…n W3C technológiák népszerűsítésen Konferenciák, workshopok, oktatás szervezése
n Célunk:n Magyar webes élet fejlődésének elősegítésen Nemzetközivel kompatibilis hazai webes
szabványok
DSD
Pataki Máté 6 / 67
W3C - Web Accessibility Initiative (WAI)
n http://www.w3.org/WAI/n Web Content Accessibility Guidelinesn1.0: ajánlás (1999. máj. 5.)n2.0: munkaterv (2007. máj. 17.)
n Részletesebb útmutatón Understanding WCAG 2.0 n Technológiák sokszínűségen Szélesebb közönségnek
DSD
Pataki Máté 7 / 67
WCAG 1.0
n Web Content Accessibility Guidelinesn Priority 1 (must)
n Pl.: szöveges megfelelő biztosítása minden képhez
n Priority 2 (should)n Pl.: style sheet használata (tartalom-megjelenítés)
n Priority 3 (may)n Pl.: fontos linkekhez gyorsbillentyű rendelése
n Gépi és kézi ellenőrzés
DSD
Pataki Máté 8 / 67
WCAG 1.0 Checklist
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
DSD
Pataki Máté 9 / 67
Fogyatékossággal élők
n Fogyatékossággal élőkn Vakokn Gyengénlátókn Színvakokn Hallássérültekn Mozgássérültekn Értelmi fogyatékosok
DSD
Pataki Máté 10 / 67
Vakok
n Külön lap? Budapest Portáln 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
DSD
Pataki Máté 13 / 67
Vakok
n Külön lap? Budapest Portáln 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
n Beszédes linkekn Pl.: a Firefox 1.5 letöltésen Ugyanolyan nevű linkek kerülése
DSD
Pataki Máté 14 / 67
Linkek elnevezése legyen egyedi, és értelmes
DSD
Pataki Máté 15 / 67
Vakok
n Külön lap? Budapest Portáln 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
n Beszédes linkekn Pl.: a Firefox 1.5 letöltésen Ugyanolyan nevű linkek kerülése
n Képek, appletek, videókn Elnevezés (alt attribútum)n Alternatív tartalom (longdesc vagy a szövegben)
DSD
Pataki Máté 16 / 67
Képek elnevezése
DSD
Pataki Máté 17 / 67
Tartalom és megjelenítés elkülönítése<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Antoni Gaudí - Introduction</title><link rel="stylesheet" type="text/css" media="screen" href="name.css" />
</head><body>
<h1>Antoni Gaudí</h1><p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture. </p><p>The <a href="http://www.bme.hu">BME</a> celebrates the 150th anniversary of Gaudí's birth in 2002.</p>
<h2>La Casa Milà</h2><p>Gaudí's work was essentially useful. La Casa Milà is an apartment building and <em>real people</em> live there.</p>
<h2>La Sagrada Família</h2><p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited</em> building in Barcelona. </p></div></div>
</body></html> CSS:
h1, h2 {color:red}
DSD
Pataki Máté 18 / 67
Tartalom és megjelenítés elkülönítése
DSD
Pataki Máté 19 / 67
Jelöljük a strukturális elemeket
n Jelöljük a dokumentum nyelvét: lang="hu"n A fejezetcímeket jelöljük sorjában: <h1>, <h2>,
<h3>…n Listák legyenek lista típusúak: <ol>, <ul>, <li>n Használjuk rendesen a <noframe> elemet (ne az
legyen ott, hogy az ön böngészője nem támogatja)n Táblázatoknál
n Jelöljük a fejlécet: <th>n Foglaljuk össze a táblázat tartalmát
summary="Munkatársak fizetése"
DSD
Pataki Máté 20 / 67
Táblázatok linearizálása
12Nagy
14Szabó
18Molnár
KorNév
121418Kor
NagySzabóMolnárNév
<table summary=„Gyerekek kora" lang="hu"><tr><th>Név</th><th>Kor</th></tr> <tr><td>Molnár</td><td>18</td></tr> <tr><td>Szabó</td><td>14</td></tr> <tr><td>Nagy</td><td>12</td></tr> </table>
DSD
Pataki Máté 21 / 67
Gyengénlátók
n Nem mindig használnak felolvasóprogramotn Betűméret állítása
n pl.: CSS-ben %-ban megadni, vagyn különböző méretek biztosítása
n Nagy kontraszt (KOPI)
DSD
Pataki Máté 22 / 67
Kis betűméret – Explorer: Medium és Largest
DSD
Pataki Máté 23 / 67
Kis betűméret – Opera: 100% és 200%
DSD
Pataki Máté 24 / 67
Böngésző-használati statisztika
http://marketshare.hitslink.com/report.aspx?qprid=0 (2007. szeptember)
DSD
Pataki Máté 25 / 67
A Firefox Európában sokkal elterjedtebb
http://www.xitimonitor.com/en-us/browsers-barometer/firefox-july-
2007/index-1-2-3-102.html
DSD
Pataki Máté 26 / 67
MVGYOSZ honlapja Explorerben és Operában
http://www.mvgyosz.hu
DSD
Pataki Máté 27 / 67
Színvakok / színtévesztők
n Háttér-betű kontrasztarányn Csak szín ne hordozzon fontos információtn 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őn Nem színes kijelzők
n Régi gépn Mobiltelefonn PDA
DSD
Pataki Máté 28 / 67
Piros mezők kitöltése kötelező
DSD
Pataki Máté 29 / 67
Piros csillaggal jelölt mezők
DSD
Pataki Máté 30 / 67
n Hang ne hordozzon máshogy nem elérhetőinformációtn Hallássérültekn Zajos környezet (étterem, műhely)n Hangkártya nélküli gépek (munkahely)
n Videó mellett felirat vagy leírásn Hanghoz és zenéhez alternatív szöveges
tartalom
Hallássérültek
DSD
Pataki Máté 31 / 67
Videó és a beszéd teljes szövege
DSD
Pataki Máté 32 / 67
n Alternatív beviteli eszközökn Csak egérn Csak billentyűzetn Láb/szemegér
n Sok gépelés mellőzése (cookie)n Pontos pozícionálás gond lehet
n Kattintható felületek nagyok legyenekn Gyorsbillentyű használata
Mozgássérültek
DSD
Pataki Máté 33 / 67
Speciális billentyűzetek
DSD
Pataki Máté 34 / 67
Speciális billentyűzetek
Fejjel irányítható billentyűzet és egér (http://www.lomakkeyboard.com/)
Lábbal kezelhető
billentyűzet
DSD
Pataki Máté 35 / 67
Billentyűzetkezelő eszközök
DSD
Pataki Máté 36 / 67
Speciális egerek, lábegér, joystick
DSD
Pataki Máté 37 / 67
Szemmozgást észlelő mutatóeszköz
http://nipg.inf.elte.hu/headmouse/headmouse.html
DSD
Pataki Máté 38 / 67
Szívó-fújó irányítóeszköz
DSD
Pataki Máté 39 / 67
Pontos pozícionálás az almenü fekete sávjában
DSD
Pataki Máté 40 / 67
n Vezetni a felhasználót (kikapcsolható)n Mindig tudja hol tartn Visszajuthat a kiindulópontran Ikonok/jelek következetes használata
n Oldaltérképn Részletes súgó
Értelmi fogyatékosok
DSD
Pataki Máté 41 / 67
Oldaltérkép / menütérkép
DSD
Pataki Máté 42 / 67
Technológiailag megkülönböztetettek
n Technológiailag megkülönböztetettekn Eltérő képernyőméretn Elavult böngésző / operációs rendszern Gyenge hardware
DSD
Pataki Máté 43 / 67
Eltérő képernyőméret
n Képernyők >19’’n CNN 220px
n Mobiltelefonn Képernyőn Memórian Lapozás
n PDAn 320x200n 640x480
n Vízszintes görgetésn Kis betűk (nagyítás)
DSD
Pataki Máté 44 / 67
Mobil böngészés előretörése
Forrás: Nokia study, 2005.
A webezés a legnagyobb adatforgalmat genetáló szolgáltatás
DSD
Pataki Máté 45 / 67
Mobil böngészés előretörése
n T-Mobile Web'n'Walk (korlátlan hozzáférés bizonyos szolgáltatásokhoz): n 330 oldaletöltés havonta és felhasználónkéntn 199%-os bevételnövekedés az adatforgalomban (SMS
nélkül)n Forrás: Opera, 2006. április
n BBC n BBC: 2005-ben kétszeresére nőtt a mobil tartalmak iránti
kérések száman Közel 250 millió kérés napontan 28%-a a mobil felhasználóknak csak mobilról használja az
oldalt (PC-ről nem)n Forrás: BBC, 2005. november
DSD
Pataki Máté 46 / 67
Mobil böngészés előretörése
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
DSD
Pataki Máté 47 / 67
Mobil böngészés a WC-től a konyháig :-)
DSD
Pataki Máté 48 / 67
A mobiltelefon terjedése
DSD
Pataki Máté 49 / 67
Elavult böngésző / operációs rendszer
n Nem biztos, hogy van:n JavaScriptn Flashn Javan …
n http://www.fkf.hu/n Javascriptteln És nélküle
DSD
Pataki Máté 50 / 67
Gyenge hardware
n Gyenge hardware => elavult softwaren Lassú internet-kapcsolat (modem, mobil)
n Képek legyenek kicsiknKépből kirakott menü méretenHTML-ben átméretezett képek kerülése
n HTML kód tisztítása segíthetn Ajax sokat gyorsíthat
n Lassú processzor, kevés memórian Nagy méretű oldalakat lassan kezelikn Java appletek lassítják
DSD
Pataki Máté 51 / 67
Oldal mérete - letöltési sebesség
4,51457231071index.hu
1,961304567origo.hu
1,652258307microsoft.hu
1,651257664cnn.com
1,340200747bme.hu
1,032158500pannon.hu/egyeni
0,825127430iwiw.hu
0,384147erg.bme.hu
128kb/s ADSL (s)
5kb/s modemmel
(s)
Tömörítettméret (kb)
Főlapmérete (kb)Honlap címe
DSD
Pataki Máté 52 / 67
Speciális célcsoportok
n Speciális célcsoportokn Gyerekekn Idősekn Alacsony (informatikai) képzettségűekn Idegen nyelvek és kultúrák
DSD
Pataki Máté 53 / 67
Gyerekek
n Nem tud olvasni (Manósorozat)
n Sok választási lehetőség nem jó
n Vezetni kelln Könnyen elkalandozik a
figyelmen Mindenre rákattint
(legjobb tesztalany :-)
DSD
Pataki Máté 54 / 67
Idősek / alacsony képzettségűek
n Idősekn Betűméret változtatható legyenn Mozgó ikonok, reklámok, szövegek
n Elvonják a figyelmetn Fárasztják a szemet
n Alacsony (informatikai) képzettségűekn Felugró ablakok félrevezetikn Szakzsargon mellőzésen Súgó (ne informatikus írja, context sensitive)
DSD
Pataki Máté 55 / 67
Idegen nyelvek és kultúrák
n Cégeknél (idegen nyelvű vagy nyelven is)n Fogalmazás (Amazon.com, .de és .jp)n Dátum: 12/03/07 (nap/hó/év), 2007. március 12.n Karakterkészlet, jobbról balra írás
DSD
Pataki Máté 56 / 67
Technológiák
n Flashn Csak a nyitóoldal (FKF)n Alternatív tartalom (Harry Potter)
n JavaScriptn Alternatív lehetőségekn Kliens oldali ellenőrzés (is!)n CSS és/vagy JavaScript: DynDemo
n Applet és ActiveXn Nincs mindig engedélyezven Bizonyos esetekben szükséges (online játék)n Legtöbb esetben elkerülhető
DSD
Pataki Máté 57 / 67
Flash-sel és nélküle
DSD
Pataki Máté 58 / 67
DynDemo Internet Explorerben
DSD
Pataki Máté 59 / 67
DynDemo Lynx szöveges böngészőben
DSD
Pataki Máté 60 / 67
DynDemo Operában, JS nélkül
DSD
Pataki Máté 61 / 67
DynDemo Operában képek nélkül
DSD
Pataki Máté 62 / 67
DynDemo Operában szöveges módban
DSD
Pataki Máté 63 / 67
Működés ellenőrzése
n Próbáljuk ki több böngészőben is:n Internet Explorer (több gépen több verzió)n Opera (több verzió is elmegy egy gépen)n Firefoxn Netscapen Safari (Apple)n Lynx (szöveges böngésző)n Mobiltelefon böngészője
DSD
Pataki Máté 64 / 67
Működés ellenőrzése (IE6, Opera8, Opera5)
DSD
Pataki Máté 65 / 67
W3C Validator
DSD
Pataki Máté 66 / 67
W3C Validator