Näin rakennat kaavioita, jotka toimivat kaikille

Kaavio-ongelma

Kaaviot ja graafit ovat luonteeltaan visuaalisia objekteja. Ne välittävät tietoa muodon, sijainnin ja värin avulla — kolmen kanavan, jotka ovat merkittävälle osalle yleisöstäsi joko merkityksettömiä tai vääristyneitä.

Noin 8 prosentilla miehistä on jonkinasteinen värinäön poikkeavuus. Ruudunlukijan käyttäjät eivät saa SVG-pylväskaaviosta mitään merkityksellistä tietoa, ellei kehittäjä ole sitä erikseen tarjonnut. Ja näppäimistön käyttäjät kokevat interaktiiviset kaaviot usein täysin tavoittamattomiksi.

Lopputulos: datavisualisointi on todennäköisesti se verkkosuunnittelun alue, jossa kuilu näkevien käyttäjien kokemuksen ja kaikkien muiden kokemuksen välillä on suurimmillaan. Ja se on kuilu, jota organisaatiot harvoin huomaavat, koska saavutettavuusauditoinnit keskittyvät lomakkeisiin ja navigointiin ennen kuin ne ehtivät raporttisivun kaavioihin.

Tämä opas käsittelee, mitä saavutettava datavisualisointi todella vaatii — ei tarkistuslistaa, vaan ymmärrystä siitä, miksi kaaviot epäonnistuvat ja mitä asialle voi tehdä.

Miksi kaaviot ovat erityisen vaikeita

Useimmilla HTML-elementeillä on natiivi rooli, nimi ja tila, jotka apuvälineteknologia ymmärtää. <button> on painike. <table> on taulukko, jossa on rivejä ja sarakkeita. Lomakekentällä on selite.

SVG:nä tai canvasina renderöidyllä kaaviolla ei ole mitään näistä. Se on piirros. Ruudunlukijat näkevät kuvan (jos on onnea) tai eivät mitään. Kehittäjän on rakennettava semanttinen kerros alusta alkaen uudelleen.

Samaan aikaan kaaviot ovat usein sivun tärkeintä sisältöä. Kuukausittaista liikevaihtoa esittävä pylväskaavio, käyttäjämäärän kasvua seuraava viivakaavio, kategoriajakauman erittelevä piirakkakaavio — nämä ovat usein syy, miksi käyttäjä ylipäätään on sivulla. Niiden sulkeminen merkittävältä osalta kävijöistä on vakava ongelma, ei pieni haitta.

Väriongelma: älä koskaan luota pelkkään väriin

Yleisin kaavioiden saavutettavuusvirhe on käyttää väriä ainoana keinona erottaa datasarjat tai kategoriat toisistaan.

Viivakaavio, jonka neljä viivaa erottuvat toisistaan vain värin perusteella — punainen, sininen, vihreä, oranssi — on lukukelvoton monille käyttäjille, joilla on värinäön poikkeavuus, ja täysin merkityksetön kaikille, jotka käyttävät suurikontrastista tilaa tai harmaasävynäyttöä.

Ratkaisu on rinnakkainen koodaus: käytä värin lisäksi vähintään yhtä muuta visuaalista ominaisuutta.

Viivakaaviot: käytä värien rinnalla erilaisia viivatyylejä (yhtenäinen, katkoviiva, pisteviiva, pistekatkoviiva)
Pylväskaaviot: käytä värien rinnalla tekstuureja tai kuvioita tai lisää arvot suoraan pylväisiin
Hajontakuviot: käytä värien rinnalla erimuotoisia merkkejä (ympyrä, neliö, kolmio, vinoneliö)
Piirakkakaaviot: lisää tekstiselitteet jokaisen sektorin sisään tai viereen — älä koskaan luota pelkkään selitelaatikkoon

Tämä kuuluu WCAG 2.2:n kriteerin 1.4.1 Värien käyttö (taso A) piiriin: väri ei saa olla ainoa keino tiedon välittämiseen.

Kaavioiden kontrasti

Ei-tekstimuotoisten visuaalisten elementtien, kuten kaavion pylväiden, viivojen ja datapisteiden, on täytettävä 3:1-kontrasti taustaansa vasten kriteerin 1.4.11 Ei-tekstimuotoisen sisällön kontrasti (taso AA) mukaisesti. Testaa kaavioidesi väripaletti kontrastintarkistustyökalulla — monet brändipaletit, jotka näyttävät hyviltä suurilla pinnoilla, eivät läpäise tätä vaatimusta pienemmissä koossa.

Kaavioiden sisältämän tekstin — akseliselitteiden, arvomerkintöjen, selitelaatikoiden — on täytettävä samat kontrastivaatimukset kuin leipätekstin: 4,5:1 tavalliselle tekstille, 3:1 suurelle tekstille kriteerin 1.4.3 Kontrasti (minimi) mukaisesti.

Tekstivastineiden tarjoaminen

Jokainen kaavio tarvitsee tekstivastineen, joka välittää sen esittämän datan. Sopiva muoto riippuu siitä, kuinka monimutkaista data on.

Yksinkertaiset kaaviot: kuvaileva alt-teksti

Viittä arvoa esittävälle pylväskaaviolle hyvin kirjoitettu alt-attribuutti voi tiivistää keskeisen havainnon:

<img
  src="monthly-revenue.png"
  alt="Monthly revenue Q1 2025: Jan £42k, Feb £38k, Mar £51k,
       Apr £49k, May £56k. Steady upward trend from February onwards."
>

Tämä alt-teksti tekee kaksi asiaa: se kertoo datapisteet ja tiivistää keskeisen oivalluksen. Älä kuvaile kaaviota vain visuaalisesti (“liikevaihtoa esittävä pylväskaavio”). Kuvaile, mitä kaavio viestii.

Monimutkaiset kaaviot: täydentävät datataulukot

Kun kaavio sisältää enemmän dataa kuin alt-attribuuttiin mahtuu, tarjoa lähelle saavutettava datataulukko. Tämä palvelee myös ihmisiä, jotka pitävät taulukkomuotoista dataa visuaalisia esityksiä parempana. Taulukko voi olla oletuksena piilotettu mutta silti saavutettavissa:

<figure>
  <figcaption>Revenue by region, Q1 2025</figcaption>
  <svg aria-labelledby="chart-title" aria-describedby="chart-desc" role="img">
    <title id="chart-title">Revenue by region, Q1 2025</title>
    <desc id="chart-desc">Bar chart showing UK leading with £180k,
    followed by DE at £124k, FR at £98k, and NL at £71k.</desc>
    <!-- chart content -->
  </svg>
  <details>
    <summary>View as table</summary>
    <table>
      <caption>Revenue by region, Q1 2025</caption>
      <thead><tr><th>Region</th><th>Revenue</th></tr></thead>
      <tbody>
        <tr><td>UK</td><td>£180,000</td></tr>
        <tr><td>DE</td><td>£124,000</td></tr>
        <tr><td>FR</td><td>£98,000</td></tr>
        <tr><td>NL</td><td>£71,000</td></tr>
      </tbody>
    </table>
  </details>
</figure>

SVG-kohtaiset mallit

Suoraan sivulle upotetut SVG-kaaviot (kuvatiedostojen sijaan) voidaan tehdä saavutettaviksi suoraan ARIAn avulla. Keskeiset mallit:

Lisää role="img" <svg>-elementtiin
Tarjoa <title> <svg>-elementin ensimmäisenä lapsena ja yhdistä se aria-labelledby-attribuutilla
Lisää <desc> pidempiä kuvauksia varten ja yhdistä se aria-describedby-attribuutilla
Merkitse koristeelliset elementit (ruudukkoviivat, akselimerkit) attribuutilla aria-hidden="true" kohinan vähentämiseksi

Interaktiivisissa kaavioissa, joissa käyttäjät voivat valita datapisteitä, jokainen interaktiivinen elementti tarvitsee kunnollisen roolin, nimen ja näppäimistötuen.

Näppäimistönavigointi interaktiivisissa kaavioissa

Jos kaaviosi ovat interaktiivisia — hover-vihjeet, napsautettavat osiot, alueen valinta ja zoomaus — niiden on oltava täysin käytettävissä näppäimistöllä kriteerin 2.1.1 Näppäimistö (taso A) mukaisesti.

Toteuta kaavioille, joissa on paljon datapisteitä, kiertävä tabindex-malli: vain yksi kaavion elementti on kerrallaan sarkainjärjestyksessä, ja nuolinäppäimillä liikutaan datapisteiden välillä kaavion sisällä.

<!-- Each bar is a button, navigable with arrow keys -->
<g role="group" aria-label="Monthly revenue bars">
  <rect
    role="button"
    tabindex="0"
    aria-label="January: £42,000"
    onkeydown="handleChartKey(event)"
    ...
  />
</g>

Vihjetekstien, jotka ilmestyvät vain hiirtä liikutettaessa, on ilmestyttävä myös näppäimistökohdistuksella. Vain hiiren käyttäjille näkyvä vihjeteksti on saavutettavuusvirhe.

Oikean kaaviotyypin valinta

Jotkin kaaviotyypit ovat luonnostaan saavutettavampia kuin toiset. Kun sinulla on valinnanvaraa:

Kaaviotyyppi	Saavutettavuus	Huomiot
Pylväskaavio	Korkea	Määrät helppo esittää selittein; hyvä näppäimistötuki mahdollinen
Viivakaavio	Korkea	Käytä erilaisia viivatyylejä; merkitse keskeiset pisteet
Taulukko	Korkein	Helpoin tehdä saavutettavaksi; usein oikea valinta datalle
Hajontakuvio	Keskitaso	Vaatii huolellisen merkkien erottelun; näppäimistönavigointi monimutkaista
Lämpökartta	Matala	Luonteeltaan väririippuvainen; tarjoa aina taulukkovaihtoehto
Piirakka/donitsi	Matala	Arvojen vertailu vaikeaa; vältä, jos sektoreita on yli 3–4

Epävarmassa tilanteessa hyvin muotoiltu taulukko on lähes aina kaaviota saavutettavampi — ja usein helpompi lukea vammasta riippumatta. Älä käytä kaaviota siksi, että se näyttää modernilta; käytä sitä silloin, kun se aidosti auttaa käyttäjiä ymmärtämään trendin tai vertailun nopeammin kuin taulukkomuotoinen data.

Kaavioiden testaaminen

Automaattiset saavutettavuusskannerit voivat tarkistaa puuttuvat alt-attribuutit ja joitakin ARIA-malleja, mutta ne eivät voi varmistaa, että kaavion data on merkityksellistä, että näppäimistönavigointi toimii oikein tai että kaavio on ymmärrettävä ruudunlukijan käyttäjälle. Testaa näin:

Ruudunlukijalla (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): navigoi kaavioon ja tarkista, mitä ääneen kerrotaan
Pelkällä näppäimistöllä: siirry sarkaimella kaavioon ja varmista, että kaikki interaktiiviset elementit ovat saavutettavissa ja käytettävissä näppäimistöllä
Värisokeussimulaatiolla: käytä Chrome DevTools -työkalua (Rendering > Emulate vision deficiency) nähdäksesi, miltä kaavio näyttää erityyppisillä värinäön poikkeavuuksilla
200 %:n zoomauksella: varmista, että selitteet ja selitelaatikot eivät mene päällekkäin tai leikkaudu pois

Ruudunlukija-arviointipalvelumme testaa kaaviot todellisten apuvälineteknologian käyttäjien kanssa — nopein tapa selvittää, mitä käyttäjäsi todella kokevat.