W3C WAI, avagy Weblapok akadálymentesítése Pataki Máté
Témakörök A World Wide Web Consortium (W3C) W3C Magyar Iroda W3C -Web AccessibilityInitiative (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/ 67
A World Wide web Consortium (W3C) A webszabványokfejleszté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 Pataki Máté 3/ 67
Egymásra épülő W3C szabványok Pataki Máté 4/ 67
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 Pataki Máté 5/ 67
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 (2007. máj. 17.) Részletesebb útmutató Understanding WCAG 2.0 Technológiák sokszínűsége Szélesebb közönségnek Pataki Máté 6/ 67
WCAG 1.0 Web Content Accessibility Guidelines Priority 1 (must) Pl.: szöveges megfelelő biztosítása minden képhez Priority 2 (should) Pl.: style sheet használata (tartalom-megjelenítés) Priority 3 (may) Pl.: fontos linkekhez gyorsbillentyű rendelése Gépi és kézi ellenőrzés Pataki Máté 7/ 67
WCAG 1.0 Checklist http://www.w3.org/tr/wai-webcontent/full-checklist.html Pataki Máté 8/ 67
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 Pataki Máté 9/ 67
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 Pataki Máté 10 / 67
http://www.budapest.hu/vak Pataki Máté 11 / 67
http://www.budapest.hu Pataki Máté 12 / 67
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 Pataki Máté 13 / 67
Linkek elnevezése legyen egyedi, és értelmes Pataki Máté 14 / 67
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) Pataki Máté 15 / 67
Képek elnevezése Pataki Máté 16 / 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} Pataki Máté 17 / 67
Tartalom és megjelenítés elkülönítése Pataki Máté 18 / 67
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" Pataki Máté 19 / 67
Táblázatok linearizálása Név Kor Név Molnár Szabó Nagy Molnár 18 Kor 18 14 12 Szabó Nagy 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> Pataki Máté 20 / 67
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) Pataki Máté 21 / 67
Kis betűméret Explorer: Medium és Largest Pataki Máté 22 / 67
Kis betűméret Opera: 100% és 200% Pataki Máté 23 / 67
Böngésző-használati statisztika http://marketshare.hitslink.com/report.aspx?qprid=0 (2007. szeptember) Pataki Máté 24 / 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 Pataki Máté 25 / 67
MVGYOSZ honlapja Explorerben és Operában http://www.mvgyosz.hu Pataki Máté 26 / 67
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 Pataki Máté 27 / 67
Piros mezők kitöltése kötelező Pataki Máté 28 / 67
Piros csillaggal jelölt mezők Pataki Máté 29 / 67
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 Pataki Máté 30 / 67
Videó és a beszéd teljes szövege Pataki Máté 31 / 67
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 Pataki Máté 32 / 67
Speciális billentyűzetek Pataki Máté 33 / 67
Speciális billentyűzetek 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 Pataki Máté 35 / 67
Speciális egerek, lábegér, joystick Pataki Máté 36 / 67
Szemmozgást észlelő mutatóeszköz http://nipg.inf.elte.hu/headmouse/headmouse.html Pataki Máté 37 / 67
Szívó-fújó irányítóeszköz Pataki Máté 38 / 67
Pontos pozícionálás az almenü fekete sávjában Pataki Máté 39 / 67
É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ó Pataki Máté 40 / 67
Oldaltérkép / menütérkép Pataki Máté 41 / 67
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 Pataki Máté 42 / 67
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) 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 Forrás: Nokia study, 2005. Pataki Máté 44 / 67
Mobil böngészés előretörése T-Mobile Web'n'Walk (korlátlan hozzáférés bizonyos szolgáltatásokhoz): BBC 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: 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é 45 / 67
Mobil böngészés előretörése A 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 Pataki Máté 46 / 67
Mobil böngészés a WC-től a konyháig :-) Pataki Máté 47 / 67
A mobiltelefon terjedése Pataki Máté 48 / 67
Elavult böngésző / operációs rendszer Nem biztos, hogy van: JavaScript Flash Java http://www.fkf.hu/ Javascripttel És nélküle Pataki Máté 49 / 67
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 Ajaxsokat gyorsíthat Lassú processzor, kevés memória Nagy méretű oldalakat lassan kezelik Java appletek lassítják Pataki Máté 50 / 67
Oldal mérete - letöltési sebesség Honlap címe Főlap mérete (kb) Tömörített méret (kb) 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 Speciális célcsoportok Gyerekek Idősek Alacsony (informatikai) képzettségűek Idegen nyelvek és kultúrák Pataki Máté 52 / 67
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 :-) Pataki Máté 53 / 67
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 Felugró ablakok félrevezetik Szakzsargon mellőzése Súgó (ne informatikus írja, context sensitive) Pataki Máté 54 / 67
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/07 (nap/hó/év), 2007. március 12. Karakterkészlet, jobbról balra írás Pataki Máté 55 / 67
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ő Pataki Máté 56 / 67
Flash-sel és nélküle Pataki Máté 57 / 67
DynDemo Internet Explorerben Pataki Máté 58 / 67
DynDemo Lynx szöveges böngészőben Pataki Máté 59 / 67
DynDemo Operában, JS nélkül Pataki Máté 60 / 67
DynDemo Operában képek nélkül Pataki Máté 61 / 67
DynDemo Operában szöveges módban Pataki Máté 62 / 67
Működés ellenőrzése Próbáljuk ki több böngészőben is: Internet Explorer (több gépen több verzió) Opera (több verzió is elmegy egy gépen) Firefox Netscape Safari (Apple) Lynx (szöveges böngésző) Mobiltelefon böngészője Pataki Máté 63 / 67
Működés ellenőrzése (IE6, Opera8, Opera5) Pataki Máté 64 / 67
W3C Validator Pataki Máté 65 / 67
W3C Validator Pataki Máté 66 / 67
Köszönöm a figyelmet! http://www.w3c.hu Email: Mate.Pataki@w3c.hu Pataki Máté 67 / 67