Saavutettavuustestaus: color-contrast ja focus

CSS hallitsee värikontrastia, kohdistusilmaisinten näkyvyyttä, elementtien näkyvyyttä (display:none poistaa elementin saavutettavuuspuusta) ja lukemisjärjestystä (flexboxin order-ominaisuudella tehty visuaalinen uudelleenjärjestys verrattuna DOM-järjestykseen). CSS-valinnat vaikuttavat suoraan siihen, pystyvätkö vammaiset käyttäjät käyttämään käyttöliittymää.

WCAG 2.1 AA edellyttää normaalikokoiselta tekstiltä kontrastisuhdetta 4.5:1 ja suurelta tekstiltä suhdetta 3:1 (vähintään 18px:n lihavoitu tai 24px:n tavallinen teksti). AAA edellyttää vastaavasti suhteita 7:1 ja 4.5:1. Suhteissa verrataan etualan tekstivärin luminanssia taustavärin luminanssiin.

Napsauttakaa DevToolsissa mitä tahansa tekstielementtiä → Styles-paneelia. Värinäyte näyttää kontrastisuhteen tunnisteen. Valintamerkki ilmaisee hyväksytyn tuloksen ja X hylätyn. Värivalitsin näyttää AA- ja AAA-kynnysviivat väriliu'ussa.

axe-core, Lighthouse ja Pa11y tarkistavat automaattisesti kaikkien tekstielementtien kontrastisuhteet. Suorittakaa axe-core yhdessä @axe-core/reactin kanssa kehityksen aikana, jotta saatte reaaliaikaisia kontrastivaroituksia selaimen konsoliin.

CSS:n outline: none tai outline: 0 :focus-tilan yhteydessä poistaa selaimen oletusarvoisen kohdistusrenkaan ja tekee näppäimistönavigoinnista näkymätöntä. Tämä on vakava saavutettavuuspuute. Korvatkaa se mukautetulla, näkyvällä kohdistustyylillä sen sijaan, että poistaisitte kohdistusilmaisimet kokonaan.

:focus koskee kaikkia kohdistustapahtumia, myös hiiren napsautuksia (jolloin napsautuksen yhteydessä näkyvä rengas häiritsee suunnittelijoita). :focus-visible koskee vain tilanteita, joissa selain päättelee näppäimistönavigoinnin olevan käytössä — näin näppäimistön käyttäjät saavat kohdistusrenkaan ilman, että se näkyy hiirellä napsautettaessa.

WCAG 2.2 tuo käyttöön onnistumiskriteerin 2.4.11 (Focus Appearance AA): kohdistusilmaisimien kontrastin viereisiin väreihin nähden on oltava vähintään 3:1, ja niiden on katettava komponentin ympärysmitta. Mukautettujen kohdistustyylien on täytettävä nämä vaatimukset, eikä pelkkä olemassaolo riitä.

Windowsin High Contrast Mode korvaa CSS-värit käyttäjän määrittämillä järjestelmäväreillä. Käyttäkää @media (forced-colors: active)-sääntöä vaihtoehtoisten tyylien tarjoamiseen, jotta käyttöliittymä toimii suuren kontrastin tilassa. Testatkaa ominaisuutta kohdassa Windowsin Asetukset → Helppokäyttötoiminnot → Suuri kontrasti.

WCAG 1.4.1 kieltää värin käyttämisen ainoana tapana välittää tietoa. Pelkästään punaiseksi muuttuva virhetila ei täytä tätä kriteeriä. Yhdistäkää väri kuvakkeisiin, tekstiselitteisiin, kuvioihin tai alleviivauksiin, jotta tieto välittyy aina myös muulla kuin värillä.

WCAG 1.4.4 edellyttää, että tekstin kokoa voidaan suurentaa 200 prosenttiin ilman sisällön menetystä. WCAG 1.4.12 edellyttää, etteivät tekstin välistysasetusten muutokset (suurempi kirjainväli ja rivikorkeus) riko asettelua. Käyttäkää typografiassa suhteellisia yksiköitä (rem, em), jotta molemmat vaatimukset täyttyvät.

Kattava CSS-saavutettavuustestaus sisältää axe DevTools -selainlaajennuksen kehitystä varten, Lighthouse CI:n automaattisiin putkitarkistuksiin, Pa11yn komentoriviltä tehtäviin sivutarkistuksiin sekä manuaalisen näppäimistönavigoinnin testauksen Tab/Shift+Tab-näppäinyhdistelmällä kohdistusilmaisinten näkyvyyden ja järjestyksen varmistamiseksi.

CSS-saavutettavuustestaus kattaa värikontrastisuhteet (AA-tason vähimmäisvaatimus 4.5:1), näkyvät ja WCAG 2.2:n mukaiset :focus-visible-kohdistusilmaisimet, värin välttämisen ainoana tiedon välittäjänä, pakotettujen värien tilan tuen sekä suhteelliset typografian yksiköt koon muuttamisen vaatimusten täyttämiseksi. Automaattiset työkalut ja manuaalinen näppäimistötestaus varmistavat kattavan testauksen.