W3C WAI, avagy Weblapok akadálymentesítése · 2014-08-04 · DSD Pataki Máté 5 / 62 W3C Magyar...

DSD

W3C WAI, avagy

Weblapok akadálymentesítése

Pataki Máté

DSD

Pataki Máté 2 / 62

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ű ő

DSD


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

DSD


W3C szabványok

DSD


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

DSD


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

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

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

DSD


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ő

DSD


WCAG 1.0 Checklist

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

DSD


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

DSD


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)

http://www.budapest.hu/vak

DSD


Képek elnevezése

DSD


Linkek elnevezése legyen egyedi, és értelmes

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}

DSD


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

DSD


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"

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

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)

http://kopi.sztaki.hu/index.php?high_cont=0

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 (2006. február)

DSD


MVGYOSZ honlapja Operában és Explorerben

http://mvgyosz.budapest.hu/Engine.aspx

DSD


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

DSD


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

DSD


Piros csillaggal jelölt mez kő

DSD


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

Hallássérültek

DSD


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

DSD


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ű

Mozgássérültek

DSD


Speciális billenty zetekű

DSD


Billenty zetkezel eszközű ő ök

DSD


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

DSD


Szemmozgást észlel mutatóeszköző

DSD


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

DSD


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

DSD


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ó

Értelmi fogyatékosok

DSD


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

DSD


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

DSD


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)ű

http://www.cnn.com/

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



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

DSD



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

DSD


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

DSD


Elavult böngész / operációs rendszerő

Nem biztos, hogy van: JavaScript Flash Java …

http://www.fkf.hu/ Javascripttel És nélküle

http://www.fkf.hu/

http://www.fkf.hu/

DSD


Gyenge hardware

Gyenge hardware => elavult software Lassú internet-kapcsolat (modem, mobil)

Képek legyenek kicsikKépb l kirakott menüő méreteHTML-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

DSD


Oldal mérete - letöltési sebesség

39,4151,4197757bme.hu

44,2101,8221509origo.hu

46,898,4234492cnn.com

39,895,6199478pannon.hu/egyeni

68,694,2343471index.hu

19,430,697153microsoft.hu

8,69,64348erg.bme.hu

Tömörített sebessége (s)

Modemes, 5kb/s letöltés (s)

Tömörített méret (kb)

Főlap mérete (kb)Honlap címe

DSD


Speciális célcsoportok

Speciális célcsoportok Gyerekek Id sekő Alacsony (informatikai) képzettség ekű Idegen nyelvek és kultúrák

DSD


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 :-)

DSD


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)

DSD


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

http://www.amazon.com/

http://www.amazon.de/

http://www.amazon.jp/

http://www.amazon.jp/

DSD


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ő

http://www.fkf.hu/

http://www.scholastic.com/harrypotter



http://www.stewartspeak.com/dtr/demo/

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ű ő

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/)

http://webxact.watchfire.com/

http://validator.w3.org/

DSD


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

DSD


Firefox – Rendes megjelenítés

DSD


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

DSD


W3C Validator

DSD


Email: Mate.Pataki KUKAC w3c.hu

http://www.w3c.hu

Köszönöm a figyelmet!

W3C WAI, avagy Weblapok akadálymentesítése · 2014-08-04 · DSD Pataki Máté 5 / 62 W3C Magyar...

Documents

Transcript of W3C WAI, avagy Weblapok akadálymentesítése · 2014-08-04 · DSD Pataki Máté 5 / 62 W3C Magyar...