W3C WAI, avagy weblapok akadálymentesítése · 2014-08-04 · DSD Pataki Máté 5/ 67 W3C Magyar Iroda n 16 helyiiroda, 2002-től: W3C Magyar Iroda n MTA SZTAK-banműködik n Tevékenységeink,

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


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


Egymásra épülő W3C szabványok

DSD


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


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

http://www.w3.org/WAI/

DSD


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


WCAG 1.0 Checklist

http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

DSD


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


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


http://www.budapest.hu/vak

http://www.budapest.hu/vak

DSD


http://www.budapest.hu

http://www.budapest.hu

DSD


Vakok


n Beszédes linkekn Pl.: a Firefox 1.5 letöltésen Ugyanolyan nevű linkek kerülése

DSD


Linkek elnevezése legyen egyedi, és értelmes

DSD


Vakok


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


Képek elnevezése

DSD


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}

http://www.w3.org/TR/2000/REC-xhtml1

http://www.w3.org/1999/xhtml

http://www.bme.hu

DSD


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

DSD


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


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


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


Kis betűméret – Explorer: Medium és Largest

DSD


Kis betűméret – Opera: 100% és 200%

DSD


Böngésző-használati statisztika

http://marketshare.hitslink.com/report.aspx?qprid=0 (2007. szeptember)

http://marketshare.hitslink.com/report.aspx?qprid=0(2007

DSD


A Firefox Európában sokkal elterjedtebb

http://www.xitimonitor.com/en-us/browsers-barometer/firefox-july-

2007/index-1-2-3-102.html

http://www.xitimonitor.com/en

DSD


MVGYOSZ honlapja Explorerben és Operában

http://www.mvgyosz.hu

http://www.mvgyosz.hu

DSD


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


Piros mezők kitöltése kötelező

DSD


Piros csillaggal jelölt mezők

DSD


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


Videó és a beszéd teljes szövege

DSD


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


Speciális billentyűzetek

DSD


Speciális billentyűzetek

Fejjel irányítható billentyűzet és egér (http://www.lomakkeyboard.com/)

Lábbal kezelhető

billentyűzet

http://www.lomakkeyboard.com/)

DSD


Billentyűzetkezelő eszközök

DSD


Speciális egerek, lábegér, joystick

DSD


Szemmozgást észlelő mutatóeszköz

http://nipg.inf.elte.hu/headmouse/headmouse.html

http://nipg.inf.elte.hu/headmouse/headmouse.html

DSD


Szívó-fújó irányítóeszköz

DSD


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

DSD


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


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

DSD


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


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


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



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



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


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

DSD


A mobiltelefon terjedése

DSD


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

http://www.fkf.hu/

DSD


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


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


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


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


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


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


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


Flash-sel és nélküle

DSD


DynDemo Internet Explorerben

DSD


DynDemo Lynx szöveges böngészőben

DSD


DynDemo Operában, JS nélkül

DSD


DynDemo Operában képek nélkül

DSD


DynDemo Operában szöveges módban

DSD


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


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

DSD


W3C Validator

DSD


W3C Validator

DSD


Email: [email protected]

http://www.w3c.hu

Köszönöm a figyelmet!

mailto:[email protected]

http://www.w3c.hu

Documents

W3C WAI, avagy weblapok akadálymentesítése · 2014-08-04 · DSD Pataki Máté 5/ 67 W3C Magyar Iroda n 16 helyiiroda, 2002-től: W3C Magyar Iroda n MTA SZTAK-banműködik n Tevékenységeink,