akadálymentesítés és az egyetemes tervezés ( accessibility and the universal design)
DESCRIPTION
Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design). Akadályozottak lehetnek. Egy honlap vagy számítógépes program használata nemcsak egy mozgássérült, vak vagy siket embernek jelenthet gondot, hanem például annak is, aki - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/1.jpg)
Akadálymentesítés és az egyetemes tervezés
(Accessibility and the universal design)
![Page 2: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/2.jpg)
• Egy honlap vagy számítógépes program használata nemcsak egy – mozgássérült, – vak vagy – siket embernek
jelenthet gondot,
• hanem például annak is, aki – csak éppen ismerkedik a technológiával, aki – nem rendelkezik a legmodernebb hardver felszereléssel, esetleg– mobiltelefonját használja böngészésre, vagy aki csak egyszerűen– fáradt és nem tud annyira koncentrálni.
Akadályozottak lehetnek
![Page 3: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/3.jpg)
Akadálymentesíteni kívánt csoportok
I. Fogyatékos személyek 1. Vak felhasználók 2. Gyengénlátó emberek 3. Színtévesztő és színvak
felhasználók 4. Hallássérült emberek 5. Mozgáskorlátozott felhasználók 6. Értelmi fogyatékos emberek
II. Technológiailag megkülönböztetett felhasználók 1. Átlagostól eltérő képernyőméret 2. Elavult böngésző 3. Gyenge hardver
III. Speciális célcsoportok Gyerekek Idős emberek Alacsony képességű felhasználók Idegen nyelvek és kultúrák képviselői Anyanyelvi olvasó – helyesírás
![Page 4: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/4.jpg)
Amire igazán figyelni kellKépi információk esetén legyen megadva szöveges alternatíva, vagy bő leírásVideó esetén legyen megadva szöveges leírás [leírva mi látható a videófilmben]
Minden fontos információ szövegesen is elérhető (felolvasó programok) legyenJelentésjelölő tag-ek használataBeszédes, egyedi elnevezésű linkekTáblázat címe, összegző leírás, fejrészek megjelölés, felolvasási sor, bő leírás
TAB billentyűvel való végighaladás biztosítása
Állítható betűméretek, Jó minőségű, nagyméretű képek, látható ikonok, látható linkek
Csak szín ne hordozzon másképp nem elérhető információtartalmatKellően kontrasztos színösszeállítás/képekÁllítható háttérszín/betűszín
látás
vak
gyengénlátó
színtévesztő
Erős napsütés, gyenge átviteli sebesség, monokróm eszköz használata.Fáradt szem, fájó szem.Nem színhű kijelző használata.
hétköznapihelyzetek:
![Page 5: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/5.jpg)
Amire igazán figyelni kell
Csak hang ne hordozzon jelzés értékű információtVideó esetén legyen videófeliratozás [mi hallható, ki beszél, mit mond]
Videó esetén teljes leírásOn-line rádiók/TV-k: szöveges formában is közölni kell az információkat (Jelnyelv)
Egyszerű, rövid tagmondatok használata.
A hang tiszta legyen, és ha van háttérzene, az legyen kikapcsolhatóNagy legyen a hangzásbeli kontraszt a tartalom és a háttérhangok között
hallás
Hangszóróval nem rendelkező szg.Olyan munkahely, ahol többen is dolgoznak egy szobában.Hangos helyszínek: étterem, műhely, tömegközlekedés, szórakozóhely.
hétköznapihelyzetek:
![Page 6: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/6.jpg)
Amire igazán figyelni kellNe használjunk nagyon pici ikonokat.
Ne használjunk pici méretű képeket linkekként, legyenek nagyobb méretűek a kattintható felületek.
Ne kényszerüljön a felhasználó „bravúrosan” almenüpontokat választani.
Sok gépelés elkerülése => bejelentkezési adatok megőrzése.
TAB billentyűvel való végighaladás az oldalon.
mozgássérült
Kéztörés, ínhüvelygyulladás.A fáradtság a pozicionálást és a helyes ütemben való duplaklikkelést nehezíti.
hétköznapihelyzetek:
Az almenün úgy kell végigvezetni az egeret, hogy ne hagyjuk el a világoskék sávot, mert ha elhagyjuk az almenüsor eltűnik!
![Page 7: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/7.jpg)
Különböző mértékben támogatják a böngészők a weblapokhoz történő egyenlő esélyű hozzáférést. Az alábbiak általában mindegyikben beállíthatóak.
- Alapértelmezett betűtípusok megadása1
- Alapértelmezett betűméretek megadása
- Az oldalak alapértelmezett háttérszínének a megadása- Az oldalak alapértelmezett szövegszínének a megadása- Az hivatkozások alapértelmezett színének megadása
- Betűméret nagyítása/kicsinyítése
- Egyéni stíluslapok megadása (Stíluslapok kikapcsolása)
Az internetes böngészőprogramok kisegítő szolgáltatásai
1: Többnyire beállítható az is, hogy változó szélességű karaktereket használjon vagy azonos méretűeket.2: Explorer 6: csak akkor van erre mód, ha a css-ben relatív módon lettek a betűméretek definiálva.
Az olvashatóság javítható elsősorban, gyengén látóknak segít,a szem fáradékonyságán segít!
Színtévesztő és színvakfelhasználók számára segítelsősorban!
1
2
3
4
![Page 8: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/8.jpg)
A betűméretek abszolút és relatívmegadásának módjai
A honlap készítőjének az alap betűmérethezKépest kell megadnia a szövegek méretét, pl. százalékos értékkel, vagy a fent mutatott Szavak használatával.
Megoldás az újabb böngészőkben:CTRL+, CTRL- és CTRL0
3
![Page 9: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/9.jpg)
Akadálymentesítés a kód szintjén
![Page 10: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/10.jpg)
Akadálymentes a kód szintjén 2.• A képekhez alternatív szövegek írása és hosszú leírás alk.
<img src=”kapu.jpg” alt=”Kapu” /><img src=”graf.jpg” alt=”Grafikon” longdesc=”graf.txt” /><img src=”graf.jpg” alt=”Grafikon” longdesc=”graf.html” />
A képtérképet tartalmazó oldal esetén az <area> tag-hez alt attribútum megadása.
• Címsorok megfelelő alkalmazása– <h1> <h2> … <h6> tagek használata,– sorrend betartása,– <h1>-gyel való kezdés
• Kiemelések jelentésjelöléssel<b> </b> helyett <strong> </strong><i> </i> helyett <em> </em><u> </u> - t nem használunk, hisz ez a linknek van fenntartva
![Page 11: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/11.jpg)
Ellenőrző eszközök
• HTML Validátor • CSS Validátor
• HTML Validátor• LinkChecker (hivatkozások ellenőrzésére)• Firefox-ba WAVE kiterjesztés• Colour Contrast Analyzer
• validator.nu (A HTML5 aktuális állapota szerint vizsgálja az oldalakat
1. Szabványosság ellenőrzéseW3C Validátorok:
Firefox böngésző validátorbővítményei:
HTML5 validálására szolgáló weboldal:
![Page 12: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/12.jpg)
Ellenőrző eszközök
• Lynx
• User mode funkció (alternatív megjelenítőn hogy nézne ki az oldal)• Emulate text browser (hogyan nézne ki szöveges böngészőben,
textonly.css-t használ)
• Firefox-ba WAVE kiterjesztés• Colour Contrast Analyzer
• Browsershots.org weboldal igénybevétele (80 különböző böngésző-oprsz. páros megadása, 12 képernyőfelbontás, 5 színmélység, 8 Javascript beállítás. A végeredmény egy képgaléria.)
2. Akadálymentesség ellenőrzéseSzöveges böngészők:
Opera speciális lehetőségei:
A Firefox lehetőségei:
Több böngészőben és oprendszeren tesztelés:
![Page 13: Akadálymentesítés és az egyetemes tervezés ( Accessibility and the universal design)](https://reader030.vdocuments.mx/reader030/viewer/2022032414/568132f4550346895d99afbd/html5/thumbnails/13.jpg)
Ellenőrző eszközök
• HiSoftware Cynthia Says (http://www.cynthiasays.com)
• Firefox-ba WAVE kiterjesztés– Hibakeresés elindítása (Errors, Features and Alerts gomb).– Ikonok magyarázata (Icons Key - Help).– Jelzi ahol kézi ellenőrzés is szükséges!!! (Hisz nem minden WCAG 2.0 feltétel
ellenőrizhető automatizáltan.)– Ellenőrzés végén megnyomni (Reset Page gomb).– Struktúra és sorrend megtekintése (Structure/Order – pl. címsorok ell.).
2. Akadálymentesség ellenőrzéseWCAG 1.0 checklist alapján dolgozik A, AA, AAA-ra ellenőriz:
WCAG 2.0 checklist alapján dolgozik: