DSD W3C WAI, avagy Weblapok akadálymentesítése

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "DSD W3C WAI, avagy Weblapok akadálymentesítése"

Amanda Patakiné
8 évvel ezelőtt
Látták:

1 W3C WAI, avagy Weblapok akadálymentesítése

2 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

3 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 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

4 W3C szabványok 4 / 62

5 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

6 W3C - Web Accessibility Initiative (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

7 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

8 WCAG 1.0 Checklist 8 / 62

9 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

10 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

11 Képek elnevezése 11 / 62

12 Linkek elnevezése legyen egyedi, és értelmes 12 / 62

13 Tartalom és megjelenítés elkülönítése <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <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=" 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

14 Tartalom és megjelenítés elkülönítése 14 / 62

15 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

16 Táblázatok linearizálása Név Kor Név Molnár 18 Kor Szabó 14 Nagy 12 Molnár Szabó Nagy <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

17 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

18 Kis betű méret Explorer: Medium és Largest 18 / 62

19 Kis betű méret Opera: 100% és 200% 19 / 62

Böngésző -használati statisztika http://marketshare.

20 Böngésző -használati statisztika (2006. február) 20 / 62

21 MVGYOSZ honlapja Operában és Explorerben 21 / 62

22 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

23 Piros mező k kitöltése kötelező 23 / 62

24 Piros csillaggal jelölt mező k 24 / 62

25 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

26 Videó és a beszéd teljes szövege 26 / 62

27 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

28 Speciális billentyű zetek 28 / 62

29 Billentyű zetkezelő eszközök 29 / 62

30 Speciális egerek, lábegér, joystick 30 / 62

31 Szemmozgást észlelő mutatóeszköz 31 / 62

32 Szívó-fujó irányítóeszköz 32 / 62

33 Pontos pozícionálás az almenü fekete sávjában 33 / 62

34 É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

35 Oldaltérkép / menütérkép 35 / 62

36 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

37 Eltérő képernyő méret Képernyő k >19 CNN 220px Mobiltelefon Képernyő Memória Lapozás PDA 320x x480 Vízszintes görgetés Kis betű k (nagyítás) 37 / 62

38 Mobil böngészés elő retörése A webezés a legnagyobb adatforgalmat genetáló szolgáltatás Forrás: Nokia study, / 62

39 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, á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, november 39 / 62

40 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

41 Mobil böngészés a WC-tő l a konyháig :-) 41 / 62

42 Elavult böngésző / operációs rendszer Nem biztos, hogy van: JavaScript Flash Java Javascripttel És nélküle 42 / 62

43 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

44 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 ,6 8,6 microsoft.hu ,6 19,4 index.hu ,2 68,6 pannon.hu/egyeni ,6 39,8 cnn.com ,4 46,8 origo.hu ,8 44,2 bme.hu ,4 39,4 Modemes, 5kb/s letöltés (s) Tömörített sebessége (s) 44 / 62

45 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

46 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

47 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

48 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), március 12. Karakterkészlet, jobbról balra írás 48 / 62

49 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

50 Flash-sel és nélküle 50 / 62

51 DynDemo Internet Explorerben 51 / 62

52 DynDemo Lynx szöveges böngésző ben 52 / 62

53 DynDemo Operában, JS nélkül 53 / 62

54 DynDemo Operában képek nélkül 54 / 62

55 DynDemo Operában szöveges módban 55 / 62

56 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 ( W3C Validator ( 56 / 62

57 Mű ködés ellenő rzése (IE6, Opera8, Opera5) 57 / 62

58 Firefox Rendes megjelenítés 58 / 62

59 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

60 W3C Validator 60 / 62

61 W3C Validator 61 / 62

62 Köszönöm a figyelmet! Mate.Pataki KUKAC w3c.hu 62 / 62

Hasonló dokumentumok

DSD W3C WAI, avagy Weblapok akadálymentesítése

DSD W3C WAI, avagy Weblapok akadálymentesítése 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