Saavutettavuuden takaamisen tekniset ratkaisut
Pintapuolisesti: WCAG 2.0:n periaatteet 1. Havaittava (perceivable) 2. Hallittava (operable) 3. Ymmärrettävä (understandable) 4. Lujatekoinen (robust)
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
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
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;
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"; }
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
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…
Kiitos!