Milyen a bárki számára használható honlap? Honlapok elemzése ergonómia és akadálymentesség szempontjából Nagy Dániel 06 20 381 1454

Az előadások a következő témára: "Milyen a bárki számára használható honlap? Honlapok elemzése ergonómia és akadálymentesség szempontjából Nagy Dániel 06 20 381 1454"— Előadás másolata:

1 Milyen a bárki számára használható honlap? Honlapok elemzése ergonómia és akadálymentesség szempontjából Nagy Dániel 06 20 381 1454 daniel.nagy0125@gmail.com

2 Az egyetemes tervezés Tárgyi és épített környezetünkben Szoftverek felhasználói felületén Honlapokon 2

3 A használható, elérhető honlapok hozadéka Nagyobb bevétel, ismeretség, elismertség 3

4 Internet- használók csoportjai Fogyatékos személyek Látásproblémával élők HallássérültekMozgássérültekEpilepsziások Értelmileg akadályozottak Technológiailag megkülönböztetettek Eltérő képernyőméret Elavult böngészőGyenge hardver Speciális célcsoportok GyerekekIdősek Alacsony képzettségűek Idegen nyelvek és kultúrák Hátrányos felhasználók Felnőtt, egészséges, innovatív korosztályok Problémás hétköznapi helyzetek 4

5 Nem az akadálymentes verzió a jó megoldás 5 Rossz példa

6 Jacob Nielsen használhatósági faktorai Megtanulhatóság Hatékonyság Megjegyezhetőség Hibák Elégedettség 6

7 Ki profitál a használható és elérhető honlapokból? Hátrányos helyzetű felhasználók Ép felnőttek Cégek 7

8 Webdizájn- trendek Reszponzív Minimalizmus/ flat design Egy oldalas (one page) Parallax Nagy, minőségi képek és videók … 8

9 Akadálymente- sítési törekvések 9 W3C 1998. évi Esélyegyenlőségi Törvény 1998. évi Esélyegyenlőségi Törvény WAI-ARIA WCAG 2.0

10 WCAG 2.0 szerkezete  Alapelvek  Irányelvek  „A” feltételek: elengedhetetlenek, hogy a felhasználói csoportok használni tudják a honlapot.  „AA” feltételek: segítenek leküzdeni a hozzáférésben hátráltató jelentős akadályokat.  „AAA” feltételek: teljes hozzáférést nyújtanak a fogyatékkal élőknek is.  Hardver- és szoftverfüggetlenek.  WCAG 2.0 értelmezése dokumentum WCAG 2.0 értelmezése dokumentum 10 Alapelvek: 1.Észlelhetőség 2.Működtethetőség 3.Érthetőség 4.Robusztusság

11 Fogyatékos személyeket támogató számítógépes eszközök Fejegér Képernyőolvasó szoftver Braille billentyűzet Olvasótévé Mobil applikációk 11

12 Hogyan tegyük hozzáférhetővé a webes tartalmat bárki számára?  1.3.3. A tartalom értelmezéséhez és kezeléséhez biztosított utasításokat nem lehet kizárólag az olyan érzékelési jellemzők elemeire bízni, mint a forma, méret, vizuális elhelyezkedés, irány vagy hang.  A szint  2.4.4. Minden egyes hivatkozás célja egyedül a hivatkozás szövegéből meghatározható, vagy a hivatkozás szövegéből és az algoritmikusan meghatározható kontextusából…  A szint Szöveges tartalom 12

13 Hogyan tegyük hozzáférhetővé a webes tartalmat bárki számára?  1.1.1. A felhasználóknak nyújtott minden nemszöveges tartalom rendelkezik egyenértékű szövegalternatívával.  A szint  2.3.1. A weboldalak nem jelenítenek meg olyan tartalmat, ami három alkalomnál többször villan fel egy másodperc alatt.  A szint Képi tartalom 13

14 Hogyan tegyük hozzáférhetővé a webes tartalmat bárki számára?  1.2.3. A szinkronizált média esetében biztosított az interakciókat is magába foglaló szinkronizált médiához készült teljes szövegű változat vagy hangzó leírás az előre rögzített videótartalomhoz kapcsolódóan.  A szint Mozgókép és hang 14

15 Hogyan tegyük hozzáférhetővé a webes tartalmat bárki számára?  2.4.1. Hozzáférhető egy mechanizmus, melynek segítségével elkerülhetők azok a tartalmi blokkok, amelyek több oldalon is ismétlődnek.  A szint  3.3.1. Amennyiben egy beviteli hibára automatikusan fény derül, a hibás elem azonosításra kerül, és egy szöveges leírást kap a felhasználó a hibáról.  A szint Működtetés és vizuális megjelenés 15

16 A Generali Biztosító Zrt. honlapjának vizsgálata Látogassunk el a generali.hu oldalra!generali.hu Eszközök: Web Developer WAVE Toolbar WCAG Contrast Checker WCAG Contrast Checker 16

17 1.4.1. Színhasználat  Nem a szín az egyetlen vizuális módja az információ közvetítésének, a tevékenység jelzésének, a válaszadásra ösztönzésnek vagy a vizuális alkotóelemek megkülönböztetésének.  A szint 17 

18 1.4.3. Kontraszt (Minimum)  A szöveg és a képként reprezentált szöveg vizuális megjelenítése esetében a kontrasztarány minimum 4,5:1, kivéve az alábbi esetekben…  AA szint 18  Protanópia Normál színlátásDeuteranópia TritanópiaMonokromázia

19 2.4.2. Oldalcím  A weboldalak címekkel rendelkeznek, melyek leírják az oldal témáját vagy célját.  A szint 19 

20 2.4.5. Többszörös elérési útvonalak  Több lehetőség is van, hogy megtaláljunk egy adott weboldalt a weboldalak halmazán belül (kivéve ahol a weboldal egy folyamat eredményeként jelenik meg vagy annak egy része).  AA szint 20 

21 1.1.1. Nem- szöveges tartalom  A felhasználóknak nyújtott minden nem-szöveges tartalom rendelkezik egyenértékű szövegalternatívával, kivéve az alábbi esetekben…  A szint 21 

22 1.3.1. Információ és relációk/ összefüggések  A megjelenítésen keresztül közvetített információ, a szerkezet és ezek relációi algoritmikusan meghatározhatók vagy szöveges formátumban elérhetők legyenek.  A szint 22 

23 2.4.7. Látható fókusz  Bármelyik billentyűzettel működtetett felhasználói felülethez tartozik egy kezelési mód, ahol a billentyűzet-fókuszjelző látható.  AA szint 23 

24 2.4.3. Fókuszok rendezése  Ha egy weboldal szekvenciálisan navigálható, és a navigációs sorrend befolyásolja a jelentést vagy a kezelést, a fókuszálható alkotóelemek olyan sorrendben kerülnek fókuszba, hogy az megőrzi a jelentést és a kezelhetőséget.  A szint 24 

25 2.4.1. Blokkok elkerülése  Hozzáférhető egy mechanizmus, melynek segítségével elkerülhetők azok a tartalmi blokkok, amelyek több oldalon is ismétlődnek.  A szint 25 

26 2.4.4. Hivatkozás célja (kontextusban)  Minden egyes hivatkozás célja egyedül a hivatkozás szövegéből meghatározható, vagy a hivatkozás szövegéből és az algoritmikusan meghatározható kontextusából. Kivételt jelent, ahol a hivatkozás célja ezáltal kétértelmű lenne a mindennapi felhasználók számára.  A szint 26 

27 1.4.4. Szöveg- átméretezés  Egy szöveg (de nem a képként reprezentált szöveg) a tartalom, vagy a funkcionalitás elvesztése nélkül 200 százalékig átméretezhető kisegítő technológia alkalmazása nélkül.  AA Szint 27 

28 2.1.1. Billentyűzet  A tartalom összes funkcionalitása működtethető a billentyűzeten keresztül, anélkül, hogy specifikus időzítést igényelne az egyedi billentyűleütésekhez (kivéve, ahol az alapul szolgáló funkció olyan bevitelt igényel, amely a felhasználó mozgásának útvonalától és nem csak a végpontoktól függ).  A szint 28 

29 2.1.2. Billentyűzet csapda  Ha a billentyűzet-fókusz az oldal valamely eleméhez vihető a billentyűzet használatával, akkor a fókuszt arról az elemről billentyűzet használatával el lehessen mozdítani, és ha ehhez a módosítás nélküli nyíl- vagy tabulátor-billentyűzetek vagy egyéb kilépési módok használatán kívül más is szükséges, a felhasználó erről értesül.  A szint 29 

30 3.3.2. Címkék vagy utasítások  Megfelelő címkék vagy utasítások biztosítottak, amikor a tartalom felhasználói bevitelt igényel.  A szint 30 

31 3.3.1. Hibaazonosítás  Amennyiben egy beviteli hibára automatikusan fény derül, a hibás elem azonosításra kerül, és egy szöveges leírást kap a felhasználó a hibáról.  A szint 31 

32 Pusztán algoritmikus módszerekkel HTML validálás CSS validálás 32

33 A honlap hőtérképe http://feng-gui.com/ 33

34 Köszönöm a figyelmet! Nagy Dániel 06 20 381 1454 daniel.nagy0125@gmail.com