Verkkosivujen saavutettavuus: Sivuston optimointi ruudunlukijoiden käyttäjille

Nykypäivän digitaalisella aikakaudella verkkosivujen saavutettavuus ei ole vain mukava lisä; se on perustavanlaatuinen vaatimus. Saavutettava verkkosivusto varmistaa, että vammaiset henkilöt, mukaan lukien ne, jotka käyttävät ruudunlukijoita, voivat havaita, ymmärtää, selata ja olla vuorovaikutuksessa verkon kanssa.

Tämä kattava opas syventyy verkkosivustosi optimointiin ruudunlukijoiden käyttäjille, kattaen olennaiset tekniikat, parhaat käytännöt ja käytännön esimerkit.

Mikä on ruudunlukija?

Ruudunlukija on apuvälineteknologia, joka muuntaa tietokoneen näytöllä olevan tekstin ja muut elementit puheeksi tai pistekirjoitukseksi. Se antaa näkövammaisille mahdollisuuden käyttää digitaalista sisältöä ja olla vuorovaikutuksessa sen kanssa. Suosittuja ruudunlukijoita ovat:

JAWS (Job Access With Speech): Laajalti käytetty ruudunlukija Windowsille.
NVDA (NonVisual Desktop Access): Ilmainen ja avoimen lähdekoodin ruudunlukija Windowsille.
VoiceOver: Applen sisäänrakennettu ruudunlukija macOS:lle ja iOS:lle.
ChromeVox: Ruudunlukijalaajennus Google Chromelle ja Chrome OS:lle.
Orca: Ilmainen ja avoimen lähdekoodin ruudunlukija Linuxille.

Ruudunlukijat toimivat tulkitsemalla verkkosivuston koodia ja tarjoamalla käyttäjälle tietoa sisällöstä ja rakenteesta. On ratkaisevan tärkeää, että verkkosivustot on rakennettu tavalla, jonka ruudunlukijat voivat helposti ymmärtää ja jolla ne voivat navigoida.

Miksi ruudunlukijaoptimointi on tärkeää?

Verkkosivustosi optimoinnilla ruudunlukijoille on lukuisia etuja:

Osallistavuus: Varmistaa, että näkövammaiset käyttäjät voivat käyttää verkkosivustoasi tehokkaasti.
Lainsäädännön noudattaminen: Monissa maissa on lakeja ja säädöksiä, jotka edellyttävät verkkosivujen saavutettavuutta (esim. Americans with Disabilities Act (ADA) Yhdysvalloissa, Accessibility for Ontarians with Disabilities Act (AODA) Kanadassa ja EN 301 549 Euroopassa).
Parempi käyttäjäkokemus: Saavutettava suunnittelu johtaa usein parempaan käyttäjäkokemukseen kaikille käyttäjille, vammasta riippumatta.
Laajempi yleisö: Tekemällä verkkosivustostasi saavutettavan avaat sen suuremmalle potentiaaliselle yleisölle.
SEO-edut: Hakukoneet suosivat saavutettavia verkkosivustoja, mikä voi parantaa sijoitustasi hakukoneissa.

Ruudunlukijaoptimoinnin keskeiset periaatteet

Seuraavat periaatteet ovat olennaisia ruudunlukijaystävällisten verkkosivustojen luomisessa:

1. Semanttinen HTML

Semanttisten HTML-elementtien oikea käyttö on ratkaisevan tärkeää sisällön rakenteen ja merkityksen välittämisessä. Semanttiset elementit viestivät verkkosivustosi eri osien tarkoituksen ruudunlukijoille, mikä mahdollistaa käyttäjien tehokkaamman navigoinnin.

Esimerkkejä:

Käytä <header>-elementtiä sivuston ylätunnisteelle.
Käytä <nav>-elementtiä navigointivalikoille.
Käytä <main>-elementtiä pääsisältöalueelle.
Käytä <article>-elementtiä itsenäisten sisältölohkojen kapselointiin.
Käytä <aside>-elementtiä täydentävälle sisällölle.
Käytä <footer>-elementtiä sivuston alatunnisteelle.
Käytä <h1> - <h6>-elementtejä otsikoille.
Käytä <p>-elementtiä kappaleille.
Käytä <ul>- ja <ol>-elementtejä listoille.

Esimerkkikoodi:

<header>
  <h1>Minun verkkosivustoni</h1>
  <nav>
    <ul>
      <li><a href="#">Etusivu</a></li>
      <li><a href="#">Tietoja</a></li>
      <li><a href="#">Palvelut</a></li>
      <li><a href="#">Ota yhteyttä</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Artikkelin otsikko</h2>
    <p>Tämä on artikkelin pääsisältö.</p>
  </article>
</main>

<footer>
  <p>Tekijänoikeus 2023</p>
</footer>

2. Vaihtoehtoinen teksti kuville

Kuvilla tulisi aina olla kuvaileva vaihtoehtoinen teksti (alt-teksti), joka välittää kuvan sisällön ja tarkoituksen ruudunlukijoiden käyttäjille. Alt-tekstin tulisi olla ytimekäs ja informatiivinen.

Parhaat käytännöt:

Tarjoa alt-teksti kaikille kuville, mukaan lukien koristekuville.
Pidä alt-teksti lyhyenä ja kuvailevana.
Vältä ilmauksia kuten "kuva kohteesta" tai "valokuva kohteesta".
Monimutkaisille kuville harkitse pitkän kuvauksen käyttöä (longdesc-attribuutti tai erillinen kuvaileva teksti).
Jos kuva on puhtaasti koristeellinen eikä lisää merkitystä, käytä tyhjää alt-attribuuttia (alt="") estääksesi ruudunlukijoita ilmoittamasta sitä.

Esimerkkikoodi:

<img src="logo.png" alt="Yrityksen logo"> <img src="decorative.png" alt="">

3. ARIA-attribuutit

ARIA (Accessible Rich Internet Applications) -attribuutit tarjoavat lisätietoa ruudunlukijoille elementtien roolista, tilasta ja ominaisuuksista, erityisesti dynaamisessa sisällössä ja monimutkaisissa widgeteissä. ARIA-attribuutit voivat parantaa saavutettavuutta, kun semanttinen HTML yksinään ei riitä.

Yleiset ARIA-attribuutit:

role: Määrittelee elementin roolin (esim. role="button", role="navigation").
aria-label: Tarjoaa tekstikuvauksen elementille, kun visuaalista kuvausta ei ole tai se ei ole riittävä.
aria-labelledby: Yhdistää elementin toiseen elementtiin, joka toimii sen kuvauksena.
aria-describedby: Yhdistää elementin toiseen elementtiin, joka antaa siitä kuvauksen.
aria-hidden: Piilottaa elementin ruudunlukijoilta.
aria-live: Ilmaisee, että elementin sisältö päivittyy dynaamisesti (esim. aria-live="polite", aria-live="assertive").
aria-expanded: Ilmaisee, onko kokoontaitettava elementti tällä hetkellä laajennettu vai tiivistetty.
aria-haspopup: Ilmaisee, että elementillä on ponnahdusvalikko.

Esimerkkikoodi:

<button role="button" aria-label="Sulje valintaikkuna" onclick="closeDialog()">X</button>

<div id="description">Tämä on kuvan kuvaus.</div>
<img src="example.jpg" aria-describedby="description" alt="Esimerkkikuva">

Tärkeä huomautus: Käytä ARIA-attribuutteja harkitusti. ARIA:n liiallinen käyttö voi aiheuttaa saavutettavuusongelmia. Käytä aina ensin semanttisia HTML-elementtejä ja käytä ARIA:a vain tarvittaessa täydentämään tai ohittamaan oletussemantiikan.

4. Näppäimistöllä navigointi

Varmista, että kaikki interaktiiviset elementit verkkosivustollasi ovat navigoitavissa pelkällä näppäimistöllä. Tämä on ratkaisevan tärkeää käyttäjille, jotka eivät voi käyttää hiirtä tai muuta osoitinlaitetta. Näppäimistöllä navigointi perustuu vahvasti kohdistusindikaattoreiden ja loogisen sarkainjärjestyksen oikeaan käyttöön.

Parhaat käytännöt:

Kohdistusindikaattorit: Varmista, että kaikilla interaktiivisilla elementeillä (esim. linkit, painikkeet, lomakekentät) on selkeä ja näkyvä kohdistusindikaattori, kun ne valitaan. Käytä CSS:ää :focus-tilan muotoiluun.
Sarkainjärjestys: Sarkainjärjestyksen tulisi noudattaa sivun loogista lukemisjärjestystä (tyypillisesti vasemmalta oikealle, ylhäältä alas). Käytä tabindex-attribuuttia sarkainjärjestyksen säätämiseen tarvittaessa. Vältä tabindex="0"- ja tabindex="-1"-attribuuttien käyttöä, ellei se ole ehdottoman välttämätöntä, koska ne voivat aiheuttaa saavutettavuusongelmia väärin käytettynä.
Ohita navigointi -linkit: Tarjoa "ohita navigointi" -linkki sivun yläosassa, jonka avulla käyttäjät voivat ohittaa päänavigointivalikon ja siirtyä suoraan pääsisältöön. Tämä on erityisen hyödyllistä ruudunlukijoita käyttäville, koska se vähentää tarvetta selata toistuvia navigointilinkkejä jokaisella sivulla.
Modaaliset valintaikkunat: Kun modaalinen valintaikkuna avataan, varmista, että kohdistus pysyy valintaikkunan sisällä, kunnes se suljetaan. Estä käyttäjiä siirtymästä sarkaimella valintaikkunan ulkopuolelle.

Esimerkkikoodi (Ohita navigointi -linkki):

<a href="#main-content" class="skip-link">Siirry pääsisältöön</a>

<header>
  <nav>
    <!-- Navigointivalikko -->
  </nav>
</header>

<main id="main-content">
  <!-- Pääsisältö -->
</main>

Esimerkkikoodi (CSS kohdistusindikaattorille):

a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

5. Lomakkeiden saavutettavuus

Lomakkeet ovat kriittinen osa monia verkkosivustoja, ja on olennaista varmistaa, että ne ovat saavutettavia ruudunlukijoiden käyttäjille. Oikea nimeäminen, selkeät ohjeet ja virheiden käsittely ovat ratkaisevan tärkeitä lomakkeiden saavutettavuudelle.

Parhaat käytännöt:

Nimeäminen: Käytä <label>-elementtiä liittääksesi selitteet lomakekenttiin. <label>-elementin for-attribuutin tulisi vastata vastaavan lomakekentän id-attribuuttia.
Ohjeet: Anna selkeät ja ytimekkäät ohjeet lomakkeen täyttämiseen. Käytä aria-describedby-attribuuttia liittääksesi ohjeet lomakekenttiin.
Virheiden käsittely: Näytä virheilmoitukset selkeästi ja näkyvästi. Käytä aria-live-attribuuttia ilmoittaaksesi virheilmoituksista ruudunlukijoiden käyttäjille. Yhdistä virheilmoitukset vastaaviin lomakekenttiin aria-describedby-attribuutilla.
Pakolliset kentät: Merkitse pakolliset kentät selkeästi, sekä visuaalisesti että ohjelmallisesti. Käytä required-attribuuttia merkitsemään pakolliset kentät. Käytä aria-required-attribuuttia ilmaisemaan ruudunlukijoiden käyttäjille, että kenttä on pakollinen.
Liittyvien kenttien ryhmittely: Käytä <fieldset>- ja <legend>-elementtejä ryhmitelläksesi toisiinsa liittyviä lomakekenttiä.

Esimerkkikoodi:

<label for="name">Nimi:</label>
<input type="text" id="name" name="name" required aria-required="true">

<div id="name-instructions">Anna koko nimesi.</div>
<label for="name">Nimi:</label>
<input type="text" id="name" name="name" aria-describedby="name-instructions">

<form>
  <fieldset>
    <legend>Yhteystiedot</legend>
    <label for="email">Sähköposti:</label>
    <input type="email" id="email" name="email" required aria-required="true"><br><br>
    <label for="phone">Puhelin:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

6. Dynaamisen sisällön saavutettavuus

Kun verkkosivustosi sisältö muuttuu dynaamisesti (esim. AJAXin tai JavaScriptin avulla), on ratkaisevan tärkeää varmistaa, että ruudunlukijoiden käyttäjät saavat ilmoituksen muutoksista. Käytä ARIA live-alueita ilmoittaaksesi dynaamisen sisällön päivityksistä.

ARIA live-alueet:

aria-live="off": Oletusarvo. Alueen päivityksiä ei ilmoiteta.
aria-live="polite": Ilmoittaa päivityksistä, kun käyttäjä on toimeton. Tämä on yleisin ja suositelluin arvo.
aria-live="assertive": Ilmoittaa päivityksistä välittömästi, keskeyttäen käyttäjän. Käytä tätä arvoa säästeliäästi, koska se voi olla häiritsevä.

Esimerkkikoodi:

<div aria-live="polite" id="status-message"></div>

<script>
  // Kun sisältö päivittyy, päivitä tilaviesti
  document.getElementById('status-message').textContent = "Sisältö päivitetty onnistuneesti!";
</script>

7. Värikontrasti

Varmista, että tekstin ja taustavärien välillä on riittävä värikontrasti. Tämä on tärkeää käyttäjille, joilla on heikko näkö tai värisokeus. Web Content Accessibility Guidelines (WCAG) vaatii vähintään 4.5:1 kontrastisuhteen normaalille tekstille ja 3:1 suurikokoiselle tekstille.

Työkaluja värikontrastin tarkistamiseen:

WebAIM Color Contrast Checker (webaim.org/resources/contrastchecker/)
Coolors (coolors.co)
Adobe Color (color.adobe.com)

8. Median saavutettavuus

Jos verkkosivustosi sisältää ääni- tai videosisältöä, tarjoa vaihtoehtoja käyttäjille, jotka eivät voi nähdä tai kuulla sisältöä. Näitä ovat:

Tekstitykset: Tarjoa tekstitykset kaikelle videosisällölle. Tekstitykset ovat synkronoituja tekstivastineita ääniraidasta.
Tekstivastineet: Tarjoa tekstivastineet kaikelle ääni- ja videosisällölle. Tekstivastineiden tulisi sisältää kaikki puhuttu sisältö sekä kuvaukset tärkeistä äänistä ja visuaalisista elementeistä.
Kuvailutulkkaukset: Tarjoa kuvailutulkkaukset videosisällölle. Kuvailutulkkaukset selostavat videon visuaalisia elementtejä sokeille tai näkövammaisille käyttäjille.

9. Testaaminen ruudunlukijoilla

Tehokkain tapa varmistaa, että verkkosivustosi on saavutettava ruudunlukijoiden käyttäjille, on testata sitä erilaisilla ruudunlukijoilla. Tämä auttaa sinua tunnistamaan ja korjaamaan mahdolliset saavutettavuusongelmat.

Testaustyökalut:

Manuaalinen testaus: Käytä ruudunlukijoita kuten NVDA (ilmainen), JAWS (maksullinen) tai VoiceOver (sisäänrakennettu macOS:ssä ja iOS:ssä) verkkosivustosi selaamiseen. Yritä suorittaa yleisiä tehtäviä ja vuorovaikutuksia.
Automaattinen testaus: Käytä saavutettavuuden testaustyökaluja mahdollisten saavutettavuusongelmien tunnistamiseen. Nämä työkalut voivat auttaa sinua löytämään yleisiä virheitä, mutta niitä ei tule käyttää manuaalisen testauksen korvikkeena. Joitakin suosittuja saavutettavuuden testaustyökaluja ovat:

WAVE (Web Accessibility Evaluation Tool)
axe DevTools
Lighthouse (Chrome DevToolsissa)

Vinkkejä testaamiseen ruudunlukijoilla:

Opi perusteet: Tutustu käyttämäsi ruudunlukijan peruskomentoihin ja navigointitekniikoihin.
Käytä eri ruudunlukijoita: Testaa verkkosivustoasi useilla eri ruudunlukijoilla, koska jokainen ruudunlukija tulkitsee verkkosisältöä eri tavalla.
Ota vammaisia käyttäjiä mukaan: Paras tapa varmistaa, että verkkosivustosi on saavutettava, on ottaa vammaisia käyttäjiä mukaan testausprosessiin. Pyydä palautetta ruudunlukijoiden käyttäjiltä verkkosivustosi käytettävyydestä ja saavutettavuudesta.

WCAG (Web Content Accessibility Guidelines)

Web Content Accessibility Guidelines (WCAG) on kansainvälisesti tunnustettu ohjeisto verkkosisällön saavutettavuuden parantamiseksi. WCAG:n on kehittänyt World Wide Web Consortium (W3C), ja sitä käytetään laajalti verkkosivujen saavutettavuuden standardina.

WCAG on järjestetty neljän periaatteen ympärille, jotka tunnetaan nimellä POUR:

Havaittava: Informaation ja käyttöliittymän komponenttien on oltava esitettävissä käyttäjille tavoilla, jotka he voivat havaita.
Hallittava: Käyttöliittymän komponenttien ja navigoinnin on oltava hallittavissa.
Ymmärrettävä: Informaation ja käyttöliittymän toiminnan on oltava ymmärrettävää.
Toimintavarma: Sisällön on oltava riittävän toimintavarmaa, jotta se voidaan luotettavasti tulkita monenlaisilla käyttäjäohjelmilla, mukaan lukien apuvälineteknologiat.

WCAG on jaettu kolmeen vaatimustenmukaisuuden tasoon: A, AA ja AAA. Taso A on saavutettavuuden perustaso, kun taas taso AAA on korkein taso. Useimmat organisaatiot pyrkivät noudattamaan tason AA vaatimuksia.

Yhteenveto

Verkkosivustosi optimointi ruudunlukijoiden käyttäjille on olennainen askel kohti aidosti osallistavaa ja saavutettavaa verkkokokemusta. Noudattamalla tässä oppaassa esitettyjä periaatteita ja parhaita käytäntöjä voit varmistaa, että verkkosivustosi on kaikkien käyttäjien saavutettavissa, vammasta riippumatta.

Muista, että verkkosivujen saavutettavuus on jatkuva prosessi. Testaa verkkosivustoasi säännöllisesti ruudunlukijoilla ja saavutettavuuden testaustyökaluilla ja pysy ajan tasalla uusimmista saavutettavuusohjeista ja parhaista käytännöistä. Tekemällä saavutettavuudesta prioriteetin voit luoda paremman verkon kaikille.

Lisälähteitä:

WebAIM: https://webaim.org/
W3C Web Accessibility Initiative (WAI): https://www.w3.org/WAI/
Deque University: https://dequeuniversity.com/