Saavutettavuus suunnittelijoille: Inklusiivisen visuaalisen ja vuorovaikutussuunnittelun luominen

Saavutettava verkkosivusto alkaa saavutettavasta suunnittelusta. Monet yleisimmistä saavutettavuusongelmista — riittämätön värikontrasti, epäselvä navigaatio, sekavat asettelut, puuttuvat fokusindikaattorit — syntyvät suunnitteluvaiheessa tehdyistä päätöksistä. Siihen mennessä kun koodi kirjoitetaan, nämä ongelmat ovat jo vakiintuneet, ja niiden korjaaminen vaatii uudelleensuunnittelua pelkän koodin säätämisen sijaan.

Suunnittelijana sinulla on enemmän vaikutusvaltaa saavutettavuuteen kuin melkein kenelläkään muulla tiimissä. Valintasi väreistä, typografiasta, välistyksestä, navigaatiomalleista ja vuorovaikutusmalleista ratkaisevat, voivatko miljoonat käyttäjät tehokkaasti käyttää tuotettasi.

Värikontrasti

Riittämätön värikontrasti on yksi yleisimmistä saavutettavuusongelmista verkossa. WCAG vaatii vähimmäiskontrastisuhteen 4,5:1 tekstin ja taustan välille normaalikokoiselle tekstille ja 3:1 suurelle tekstille (määritelty 18pt tavallisena tai 14pt lihavoituna). Tasolla AAA vaatimus nousee 7:1:een normaalille tekstille ja 4,5:1:een suurelle tekstille.

Nämä suhteet ovat olemassa, koska heikkonäköiset, ikääntyvät silmät tai värinäön puutteista kärsivät tarvitsevat riittävän kontrastin erottaakseen tekstin taustastaan. Vaalean harmaa teksti valkoisella taustalla voi näyttää tyylikkäältä suunnittelumallissa, mutta tulee lukukelvottomaksi merkittävälle osalle käyttäjistä.

Myös ei-tekstuaalisilla elementeillä on kontrastivaatimuksia. Käyttöliittymäkomponenttien — painikkeiden, lomakekenttien, kuvakkeiden, fokusindikaattoreiden — ja merkityksellisten graafisten kohteiden on ylläpidettävä vähintään 3:1 kontrastisuhdetta viereisiä värejä vasten. Tämä varmistaa, että käyttäjät voivat tunnistaa vuorovaikutteiset elementit ja ymmärtää informatiiviset grafiikat.

Käytä kontrastin tarkistustyökaluja koko suunnitteluprosessin ajan, ei vain lopussa. Työkalut kuten WebAIM Contrast Checker tai Colour Contrast Analyser mahdollistavat suhteiden todentamisen ennen väripaletin lukitsemista.

Väri informaation välittäjänä

Väri ei saa koskaan olla ainoa visuaalinen tapa välittää tietoa. Jos käytät punaista virheiden ja vihreää onnistumisen ilmaisemiseen, värisokeat käyttäjät eivät ehkä pysty erottamaan näitä kahta tilaa. Täydennä väriä aina lisäindikaattoreilla — kuvakkeilla, tekstimerkinnöillä, kuvioilla tai alleviivauksilla.

Tämä koskee myös linkkejä. Jos leipätekstin linkit erottuvat vain värin perusteella, niiden on täytettävä 3:1 kontrastisuhde ympäröivään tekstiin nähden tai niitä on täydennettävä toisella visuaalisella indikaattorilla, kuten alleviivauksella.

Typografia ja tekstin koko

Kaiken verkkosivustosi tekstin on oltava suurennettavissa 200 %:iin ilman sisällön tai toiminnallisuuden menetystä. Tämä tarkoittaa suunnittelua joustavilla, suhteellisilla yksiköillä kiinteiden pikselikokojen sijaan ja sen varmistamista, että asettelut mukautuvat sujuvasti tekstin suurentuessa.

WCAG 2.2 sisältää myös vaatimuksia tekstin välistykselle. Käyttäjien on voitava säätää riviväli vähintään 1,5-kertaiseksi fonttikokoon nähden, kappaleväli vähintään 2-kertaiseksi, kirjainväli vähintään 0,12-kertaiseksi ja sanaväli vähintään 0,16-kertaiseksi — ilman sisällön tai toiminnallisuuden menetystä.

Linkkien suunnittelu

Linkkien on erotuttava visuaalisesti ympäröivästä tekstistä. Niiden tulisi olla kuvaavia ja ytimekkäitä ja kertoa käyttäjille, mitä he löytävät linkkiä seuratessaan. Älä koskaan käytä "klikkaa tästä" tai "lue lisää" linkkitekstinä ilman lisäkontekstia, sillä nämä lauseet ovat merkityksettömiä ruudunlukijakäyttäjille, jotka navigoivat linkkilistojen avulla.

Navigaatio ja johdonmukaisuus

Navigaation on oltava johdonmukaista sivustosi kaikilla sivuilla. Käyttäjät, jotka turvautuvat näppäimistönavigaatioon tai ruudunlukijoihin, rakentavat mentaalisen mallin sivustosi rakenteesta, ja odottamattomat muutokset häiritsevät tätä mallia. WCAG vaatii, että useilla sivuilla esiintyvät navigointimekanismit esiintyvät samassa suhteellisessa järjestyksessä joka kerta ja että samalla toiminnallisuudella varustetut komponentit tunnistetaan johdonmukaisesti.

Fokusindikaattorit

Kun käyttäjä navigoi sivustollasi näppäimistöllä, näkyvän indikaattorin on osoitettava, millä elementillä on kulloinkin fokus. Tämän fokusindikaattorin on oltava selvästi näkyvissä — WCAG 2.2 vaatii, ettei muu sisältö peitä sitä (SC 2.4.11) ja tasolla AAA, että koko fokusindikaattori ja kohdistettu komponentti ovat täysin näkyvissä (SC 2.4.12).

Suunnittele fokusindikaattorit tarkoituksella. Selaimen oletusääriviiva on usein riittämätön tai CSS-nollaus poistaa sen. Suunnittele mukautettu fokustyyli, jolla on riittävä kontrasti ja joka on visuaalisesti huomattava.

Kosketuskohteiden koot

Vuorovaikutteisten elementtien on oltava riittävän suuria aktivoitaviksi ilman vaikeuksia. WCAG 2.2 vaatii, että vuorovaikutteiset kohteet ovat vähintään 24×24 CSS-pikseliä (SC 2.5.8), mukaan lukien kohteen ympärillä oleva tyhjä tila. Tasolla AAA vaatimus nousee 44×44 pikseliin (SC 2.5.5). Tämä hyödyttää käyttäjiä, joilla on motorisia vammoja, vapinaa tai rajoittunutta kätevyyttä, sekä kaikkia, jotka käyttävät mobiililaitetta epävakaassa ympäristössä.

Lomakesuunnittelu

Lomakkeet ovat yksi saavutettavan suunnittelun kriittisimmistä alueista. Jokaisella lomakkeen elementillä on oltava selkeästi näkyvä tunniste, joka kertoo käyttäjälle, mitä tietoa antaa. Virheilmoitusten on oltava tarkkoja, näkyviä ja sijoitettuja sen kentän lähelle, jota ne koskevat. Anna tarvittaessa ohjeita ja vältä paikanvaraajatekstin käyttämistä ainoana tunnisteena — paikanvaraajateksti katoaa, kun käyttäjä alkaa kirjoittaa, ja sen kontrasti on usein riittämätön.

Suunnittele virheiden ennaltaehkäisyä varten. Salli käyttäjien tarkistaa ja korjata syötteet ennen lähettämistä, erityisesti toiminnoissa, joilla on merkittäviä seurauksia, kuten rahoitustapahtumat tai oikeudelliset sopimukset. Kun virheitä havaitaan, anna selkeät ehdotukset niiden korjaamiseksi.

Liike ja animaatio

Jotkut käyttäjät kokevat kohtauksia, migreenejä tai huimausta animoidusta tai vilkkuvasta sisällöstä. Mikään verkkosivustollasi ei saa vilkkua useammin kuin kolme kertaa sekunnissa. Tarjoa säätimet tauottamiseen, pysäyttämiseen tai piilottamiseen kaikelle sisällölle, joka liikkuu, vilkkuu tai vierittää yli viisi sekuntia. Kunnioita käyttöjärjestelmän "prefers-reduced-motion" -asetusta ja tarjoa vähennettyjä liikevaihtoehtojen animaatioita.

Tekstikuvat

Vältä tekstikuvien käyttöä verkkosivustollasi. Todellista tekstiä voidaan suurentaa, muotoilla uudelleen ja avustavat teknologiat voivat lukea sitä. Tekstikuvia ei voida. Ainoat poikkeukset ovat logot ja tilanteet, joissa tekstin erityinen visuaalinen esitys on välttämätön välitettävälle tiedolle.

Suunnittelijan saavutettavuustarkistuslista

Ennen minkään suunnitelman luovuttamista kehitykseen, varmista: kontrastisuhteet täyttävät vaatimukset kaikelle tekstille ja vuorovaikutteisille elementeille; väri ei ole koskaan ainoa informaation indikaattori; fokustilat on suunniteltu kaikille vuorovaikutteisille elementeille; kosketuskohteet täyttävät vähimmäiskokovaatimukset; navigaatio on johdonmukaista kaikilla sivuilla; virhetilat ja viestintä on selkeästi suunniteltu; teksti voidaan suurentaa rikkomatta asetteluja; animaatiot kunnioittavat käyttäjien asetuksia; ja kaikelle ei-tekstuaaliselle sisällölle on suunnitellut tekstivaihtoehdot.