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
Az egyetemes tervezés Tárgyi és épített környezetünkben Szoftverek felhasználói felületén Honlapokon 2
A használható, elérhető honlapok hozadéka Nagyobb bevétel, ismeretség, elismertség 3
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
Nem az akadálymentes verzió a jó megoldás 5 Rossz példa
Jacob Nielsen használhatósági faktorai Megtanulhatóság Hatékonyság Megjegyezhetőség Hibák Elégedettség 6
Ki profitál a használható és elérhető honlapokból? Hátrányos helyzetű felhasználók Ép felnőttek Cégek 7
Webdizájn- trendek Reszponzív Minimalizmus/ flat design Egy oldalas (one page) Parallax Nagy, minőségi képek és videók … 8
Akadálymente- sítési törekvések 9 W3C évi Esélyegyenlőségi Törvény évi Esélyegyenlőségi Törvény WAI-ARIA WCAG 2.0
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
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
Hogyan tegyük hozzáférhetővé a webes tartalmat bárki számára? 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 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
Hogyan tegyük hozzáférhetővé a webes tartalmat bárki számára? A felhasználóknak nyújtott minden nemszöveges tartalom rendelkezik egyenértékű szövegalternatívával. A szint 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
Hogyan tegyük hozzáférhetővé a webes tartalmat bárki számára? 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
Hogyan tegyük hozzáférhetővé a webes tartalmat bárki számára? 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 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
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
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
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
Oldalcím A weboldalak címekkel rendelkeznek, melyek leírják az oldal témáját vagy célját. A szint 19
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
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
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
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
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
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
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
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
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
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
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
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
Pusztán algoritmikus módszerekkel HTML validálás CSS validálás 32
A honlap hőtérképe 33
Köszönöm a figyelmet! Nagy Dániel