Web design. Accessibility



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

WEBES ALKALMAZÁSOK AKADÁLYMENTESÍTÉSE - A TÁVMUNKA SZEMSZÖGÉBŐL. Vigh György informatikai szakértő Felnőttképzés Fejlesztéséért Közhasznú Egyesület

Rámpát a honlapokra úton az akadálymentes honlapok felé Pataki Máté

DSD. A webes akadálymentesítés helyzete Magyarországon Pataki Máté DSD. Pataki Máté 1/ 41

Webes alkalmazások akadálymentesítése

Arculat fontossága & Akadálymentesítés

Krug első szabálya. Don t make me think! Ne kelljen gondolkozni! Amikor ránézünk egy web oldalra, legyen

Összesítés. Látogatások száma Oldalak Találatok Adatmennyiség (11.08 Oldalak/Látogatás)

DSD Akadálymentesítés mobilwebes környezetben

Hogyan böngésznek a fogyatékkal élő emberek?

I. sz. 220 körül Origenész összeállítja Hexapla címen az Ószövetség hat különbözı fordítását

Statisztikai alap tihanyipercek.hu (201

DSD. A W3C Magyar Iroda Akadálymentesítési Törekvései Pataki Máté, Kovács László

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

Széchenyi István Egyetem. Műszaki Tudományi Kar. Informatikai és Villamosmérnöki Intézet Távközlési Tanszék. Villamosmérnöki szak HTML

1. Áttekintés 1.1 Figyelmeztetések (1) Az új akkumulátorok optimális teljesítményüket 2-3 feltöltési és lemerítési ciklus után érik el.

Akadálymentesítés és az egyetemes tervezés (Accessibility and the universal design)

Szoftver-ergonómiára vonatkozó szabvány, avagy ISO 9241

W3C WAI. Weblapok Akadálymentesítése

Üdvözli Önöket A PGY3 tantárgy! Bakay Árpád dr. NETvisor kft (30) arpad.bakay@netvisor.hu

Statisztikai alap kia.hu (2006)

ERGON: görög eredetű szó Jelentése: cselekvés, tevékenység, tett

Mobil eszközök programozása Mivel is kezdjem?

Mobil eszközök programozása Mivel is kezdjem?

A993W LCD MONITOR. Felhasználói Kézikönyv

Java alapú hordozható kliens vakok számára, hálózati szolgáltatások elérésére

SZET GYAK1: Követelmények ellenőrzése

11215 (7.87 Oldalak/Látogatás)

E L Ő T E R J E S Z T ÉS

T2491Wd LCD MONITOR. Felhasználói Kézikönyv

E-learning tananyagfejlesztő Multimédia-alkalmazás fejlesztő

A fogyatékossággal élő személyek politikai részvételhez való joga

CNS Moon. Felhasználói kézikönyv

Statisztikai alap kia.hu (2009) - main

A szóbeli vizsgafeladatot ha a feladat indokolja a szaktanárok által összeállított mellékletek, segédanyagként felhasználható források egészítik ki.

Digitális tananyag, e-learning, különbségek, definíciók

SZABADKAI MŰSZAKI SZAKFŐISKOLA. E-mobil prezentáció dokumentációja SZABADKA, 2015.

Távvezérlés...ahogy megálmodta PROFESSZ IONÁLIS ELEKTRONIKUS TÁVVEZÉRLÉS

A293Wd LCD MONITOR. Felhasználói Kézikönyv

3,5 ÉRINTŐGOMBOS LCD TFT VIDEO KAPUTELEFON SZÍNES CMOS KAMERÁVAL CIKKSZÁM: DF-636TS + OUT9 DF-629TS + OUT9

9 Technikai információ, specifikáció 10 Kapcsolat. Tartalom. Megjelenés-, átkattintás-, egyedilátogató-alapú árak. Időalapú megjelenések árai

1 Pillanatfelvétel gomb Nyomja meg a Pillanatfelvétel gombot képek készítéséhez.

HTML é s wéblapféjlészté s

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

Vegyünk fel egy UX-est, most mindenki azt csinálja

A TCP / IP Digital rendszer, telepítés és beállítások, instrukciók. 300 Rendszer, 600 Plus Rendszer és 700 rendszer

Walk-DVR-CF. StP Műszaki Fejlesztő, Gyártó és Kereskedelmi Kft. StP Kft. ÁLTALÁNOS LEÍRÁS

LEGO robotok. IV. rész

Ûrlapkitöltés használata során megjegyzi az oldalakhoz tartozó beviteli mezõk értékeit, mellyel nagyban meggyorsítja

MIRASYS NVR általános ismertető

*Ne használja a készüléket a következő esetekben: túl hideg vagy túl meleg helyen, nedves, poros

Koobe IRIS. Használati utasítás

Babafalva.hu médiaajánlat

Olyan eszközre van szükség, amelynél a webszerkesztés folyamatát a fejlesztő, nem pedig a program vezérli

Tartalom Utasítások a kézikönyv használatához... 2 Rendeltetésszerű használat... 2 Csomag... 3 Biztonsági utasítások... 4 Üzembehelyezés...

Magyar. Look 1320 Wtulajdonságai. Look 1320 telepítése. 1. Telepítse először az illesztőprogramot, majd csatlakoztassa a Look

Nemzeti Fejlesztési és Gazdasági Minisztérium támogatásával megvalósuló KKC-2008-V számú projekt B2CR ONLINE KOMMUNIKÁCIÓ

HORSCH DrillManager ME

TX-L47WT60E TX-L47WTW60 TX-L55WT60E TX-L55WTW60 SÚGÓ

Integrált téradatbázis alapú városirányítási rendszerek

Picture Style Editor verzió Kezelési kézikönyv

A jövő Internetje. HTE Közgyűlés május 20. Dr. Szabó Róbert, e. docens.

Biztonsági útmutató Tartozékok és kiegészítõk A monitor használata Függelék

BARANGOLÁS AZ E-KÖNYVEK BIRODALMÁBAN Milyen legyen az elektonikus könyv?

Tudományos célú videoportál

Újságíró I. Újságíró, konferanszié Fotóriporter Újságíró, konferanszié

Programozás III GRAFIKA RAJZOLÁS SWING FELÜLETEN RAJZOLÁS GRAFIKA HASZNÁLATA. Rajzolni az awt csomag Graphics osztályának metódusaival tudunk.

Libri.hu médiaajánlat

DRUPAL 7. újdonságai. Hojtsy Gábor Drupal Hétvége, Budapest november 14. Angela Byron fóliái alapján

MP4 lejátszó használati utasítás

Kanadai DOC közlemény Fontos biztonsági utasítások fejezet Üzembehelyezés A monitor kicsomagolása... 4

Minden jog fenntartva, beleértve bárminemű sokszorosítás, másolás és közlés jogát is.

Fejlesztési tapasztalatok multifunkciós tananyagok előállításával kapcsolatban Nagy Sándor

adottságai A Moodle programcsomag

1. ábra Mester oldal alapján különböző témákkal létrehozott webhely oldalai

Kibővített használati útmutató

Weboldalak fejlesztése mobil eszközökre

Használati útmutató. Klímaszerviz-készülék

Nokia 2220 slide - Felhasználói kézikönyv

STEADYPRES frekvenciaváltó ismertető

TELJESKÖRŰ (KOMPLEX) AKADÁLYMENTESÍTÉSI AJÁNLÁS A Magyar Szállodaszövetség kérésére összeállította: Fogyatékosügyi Kommunikációs Intézet

A Nokia SU-5 Image Viewer használati utasítása kiadás

Site design. Ez határozza meg a keretet. A fő cél. Meg kell határozni ki célközönség Mit akarunk elmondani Hogyan rendezzük el a tartalmat

Sorsz. Feladat Időtart. Ütemezés Új arculattal jelenjen meg a portál: főoldalhoz 1.1

KAPUVÁRI KISTÉRSÉGI TÁMOGATÓ SZOLGÁLAT ÉVI BESZÁMOLÓJA

VirtualBox, Debian telepítés

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat

Telefonhívó riasztó szett

HTML 5 - Start. Turóczy Attila Livesoft Kft

Minden jog fenntartva, beleértve bárminemű sokszorosítás, másolás és közlés jogát is.

9. MODUL WEBKEZDŐ. A vizsgafeladat megoldásához kizárólag a választott webkészítő program, illetve jegyzettömb (editor) használható.

KOPI. KOPI Online Plágiumkereső és Információs Portál DSD. Pataki Máté MTA SZTAKI. Elosztott Rendszerek Osztály

MVC Java EE Java EE Kliensek JavaBeanek Java EE komponensek Web-alkalmazások Fejlesztői környezet. Java Web technológiák

W3C-WAI. Weblapok akadálymentesítése

INFORMATIKAI ALAPISMERETEK

Happyfaces.hu médiaajánlat

Statisztikai alap (2006) - main

HP 23tm érintőképernyős monitor. Felhasználói útmutató

Átírás:

Web design Accessibility

A Web Az egyik definíció szerint a Web: minden ember számára (fizikai és technológiai szinttől és lehetőségektől függetlenül) információt közlő médium Látás- és hallássérültek is tudják használni Mozgás koordinációs problémáktól szenvedők is Követelmények és szabályok Web Accessibility Initiative (WAI) USA, Section 508 of the Rehabilitation Act,1973

Problémák vakok esetén Képek melyeknek nincs alternatív szövege Komplex képek, melyek nincsennek megfelelően elmagyarázva Video szöveg nélkül Táblázatok melyeknek nincs értelme ha sorba olvassuk a mezőket Keretek (FRAME) melyeknek nincs NOFRAME alternatívája

Problémák látási probléma esetén Fix méretű betűk, melyeket nem lehet skálázni Web oldalok, melyeket ha nagyban nézünk szétesik a szerkezete Kis szín kontrasztokat használó oldalak Szövegek melyek képként jelennek meg Nagyítás esetén nincs elválasztás

Problémák színvakság esetén Csak színnel jelölni valamilyen szöveget Szöveg és háttérszín között kicsi a kontraszt Browser, amely nem támogatja Style Sheet felülírását

Problémák süketek esetén Audio file-ok nem megfelelő címkézése Tartalomhoz kapcsolódó képek hiánya, csak szöveg Az ember első nyelve valószínűleg a jelnyelv!!! Világos, egyszerű nyelv hiánya Hang bemenet egy oldalon

Problémák motorikus betegség esetén Időkorlátozott válasz megkövetelése egy web oldalon Browser mely nem támogatja a billentyűről történő navigálást Form-ok, amelyeken nem lehet a TAB-al lépkedni

Problémák szellemi fogyatékosok esetén Szükségtelenől komplex web oldalak Grafika hiánya Konzisztens szerkezet, oldalak hiánya Vizuális és audio zavaró elemek az oldalon

Problémák rohamot kiváltó betegség esetén Olyan vizuális vagy audio elem használata (adott frekvencia) mely kiválthatja a rohamot

W3C Megközelítés Web Accessibility Initiative http://www.w3.org/wai Ajánlások Web content: WCAG Authoring tool: ATAG User agent: UUAG

Megközelítés tartalom fejlesztők felhasználók

Alapkoncepció Ha szövegen kívűl bármilyen formában közlünk valamilyen információt, akkor biztosítani kell egy másik lehetőséget is HTML-nél már gondoltak erre ALT tag, amit a speciális szoftverek fel tudnak olvasni Akkor is használható, ha szöveges browsert használunk, vagy a képek letöltését kikapcsoljuk

Megoldások A nem képi elemeknek szöveges megfelelője legyen Repetitív navigációs linkek elkerülhetők legyenek Plug-in -ek és applet -ek is megfeleljenek a követelményeknek Minden multimédiás elemen a képi információt összhangba hozni az aláírásokkal

Színek Győződjünk meg róla, hogy ha valamit a színekkel közlünk az színek nélkül is elérhető legyen Férfiak kb. 8%-a színtévesztő Nők kb. 0.5%-a színtévesztő Legtöbb probléma a zöld színek tartományában van

Képek Minden nem szöveges információnak legyen szöveges megfelelője (HTML ALT tag) Akár teljes képmagyarázat

Képek

ALT tag Jó alternatív szöveget írni nagyon nehéz Ne csak azt írjuk le hogy mi van a képen hanem hogy esetleg mire való Pl. szerepe a navigálásban <IMG SRC="up.gif" ALT="Go to top of page">

GIF spacer Ha GIF képet használunk az elemek közötti távolság meghatározására, vagy aminek nincs szerepe (bullet point), üres ALT tag-et használjunk: Így a felolvasó szoftverek nem fogják figyelembe venni Egyébként azt olvassa image, image, image... <IMG SRC="pixel.gif" HEIGHT="1" WIDTH ="1" ALT="" HSPACE="5">

Csak szöveges oldalak Alternatívaként legyen lehetőség olyan oldalakra amelyek csak szövegesek és ugyanazt az információt tartalmazzák Oldal teteje Oldal alja

Eszközök Szöveges browser Speciális billentyűzet Braille írást megjelenítő, mely a képernyőről olvas Képernyő nagyító