Lataa esitys
Esittely latautuu. Ole hyvä ja odota
1
Saavutettavuuden takaamisen tekniset ratkaisut
2
Pintapuolisesti: WCAG 2.0:n periaatteet
1. Havaittava (perceivable) 2. Hallittava (operable) 3. Ymmärrettävä (understandable) 4. Lujatekoinen (robust)
3
Tärkeimmät seikat kaiken pystyy tekemään näppäimistöltä
HTML-elementtejä on käytetty semanttisesti oikein tekstivastineet, jos kuva on oleellinen käyttöliittymän johdonmukaisuus
4
Näppäimistökäyttö kaikki eivät käytä hiirtä valikot yleisin ongelma
jos HTML-elementit semanttisesti oikeassa käytössä, usein ei ongelmia näkyvä fokus
5
Hiirellä avattava valikko
<ul> <li class="menuitem">Eläimet</li> <li><a href="#">Koira</a></li> <li><a href"#">Kissa</a></li> <li><a href="#">Hevonen</a></li> </ul> </li> .menuitem ul { top: 40px; display: none; list-style-type: none; } .menuitem:hover ul { display: block;
6
Näppäimistöltä avattava valikko
<ul> <li class="menuitem"><button onclick="display()">Eläimet</button></li> <ul id="animals"> <li><a href="#">Koira</a></li> <li><a href"#">Kissa</a></li> <li><a href="#">Hevonen</a></li> </ul> </li> function display() { document.getElementById("animals").style.display = "block"; }
7
Elementtien semantiikka
HTML-elementti semanttinen vastine h1 pääotsikko button painike a linkki text, radio …] lomake-elementti table taulukko label lomakekentän selite nav navigaatio-elementti header yläpalkki, banneri footer alapalkki
10
Accessible Rich Internet Applications, ARIA
joukko saavutettavuusattribuutteja role: kertoo elementin merkityksen button, checkbox, heading, navigation, main… aria-alkuisilla attribuuteilla lisäinfoa aria-checked, aria-hidden, aria-label, aria-haspopup…
11
Kiitos!
Samankaltaiset esitykset
