Rámpát a honlapokra úton az akadálymentes honlapok felé Pataki Máté

Hasonló dokumentumok
DSD. A W3C Magyar Iroda Akadálymentesítési Törekvései Pataki Máté, Kovács László

DSD W3C WAI, avagy Weblapok akadálymentesítése

Rámpát a honlapokra úton az akadálymentes honlapok felé

DSD. A webes akadálymentesítés helyzete Magyarországon Pataki Máté DSD. Pataki Máté 1/ 41

DSD Akadálymentesítés mobilwebes környezetben

Web design. Accessibility

DSD W3C WAI, avagy Weblapok akadálymentesítése

Arculat fontossága & Akadálymentesítés

Akadálymentes web-tervezés workshop május 31.

DSD W3C WAI, avagy Weblapok akadálymentesítése

Fülöp Csaba, Kovács László, Micsik András

W3C WAI. Weblapok Akadálymentesítése

Akadálymentesség fogalma

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár

Webes alkalmazások akadálymentesítése

Hogyan böngésznek a fogyatékkal élő emberek?

KOPI DSD. Pataki Máté MTA SZTAKI. Elosztott Rendszerek Osztály

Vigh György: Webes alkalmazások akadálymentesítése... W3C Magyar Iroda november oldal

MELLÉKLET. a következőhöz AZ EURÓPAI PARLAMENT ÉS A TANÁCS IRÁNYELVE

BEVEZETÉS AZ INTERNET ÉS A WORLD WIDE WEB VILÁGÁBA. Kvaszingerné Prantner Csilla, EKF

WEBES ALKALMAZÁSOK AKADÁLYMENTESÍTÉSE - A TÁVMUNKA SZEMSZÖGÉBŐL. Vigh György informatikai szakértő Felnőttképzés Fejlesztéséért Közhasznú Egyesület

A fogyatékossággal élő személyek politikai részvételhez való joga

Webkezdő. A modul célja

Bemutató anyag. Flash dinamikus weboldal adminisztrációs felület. Flash-Com Számítástechnikai Kft Minden jog fenntartva!

A szemantikus világháló oktatása

WWW Kliens-szerver Alapfogalmak Technológiák Terv. Web programozás 1 / 31

A hozzáférhető tudás és tanulási környezet

Akadálymentes weboldalkészítés dióhéjban

PÁRTOK ÉS A DIGITÁLIS ESÉLYEGYENLŐSÉG

Akadálymentesítés és az egyetemes tervezés (Accessibility and the universal design)

Mit? Online tortarendelés

Tananyagfejlesztési módszer platformfüggetlen tananyagcsomagok elıállítására

I. Felsőoktatási Marketing Verseny Versenyképes honlap kritériumrendszere

KOPI. KOPI Online Plágiumkereső és Információs Portál DSD. Pataki Máté MTA SZTAKI. Elosztott Rendszerek Osztály

Olyan eszközre van szükség, amelynél a webszerkesztés folyamatát a fejlesztő, nem pedig a program vezérli

INFORMATIKA ÁGAZATI ALKALMAZÁSAI. Az Agrármérnöki MSc szak tananyagfejlesztése TÁMOP /1/A




ENTERPRISE PORTAL. Egy modern portál esetén

IVSZ Grand Coalition for Digital Jobs - Csatlakozási szándéknyilatkozat

Bemutatkozás. Heilig Szabolcs Hojtsy Gábor Illés Szabolcs Palócz István

Web programoz as

Petőfi Irodalmi Múzeum. megújuló rendszere technológiaváltás

AZ INFORMÁCIÓS TÁRSADALOM TECHNOLÓGIAI TÁVLATAI. Detrekői Ákos a Nemzeti Hírközlési és Informatikai Tanács elnöke Székesfehérvár,

A/B tesztelés webáruházaknak. Zajdó Csaba

Esélyegyenlőség támogatása, diszkriminációmentesség segítése vállalaton belül és kívül

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 5.

ELOSZTOTT DIGITÁLIS KÖNYVTÁRI PROJEKT EURÓPÁBAN

KML Keyhole Markup Language

Internet alkamazások Készítette: Methos L. Müller Készült: 2010

Dombóvár Város Arculati Kézikönyve

XML avagy az univerzális információelérés álma

tartalomszolgáltatási igényeinek megfelelően Berze Lajos Szent István Egyetem Kosáry Domokos Könyvtár és Levéltár

Cloud Akkreditációs Szolgáltatás indítása CLAKK projekt. Kozlovszky Miklós, Németh Zsolt, Lovas Róbert 9. LPDS MTA SZTAKI Tudományos nap

Bevezetés A harmadik szoftverkrízis korát éljük! Szoftverkrízisek: 1. nincs elég olcsó: hardver, szoftver, programozó 2. nincs elég olcsó: szoftver, p

MELLÉKLETEK. a következőhöz: A BIZOTTSÁG.../.../EU FELHATALMAZÁSON ALAPULÓ RENDELETE

Miért érdemes csatlakozni? Az Internetes Vásárlás Napja szervezője bemutatja:

Tájékoztató a Jövő Internet Nemzeti Kutatási Program előrehaladásáról: JINKA2.1 Dr. Sallai Gyula

Department of Distributed Systems MTA SZTAKI DSD

Alkalmazásokban. Dezsényi Csaba Ovitas Magyarország kft.

Online misszió lehetőségei Drupal [+ Google]

HTML. Dr. Nyéki Lajos 2016

Nemzeti Fejlesztési és Gazdasági Minisztérium támogatásával megvalósuló KKC-2008-V számú projekt B2CR ONLINE KOMMUNIKÁCIÓ

KOPI. KOPI A fordítási plágiumok keresője MTA SZTAKI DSD. Pataki Máté Kovács László. Department of Distributed Systems

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL

Web-fejlesztés NGM_IN002_1

Önálló labor feladatkiírásaim tavasz

1. A WEBES SZABVÁNYOK ÉS A W3C

Üzleti modellen alapuló webes tudásprezentáció

Jövő Internet Nemzeti Technológiai Platform IVSZ Menta. Dr. Bakonyi Péter BME EIT HUNGARNET

Miért érdemes csatlakozni? Az Internetes Vásárlás Napja szervezője bemutatja:

Akadálymentesség biztosítása és az egyetemes tervezés lehetőségei Magyarországon A közbeszerzés szerepe az egyetemes tervezés érvényesítésében

A J2EE fejlesztési si platform (application. model) 1.4 platform. Ficsor Lajos Általános Informatikai Tanszék Miskolci Egyetem

(statikus) HTML (XHTML) oldalak, stíluslapok

IT biztonsági keretek és követelmények. Budapesti Műszaki és. Informatikai Központ. Szigeti Szabolcs. Networkshop 2009

Az egységes tartalomkezelés üzleti előnyei

A BIZOTTSÁG (EU).../... VÉGREHAJTÁSI HATÁROZATA ( )

ACR122U-A9. NFC USB intelligens kártyaolvasó. Műszaki Specifikáció V3.04 verzió

mlearning Mobil tanulás a gyakorlatban

használata Az EU emblémájának az uniós programokkal összefüggésben Útmutató a kedvezményezettek és más harmadik felek számára 2012.

ESÉLYEGYENLŐSÉGI TECHNOLÓGIÁK IRÁNYELVEK, MÓDSZEREK ÉS SZOFTVEREK

E-ügyintézés bevezetése Kaposvárott

Web Értékesítő" Szerepkör leírás" 3. 2 Szerepkör profil" Profil összefoglalása" Részletes profil" 5

SZABADKAI MŰSZAKI SZAKFŐISKOLA. E-mobil prezentáció dokumentációja SZABADKA, 2015.

Web-fejlesztés NGM_IN002_1

HP Mobile távirányító (csak egyes típusokon) Felhasználói útmutató

A FInish pályázat bemutatása, tájékoztatás a nyílt felhívásokról, az elnyerhető támogatásról. Viola Katalin Campden BRI Magyarország Nonprofit Kft.

GreenLabelsPurchase making a greener procurement with energy labels. GreenLabelsPurchase projekt. Szakmai Fórum a zöld beszerzésről

Aki mások számára telepít/beállít számítógépeket, például rendszergazdák, könyvtárosok, tanárok.

AKADÁLYMENTES E-TANANYAGOK FEJLESZTÉSÉNEK

World IPv6 day tapasztalatok

Kulturális és Oktatási Bizottság VÉLEMÉNYTERVEZET. a Kulturális és Oktatási Bizottság részéről. a Belső Piaci és Fogyasztóvédelmi Bizottság részére

Készítette: dr. Lukács Andrea közbeszerzési tanácsadó, szakértő, Közbeszerzési Tanácsadók Országos Szövetsége, alelnök

Könyvtári szolgáltatás fogyatékkal élőknek

Programozó, csoportvezető

A HAKI szolgáltatásai az EHA fejlesztések tervezéséhez és megvalósításához

World Wide DSD Web. Csoportmunka

Átírás:

Rámpát a honlapokra úton az akadálymentes honlapok felé Pataki Máté Pataki Máté

Témakörök A World Wide Web Consortium (W3C) W3C Magyar Iroda Akadálymentes weboldalak (WCAG) Szabványos weboldalak l Új szolgáltatás Pataki Máté 2 / 33

A World Wide web Consortium (W3C) A webszabványok fejlesztésének nyilvános fóruma Jelszavai: Semlegesség és egyetértés 1994-ben Tim Berners Lee alapította a MIT-n További anyaintézmények: ERCIM (INRIA) Franciaország KEIO Egyetem Japán Pataki Máté 3 / 33

Egymásra épülő W3C szabványok Pataki Máté 4 / 33

A World Wide web Consortium (W3C) Több mint 400 tag Apple Boeing Cisco Microsoft Nokia Vodafone Magyar tagok MTA SZTAKI KOPINT-DATORG Budapesti Műszaki és Gazdaságtudományi Egyetem Pataki Máté 5 / 33

W3C Magyar Iroda 16 helyi iroda, 2002-től: W3C Magyar Iroda MTA SZTAKI-ban működik Tevékenységeink, szolgáltatásaink: Magyar nyelvű információ nyújtása Weboldal, hírlevél, szóróanyagok W3C-technológiák népszerűsítése Konferenciák, workshopok, oktatás szervezése Célunk: Magyar webes élet fejlődésének é elősegítése Nemzetközivel kompatibilis hazai webes szabványok Pataki Máté 6 / 33

Tevékenységeink, szolgáltatásaink Információszolgáltatás magyar nyelven Weboldal Hírek, hírlevél, RSS Wiki-oldalak (Szemantikus Web Wiki, W3C-dokumentumok fordítása Wiki) Fordítások (RDF, OWL; WCAG 2.0 és kapcsolódo dokumentumok) W3C-technológiák népszerűsítése Rendezvényszervezés Akadálymentességi és használhatósági tanulmányok készítése és tanácsadás (pl. Nemzeti Fejlesztési Hivatal, Magyarország.hu) Mobil Web követelményeinek való megfelelést segítő tanácsadás Pataki Máté 7 / 33

W3C - Web Accessibility Initiative (WAI) http://www.w3.org/wai/ w3 Web Content Accessibility Guidelines 1.0: ajánlás (1999. máj. 5.) 2.0: ajánlás (2008. dec. 11.) Részletesebb útmutató Understanding WCAG 2.0 Technológiák sokszínűsége Szélesebb közönségnek Pataki Máté 8 / 33

WCAG 1.0 Web Content Accessibility Guidelines Priority 1 (must) Pl.: szöveges megfelelő biztosítása minden képhez Priority 2 (should) Pl.: style sheet használata (tartalom-megjelenítés) Priority 3 (may) Pl.: fontos linkekhez gyorsbillentyű rendelése Gépi és kézi ellenőrzés Pataki Máté 9 / 33

WCAG 1.0 Checklist http://www.w3.org/tr/wai-webcontent/full-checklist.html Pataki Máté 10 / 33

Szabványos oldalak Szabványos oldalak WCAG XHTML CSS Pataki Máté 11 / 33

Szabványosnak jelölt oldalak Szabványosnak jelölt oldalak Statikus kép Létrehozáskori állapot 50%-ban nem szabványosak Pataki Máté 12 / 33

Új szolgáltatás Dinamikus kép Egy ikon Különböző szintek Tartalomnak megfelelő szint Rendszeres ellenőrzés ő Értesítés Pataki Máté 13 / 33

Szavbányos (X)HTML Első szint Szabványos (X)HTML kód Pataki Máté 14 / 33

Szavbányos CSS Második szint CSS használat Szabványos CSS kód Pataki Máté 15 / 33

Első lépés az akadálymentesség felé Harmadik szint Géppel ellenőrizhető Szöveges megfelelő Képek mérete meg van adva Oldal nyelve meg van adva Űrlapmezők rendelkeznek címkékkel Pataki Máté 16 / 33

WCAG 2.0 A Negyedik szint Akadálymentes WCAG 2.0 A szint Kézi ellenőrzés Pataki Máté 17 / 33

WCAG 2.0 A Egy szöveges változat biztosított annak érdekében, hogy egyenértékű információt nyújtson az előre rögzített csak-hang tartalomhoz. Pataki Máté 18 / 33

WCAG 2.0 A 1.3.2 Sorrendiség:Amikor a tartalom megjelenítésének sorrendisége befolyásolja a jelentést, akkor a helyes olvasási sorrend algoritmikusan meghatározható legyen. (A szint) 1.3.3 Érzékelési jellemzők: 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) Pataki Máté 19 / 33

WCAG 2.0 A 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) Pataki Máté 20 / 33

WCAG 2.0 A Pataki Máté 21 / 33

WCAG 2.0 A Pataki Máté 22 / 33

2. Alapelv: Működtethető 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) Pataki Máté 23 / 33

WCAG 2.0 A Pataki Máté 24 / 33

WCAG 2.0 A Pataki Máté 25 / 33

WCAG 2.0 AA Ötödik szint Akadálymentes WCAG 2.0 AA szint Kézi ellenőrzés Pataki Máté 26 / 33

WCAG 2.0 AA 1.2.4. Feliratok (élő): Feliratok állnak rendelkezésre az összes élő hang (live audio) tartalomhoz a szinkronizált média esetében. (AA szint) Pataki Máté 27 / 33

WCAG 2.0 AA 143K 1.4.3 Kontraszt t(minimum): i 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) Nagybetű: A nagy betűmérettel szerkesztett szövegek és a nagy betűméretű képként reprezentált szöveg esetében a kontrasztarány minimum 3:1; Járulékosság: Az a szöveg vagy képként reprezentált szöveg nem rendelkezik minimum-kontraszt feltétellel, amely inaktív felhasználói interfész alkotóeleme, vagy csupán dekoráció, vagy egy képen szereplő járulékos szöveg, vagy nem látható. Logó típusok: A logóhoz vagy márkanévhez tartozó szövegek nem rendelkeznek minimum kontraszt feltétellel. Pataki Máté 28 / 33

WCAG 2.0 AA Pataki Máté 29 / 33

WCAG 2.0 AA Pataki Máté 30 / 33

Használat <a href="http://w3c.hu/checkvalid/site?url=http%3a%2f%2fsztaki.hu"> <img src="http://w3c.hu/checkvalid/logo?url=http%3a%2f%2fsztaki.hu" alt="w3c Validity Check" width="231" height="57" /> </a> Pataki Máté 31 / 33

Összefoglalás Műhelykonferencia ősszel W3C Magyar Iroda Honlap Hírlevél RSS WCAG 2.0 magyarul http://www.w3c.hu/forditasok/wcag20/ Pataki Máté 32 / 33

Köszönöm a figyelmet! http://www.w3c.hu Email: Mate.Pataki@w3c.hu A W3C Magyar Iroda célja, hogy a magyar intézmények és cégek minél szélesebb körében megismertesse a W3C tevékenységét és segítséget g nyújtson az azokban való részvételhez. Pataki Máté 33 / 33