Web design. Accessibility

Átírás

1 Web design Accessibility

2 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 W3C Megközelítés Web Accessibility Initiative Ajánlások Web content: WCAG Authoring tool: ATAG User agent: UUAG

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

12 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

13 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

14 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

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

16 Képek

17 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">

18 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">

19 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

20 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ó