Saavutettavuus kehittäjille: Inklusiivisen koodin rakentaminen
Kehittäjät ovat saavutettavuuden arkkitehteja toteutustasolla. Vaikka suunnittelijat luovat visuaaliset ja vuorovaikutuksen perusteet, koodi ratkaisee viime kädessä, toimiiko verkkosivusto näppäimistönavigaatiolla, kommunikoiko se oikein ruudunlukijoiden kanssa ja säilyykö saavutettavuus eri selaimissa ja laitteissa.
Hyvä uutinen on, että useimmat saavutettavuuden parhaat käytännöt ovat linjassa puhtaan, semanttisen, standardinmukaisen koodin yleisten parhaiden käytäntöjen kanssa. Saavutettavan koodin kirjoittaminen ei ole monimutkaisuuden lisäämistä — se on koodin kirjoittamista oikein alun alkaen.
Semanttinen HTML ensin
Yksittäinen vaikuttavin asia, jonka voit tehdä saavutettavuuden hyväksi, on käyttää semanttisia HTML-elementtejä oikein. HTML5 tarjoaa rikkaan elementtivalikoiman, jolla on sisäänrakennettu merkitys ja saavutettavuusominaisuudet. <button>-elementti on automaattisesti fokusoitavissa, aktivoitavissa näppäimistöllä ja ruudunlukijat ilmoittavat sen painikkeena. <div>-elementillä, johon on liitetty onclick-käsittelijä, ei ole mitään näistä ominaisuuksista ilman merkittävää lisätyötä.
Käytä <nav>-elementtiä navigaatioalueille, <main>-elementtiä pääsisällölle, <header> ja <footer> omille osiilleen, <section> ja <article> sisältöalueille, <h1>–<h6> otsikoille oikeassa hierarkkisessa järjestyksessä, <ul> ja <ol> listoille, <table> ja <th> taulukoidulle datalle, <label> for-attribuutilla lomakekontrolleille sekä natiiveja <button>- ja <a>-elementtejä vuorovaikutteisille kontrolleille.
Nämä elementit luovat saavutettavuuspuun, jota avustavat teknologiat käyttävät sisältösi esittämiseen käyttäjille. Kun käytät niitä oikein, suuri osa saavutettavuudesta hoituu automaattisesti.
Otsikkorakenne
Otsikot luovat sivusi rakenteellisen rungon. Ruudunlukijakäyttäjät navigoivat usein otsikoiden avulla ymmärtääkseen sisällön organisaation ja löytääkseen tietyt osiot. Jokaisella sivulla tulisi olla täsmälleen yksi <h1>, ja otsikoiden tulisi noudattaa loogista hierarkiaa ilman tasojen ohittamista — <h3> ei tulisi seurata <h1>:tä ilman <h2>:ta välissä.
Älä koskaan käytä otsikkoelementtejä visuaaliseen tyylittelyyn. Jos tarvitset suurta lihavoitua tekstiä, joka ei ole otsikko, käytä CSS:ää eri elementissä. Vastaavasti, jos sisältö toimii otsikkona, merkitse se otsikoksi visuaalisesta esityksestä riippumatta.
Näppäimistön saavutettavuus
Kaiken toiminnallisuuden on oltava käytettävissä pelkän näppäimistön avulla. Tämä tarkoittaa, että jokainen vuorovaikutteinen elementti — linkit, painikkeet, lomakekontrollit, valikot, modaalit, liukusäätimet, välilehdet — on saavutettavissa Tab-näppäimellä (tai Shift+Tab taaksepäin), aktivoitavissa Enterillä tai välilyönnillä ja suljettavissa tarvittaessa.
Älä koskaan luo näppäimistöansoja, joissa käyttäjä voi siirtyä elementtiin mutta ei pois siitä. Modaalien dialogien tulisi pidättää fokus dialogin sisällä sen ollessa auki ja palauttaa fokus laukaisevaan elementtiin sulkeutuessaan, mutta Escape-näppäimen tulisi aina sulkea dialogi.
Varmista, että fokusjärjestys noudattaa loogista sekvenssiä, joka vastaa visuaalista asettelua. DOM-järjestyksen tulisi yleensä vastata visuaalista esitystä. Vältä positiivisten tabindex-arvojen käyttöä, jotka ohittavat luonnollisen fokusjärjestyksen ja luovat sekaannusta. Käytä tabindex="0" tehdäksesi ei-vuorovaikutteisista elementeistä fokusoitavia tarvittaessa ja tabindex="-1" elementeille, joiden tulisi olla fokusoitavissa vain ohjelmallisesti.
Sivun kieli
Aseta jokaisen sivun oletuskieli käyttämällä lang-attribuuttia <html>-elementissä. Tämä kertoo ruudunlukijoille, mitä ääntämissääntöjä käyttää. Jos kieli vaihtuu sisällön sisällä — esimerkiksi ranskankielinen lause englanninkielisellä sivulla — merkitse vaihto lang-attribuutilla sisältävässä elementissä.
Lomakkeiden saavutettavuus
Lomakkeet ovat käyttäjien syöttötietojen antamisen paikka ja usein saavutettavuusongelmien lähde. Jokaisella lomakekontrollilla on oltava ohjelmallisesti yhdistetty tunniste, tyypillisesti käyttämällä <label>-elementtiä for-attribuutilla, joka vastaa kontrollin id:tä. Ryhmittele toisiinsa liittyvät kontrollit käyttämällä <fieldset> ja <legend>.
Kun syöttövirheitä havaitaan, tunnista virheellinen kenttä ja kuvaile virhe tekstissä. Anna korjausehdotuksia mahdollisuuksien mukaan. Kentille, jotka hyväksyvät tiettyjä formaatteja, anna selkeät ohjeet odotetusta formaatista. Käytä autocomplete-attribuuttia selaimen automaattitäytön mahdollistamiseksi yleisille kentille kuten nimi, sähköposti, osoite ja puhelinnumero.
Tilailmoitukset, jotka eivät saa fokusta — kuten "tuote lisätty ostoskoriin" tai "3 tulosta löytyi" — on ilmoitettava ruudunlukijakäyttäjille ARIA-live-alueiden tai tilaroolien kautta.
Vaihtoehtoinen teksti
Jokaisella ei-koristeellisella kuvalla on oltava merkityksellinen vaihtoehtoinen teksti, joka kuvaa sen sisältöä tai toimintoa. Informatiivisille kuville kuvaile, mitä kuva välittää. Toiminnallisille kuville (kuten logo, joka linkittää etusivulle) kuvaile toiminto. Koristeellisille kuville, jotka eivät lisää tietoa, käytä tyhjää alt-attribuuttia (alt=""), jotta ruudunlukijat ohittavat ne kokonaan.
Monimutkaiset kuvat kuten kaaviot, kuvaajat tai diagrammit voivat tarvita pidemmät kuvaukset, jotka tarjotaan kuvatekstin, viereisen tekstin tai linkitetyn yksityiskohtaisen kuvauksen kautta.
WAI-ARIA
Accessible Rich Internet Applications -spesifikaatio tarjoaa lisäsemantiikkaa tilanteisiin, joissa natiivi HTML ei riitä. ARIA mahdollistaa roolien, tilojen ja ominaisuuksien viestimisen avustaville teknologioille mukautetuissa widgeteissä ja dynaamisessa sisällössä.
ARIAa tulisi kuitenkin käyttää harkiten. ARIAn ensimmäinen sääntö on: jos voit käyttää natiivia HTML-elementtiä, jolla on tarvitsemasi semantiikka ja käyttäytyminen, tee niin. ARIA ei lisää toiminnallisuutta — se lisää vain semantiikkaa. <div role="button"> tarvitsee silti JavaScriptin näppäimistökäsittelyä varten, kun taas natiivi <button> hoitaa sen automaattisesti.
Käytä ARIA-maamerkkirooleja (tai niiden HTML5-vastineita) sivualueiden määrittelyyn. Käytä aria-label ja aria-labelledby saavutettavien nimien tarjoamiseen, kun näkyvä teksti ei riitä. Käytä aria-expanded, aria-selected, aria-checked ja muita tila-attribuutteja vuorovaikutteisten widgettien nykyisen tilan viestimiseen. Käytä aria-live-alueita dynaamisten sisältöpäivitysten ilmoittamiseen.
Responsiivinen suunnittelu ja uudelleenjuoksutus
Sisällön on oltava esitettävissä ilman tiedon menetystä 320 CSS-pikselin leveydellä ilman vaakasuuntaista vieritystä. Tämä varmistaa, että käyttäjät, jotka zoomaavat 400 %:iin tavallisella työpöytänäytöllä, voivat silti käyttää kaikkea sisältöä. Suunnittele asettelusi juoksuttamaan sisältöä yksittäiseen sarakkeeseen kapeilla leveyksillä sen sijaan, että vaatisit vieritystä kahdessa suunnassa.
Ohituslinkit
Tarjoa mekanismi näppäimistökäyttäjille toistuvien sisältölohkojen, kuten navigaatiovalikoiden, ohittamiseen ja suoraan pääsisältöön siirtymiseen. Yleisin toteutus on "Siirry pääsisältöön" -linkki, joka on sivun ensimmäinen fokusoitava elementti ja tulee näkyviin fokuksen saadessaan.
Kehittäjän testaustarkistuslista
Ennen minkään ominaisuuden käyttöönottoa, varmista: kaikki toiminnallisuus toimii pelkällä näppäimistöllä; fokusjärjestys on looginen; fokus on näkyvissä kaikilla vuorovaikutteisilla elementeillä; kaikilla kuvilla on asianmukainen alt-teksti; kaikilla lomakekontrolleilla on tunnisteet; sivun kieli on asetettu; otsikkohierarkia on oikea; ARIAa käytetään oikein ja vain tarvittaessa; sisältö juoksuttuu 320px:n leveydessä; ja dynaamiset sisältöpäivitykset ilmoitetaan ruudunlukijoille.
Tässä osiossa
Onko verkkosivustosi saavutettava?
Skannaa verkkosivustosi ilmaiseksi ja saa WCAG-pisteesi muutamassa minuutissa.
Skannaa sivustosi ilmaiseksi