W3C WAI, avagy Weblapok akadálymentesítése
Témakörök A World Wide Web Consortium (W3C) 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 2 / 62
A World Wide web Consortium (W3C) A webszabványok fejlesztésének nyilvános fóruma 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 3 / 62
W3C szabványok 4 / 62
W3C Magyar Iroda 16 helyi iroda, 2002-tő l: W3C Magyar Iroda 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 5 / 62
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 6 / 62
WCAG 1.0 Web Content Accessibility Guidelines 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 7 / 62
WCAG 1.0 Checklist http://www.w3.org/tr/wai-webcontent/full-checklist.html 8 / 62
Fogyatékossággal élő k Fogyatékossággal élő k Vakok Gyengénlátók Színvakok Hallássérültek Mozgássérültek Értelmi fogyatékosok 9 / 62
Vakok Külön lap? Budapest Portál 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) 10 / 62
Képek elnevezése 11 / 62
Linkek elnevezése legyen egyedi, és értelmes 12 / 62
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-xhtml120000126/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> CSS: </html> h1, h2 {color:red} 13 / 62
Tartalom és megjelenítés elkülönítése 14 / 62
Jelöljük a strukturális elemeket Jelöljük a dokumentum nyelvét: lang="hu" A fejezetcímeket jelöljük sorjában: <h1>, <h2>, <h3> Listák legyenek lista típusúak: <ol>, <ul>, <li> 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: <th> Foglaljuk össze a táblázat tartalmát summary="munkatársak fizetése" 15 / 62
Táblázatok linearizálása Név Kor Név Molnár 18 Kor Szabó 14 Nagy 12 Molnár Szabó Nagy 18 14 12 <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> 16 / 62
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) 17 / 62
Kis betű méret Explorer: Medium és Largest 18 / 62
Kis betű méret Opera: 100% és 200% 19 / 62
Böngésző -használati statisztika http://marketshare.hitslink.com/report.aspx?qprid=0 (2006. február) 20 / 62
MVGYOSZ honlapja Operában és Explorerben http://mvgyosz.budapest.hu/engine.aspx 21 / 62
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 22 / 62
Piros mező k kitöltése kötelező 23 / 62
Piros csillaggal jelölt mező k 24 / 62
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 25 / 62
Videó és a beszéd teljes szövege 26 / 62
Mozgássérültek 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 27 / 62
Speciális billentyű zetek 28 / 62
Billentyű zetkezelő eszközök 29 / 62
Speciális egerek, lábegér, joystick 30 / 62
Szemmozgást észlelő mutatóeszköz 31 / 62
Szívó-fujó irányítóeszköz 32 / 62
Pontos pozícionálás az almenü fekete sávjában 33 / 62
É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ó 34 / 62
Oldaltérkép / menütérkép 35 / 62
Technológiailag megkülönböztetettek Technológiailag megkülönböztetettek Eltérő képernyő méret Elavult böngésző / operációs rendszer Gyenge hardware 36 / 62
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) 37 / 62
Mobil böngészés elő retörése A webezés a legnagyobb adatforgalmat genetáló szolgáltatás Forrás: Nokia study, 2005. 38 / 62
Mobil böngészés elő retörése T-Mobile Web'n'Walk (korlátlan hozzáférés bizonyos 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 39 / 62
Mobil böngészés elő retörése 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 40 / 62
Mobil böngészés a WC-tő l a konyháig :-) 41 / 62
Elavult böngésző / operációs rendszer Nem biztos, hogy van: JavaScript Flash Java http://www.fkf.hu/ Javascripttel És nélküle 42 / 62
Gyenge hardware Gyenge hardware => elavult software 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 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 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 Modemes, 5kb/s letöltés (s) Tömörített sebessége (s) 44 / 62
Speciális célcsoportok Speciális célcsoportok Gyerekek Idő sek Alacsony (informatikai) képzettségű ek Idegen nyelvek és kultúrák 45 / 62
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 :-) 46 / 62
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) 47 / 62
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 48 / 62
Technológiák Flash Csak 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ő 49 / 62
Flash-sel és nélküle 50 / 62
DynDemo Internet Explorerben 51 / 62
DynDemo Lynx szöveges böngésző ben 52 / 62
DynDemo Operában, JS nélkül 53 / 62
DynDemo Operában képek nélkül 54 / 62
DynDemo Operában szöveges módban 55 / 62
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/) W3C Validator (http://validator.w3.org/) 56 / 62
Mű ködés ellenő rzése (IE6, Opera8, Opera5) 57 / 62
Firefox Rendes megjelenítés 58 / 62
Sebességtesztelés - Netlimiter 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 59 / 62
W3C Validator 60 / 62
W3C Validator 61 / 62
Köszönöm a figyelmet! http://www.w3c.hu Email: Mate.Pataki KUKAC w3c.hu 62 / 62