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

Slides:



Advertisements
Hasonló előadás
 A felkereső ifjúsági munka gyűjtőfogalom, amely mindazon megközelítéseket magában foglalja, amelyek során az ifjúságsegítők, a fiatalokkal foglalkozók.
Advertisements

BPS Web 2.0 Felhasználói kézikönyv. A szerkesztő főoldala A bejelentkezett felhasználóA szerkesztő főmenürendszere Stílusformázások Nyelv- és nézetváltás.
A weboldalunkon regisztrált felhasználó neveddel és jelszavaddal tudsz belépni. Amennyiben még nem regisztráltál oldalunkon, abban az esetben kérjük,
Főbb változások, újdonságok
bemutatása július 23. Kiss József IT igazgató.
•online kommunikáció •branding, márkaépítés •kommunikációs stratégiák kitalálása, felépítése •Közösségi marketing •Szociális érzékenység, non-profit partnerek.
Web2 és a blogok. Mi az a web2? 1.Filozófia (tartalom) szabadság nyitottság közösség 2.Eszköz(készlet) egyszerűség integráció kompatibilitás mobilitás.
Operációs rendszerek Beállítások.
Akadálymentesítés és az egyetemes tervezés (Accessibility and the universal design)
Media Smart Digitális Világ 1. MediaSmart Hungary Oktatás Közhasznú Nonprofit Kft.
Emeltszintű Etanácsadó Otthoni internetes ügyintézés Készítette: Horányiné Horváth Viktória Csilla.
 A Gmail a Google ingyenes webmail, POP3 és IMAP szolgáltatása.Googlewebmail POP3IMAP  Bevezetésekor az 1 gigabyte-os tárhelyével lényegesen.
Kaczur Sándor A honlap ergonómiai és akadálymentességi elemzése Kaczur Sándor
Dr. Élő Gábor július 9. MKE HKSZ 15. Országos Konferenciája
Ügyfél Elégedettségi Vizsgáló és Elemző Program
A számítástechnika és informatika tárgya
Amit a HTML-ről érdemes tudni
Informatikai eszközök
2009. április 3. Ficzkó Ildikó Honlapelemzés április 3. Ficzkó Ildikó
Honlapelemzés. miért?  tanulmányok  tapasztalatszerzés  előkészítő munkálatok: honlaptervezés  fejlődés.
Eszterházy Károly Főiskola ─ Médiainformatika Intézet HTML (HiperText Mark-Up Language) HTML leírónyelvvel írjuk le, hogy a weboldal elemei (képek, szöveg,
HTML (HiperText Mark-Up Language)
RFID labor az Intézetünkben
WCAG WEB CONTENT ACESSIBILITY GUIDELINES WEB AKADÁLYMENTESÍTÉSI ÚTMUTATÓ.
A multimédia olyan tartalom, amely többféle csatornát is használ a felhasználók tájékoztatására vagy szórakoztatására. MULTI (latin) = többszörös MÉDIA.
Microsoft szoftverek a szakképzésben
Önleíró adatok: XML INFO ÉRA, Békéscsaba
Vizuális és web programozás II.
Google earth és a térinformatika kapcsolata
Szoftvertechnológia Ember-gép rendszerek. Mit értünk rendszer alatt? Kapcsolódó komponensek halmaza – egy közös cél érdekében működnek együtt A rendszer.
A PLAKÁT Készítette: Wiedermann Katalin.
A website teljesítményének vizsgálata, fejlesztése 1. Forrás: WebTrends Analysis Suite, Advanced Edition White Paper (
Debrecen, március 27. Internet Fiesta 2008 Könyvtárak akadálymentesítése az Interneten Internet Fiesta 2008 Debrecen, március 27.
Buris Katalin V. földrajz - informatika
Akadálymentesítés.
mLearning - A Moodle használata mobil eszközökön
XHTML 1. óra. Miért térjünk át HTML-ről XHTML- re? HTML-szabványban tartalom és forma összemosódott HTML 4.0 szabványban stíluslapok használatát javasolták.
Korpásné Szűcs Melinda web-referens DEENK Korpásné Szűcs Melinda web-referens DEENK.
Az elektronikus levelezés a számítógép-hálózatok klasszikus szolgáltatása, az Internet alkalmazásának egyik legnépszerűbb formája. Szövegen kívül lehetőség.
Weboldalak tervezése (X)HTML.
HIVATALOS WEBOLDAL: A BESZÉDES EMACS, AVAGY AZ EMACSPEAK BEMUTATÁSA.
Készítette: Turócziné Kiscsatári Nóra
Az NVU webszerkesztő program
Egyházi Könyvtárak Egyesülése Pécs, június 28. Szakmai továbbképzés.
i.e. SMART üzleti ötletek versenye SWOT analízis workshop
A website teljesítményének vizsgálata, fejlesztése 1. Forrás: WebTrends Analysis Suite, Advanced Edition White Paper (
Webes alkalmazásfejlesztés
Chapter 6 Input Technologies and Techniques. Jó vagy rossz? Toll vs. érintés + kézírás, rajzolás + pontos kijelölés + extra funkciók (pl gomb) - mindig.
Adatbáziskezelés. Adat és információ Információ –Új ismeret Adat –Az információ formai oldala –Jelsorozat.
MTT MA Mérnöktanár mesterszak Elektronikus tanulás 3. konferencia.
Készítette: Földi Gergely Felkészítő: Antal Zoltán Szentpéterúri Általános Iskola Szentpéterúr, Kossuth Lajos Utca 13. Kedvenc szerkesztő szoftverem.
Információs rendszer fejlesztése 1. előadás
A web site minősítése Források: Bokor Péter szakdolgozata (2002) és a benne megadott hivatkozások: Dotkom Internet Consulting: Üzleti weboldalak elemzése,
Nyílt rendszerek összekapcsolása
Keresés fajtái Matching (szabadszavas)
Drótváz Gerstweiler Anikó Éva május 3.. Wireframe I. Más néven képernyőterv vagy sematikus oldal Egy vizuális útmutató, amely honlapok felépítését.
 Fizikai és infokommunikációs akadálymentesítés  Digitális tananyagok akadálymentesítése  Gépi beszédfelismerés.
Webszerkesztés. IP cím pl: Domain cím - DNS pl: ország nevehttp:// számítógép címe World Wide Web Webszerverre.
Rövid áttekintés a MOK/HEFOP kártyák használhatóságáról Készítette: Nádor Szabolcs,
CMA 2014 B2B KOMMUNIKÁCIÓS MEGOLDÁSOK Digitális Média Tények Könyve 2013 Megjelenés: május.
A MATARKA akadálymentesítése és címkézése Burmeister Erzsébet Sárospatak, április 1. Networkshop konferencia.
Az elektronikus levelezés a számítógép-hálózatok klasszikus szolgáltatása, az Internet alkalmazásának egyik legnépszerűbb formája. Szövegen kívül lehetőség.
A könnyen érthető kommunikáció az önérvényesítők szemszögéből
Szövegszerkesztési alapfogalmak
Integrált könyvtár rendszer (IKR)
Kulcsrakész Közgyűjteményi Portál
A JaDoX, mint repozitórium szoftver
DRUPAL Előadja: Nagy Nikoletta :05.
Egyenlő esélyű hozzáférés mozgáskorlátozott személyek számára a turizmusban és az autóbuszos utaztatásban Kovács Ágnes elnök.
dr. Geges József Ovidius Co. Ltd.
Előadás másolata:

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