4 yleistä web-saavutettavuusongelmaa, jotka on hyvä tietää

Kontrastisuhteen ongelma

Yleisin esteettömyysongelma, jonka olen nähnyt vuosien varrella, on se, että kontrasti ja värin saavutettavuusongelma, huono kontrastisuhde vaikeuttaa sivusi sisällön näkemistä, mikä on erittäin haitallista käyttäjillesi, myös niille, joilla on näkövamma.

Kontrasti on kahden värin havaitun "luminanssin" tai kirkkauden eron mitta, esimerkiksi sivun sisällön taustavärin ja etualan värin välinen ero. Katsotaanpa tätä navigaattoripalkkia.

Oletetaan, että asiakkaasi todella pitää tuosta vihertävästä väristä ja pitää sitä mahtavana, mutta kontrastin kanssa on ongelmia. Meillä on #FFFFFFFF tausta, jossa on #83A94C tekstin väri, jolloin kontrastisuhde on 2,71:1, mikä on paljon alle vähimmäisvaatimuksen. 4.5:1 tarvitaan. Tämän ongelman havaitsemiseksi meillä on useita ratkaisuja:

1. Käytä verkossa olevaa kontrastin tarkistusohjelmaa, kuten Webaim Contrast Checker, joka laskee kontrastisuhteen ja antaa teille Pass tai Fail luokka.
2. Käytä jotakin monista selaimen kontrastin tarkistuslaajennuksista, esim: WCAG Värikontrastin tarkistusohjelma.
3. Kokeile selaimen integroitua kontrastin tarkistusohjelmaa. Voit käyttää sitä Google Chromessa avaamalla dev-työkalut, tarkastamalla kohteena olevan elementin (esim. navigaattoripalkin Home-linkki), siirtymällä CSS-väriominaisuuteen ja napsauttamalla värisuorakulmaa avaat värivalitsimen, jonka alareunassa näkyy kontrastisuhteen arvo, laajenna sitä saadaksesi lisätietoja. Prosessi on täsmälleen sama Firefoxissa, vain pieni ero suhteessa näkyy värinvalitsimen vasemmassa alareunassa.

Saadaksesi lisätietoja kontrastista tarkista tämä Kontrasti ja värien saavutettavuus Artikkeli.

Linkin tekstin ongelma

Linkit ovat nykyään suuri osa verkkoa, joten niiden saatavuus on erittäin tärkeää. Linkin on oltava järkevä ja sen on kerrottava käyttäjälle asiayhteydestään, joten epäinformatiivinen linkki, jossa on teksti kuten Lue lisää, klikkaa tästä, tarkista yksityiskohdat, ei ole kovin hyödyllinen. tuote yksityiskohdat, esimerkiksi tuotteen nimen, kuten "Mandalorian kypärä", käyttäminen on parempi ja informatiivisempi. Sellaiset sanat kuin klikkaa tästä tai enemmän voidaan jättää pois, koska linkki on oletusarvoisesti napsautettavissa, ja esimerkiksi "lisää tämän päivän uutisista" voidaan lyhentää muotoon "tämän päivän uutiset". Linkin pituudelle ei ole mitään erityistä sääntöä tai rajoitusta, vaan linkin on oltava luettavissa ja riittävän pitkä, jotta sen tarkoitus voidaan kuvata hyvin.

Kuvat linkkeinä ovat laajalti käytetty malli, joten tässä on noudatettava samoja sääntöjä, joista puhuimme edellä. Kuvan alt-attribuutti toimii linkkitekstin roolissa, ja ruudunlukijat ilmoittavat sen. Kuvien käsittelemisessä linkkeinä on useita tapauskohtaisia skenaarioita, jos kuva on linkin ainoa sisältö, sillä on oltava alt-attribuutti, jos linkissä on tekstiä ja kuvaa, alt-attribuutti voidaan jättää pois, tässä on muutamia esimerkkejä:

<a href="/fi/notifications/">
  <img src="/img/notification.png" alt="Ilmoitukset">
</a>

Tutustu linkkeihin täällä ja lue linkkien saavutettavuudesta:Linkkiteksti ja ulkonäkö, Toiminnalliset kuvat.

Lomakkeen syötteestä puuttuu etiketti

Olemme kaikki ennenkin nähneet tällaisia lomakkeen syötteitä, joissa ei ole merkintää ja joissa on vain kenttämerkintä, joka kuvaa syötteen tarkoitusta. Ensimmäinen huomio on, että kun käyttäjä täyttää kaikki syötteet ja sijoitussalpaajat eivät ole enää näkyvissä, meillä ei ole visuaalista kontekstia syötteen tarkoituksesta, mutta keskitytään tässä yhteydessä saavutettavuuteen.

Yhdistäminen etiketti syöttöön antaa meille kaksi merkittävää etua: ruudunlukija lukee etiketin, kun käyttäjä keskittyy lomakkeen syöttöön, ja kun etikettiä napsautetaan tai sitä kosketetaan/taputetaan, selain siirtää fokuksen siihen liittyvään syöttöön. Helppo ratkaisu tällaiseen tilanteeseen on vain lisätä tarrat seuraavasti:

    Etunimi

    
  

    Sukunimi

    
  

    Sähköpostiosoite

    
  

    Lähetä
  

```

Siinä kaikki, kaikilla syötteillä on niihin liittyvät merkinnät, joten ne ovat kaikkien käytettävissä. Voimme jopa poistaa paikannussalpaajat, jotta vältämme syöttötarkoituksen päällekkäisyyden, mutta tiedämme kaikki, että todelliset tilanteet eivät ole niin helppoja, kun olet juuri saanut mallin, jossa lomakkeen syöttötiedot ovat ilman merkintöjä, eikä asiakas halua muuttaa tätä osaa. Ensimmäinen mieleen tuleva ratkaisu on soveltaa display: none; tai näkyvyys: piilotettu; tarroihimme, tämä piilottaa ne, mutta ne ovat silti siellä, eikö niin? Nämä ominaisuudet piilottavat elementtejä paitsi näytöllä myös ruudunlukijan käyttäjille, joten tämä ei ratkaise ongelmaamme.

Voimme käyttää leikekuvio ratkaisemaan tämän. Tällä tavoin piilotamme sisällön visuaalisesti, mutta tarjoamme sen silti ruudunlukijoille. Luomme seuraavan CSS:n Vain sr-verkkosivusto luokkaa ja soveltaa sitä kaikkiin tarroihimme:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
 }

Tämä piilottaa merkinnät, tekee niistä ruudunlukijoiden käytettävissä olevia ja sopii ulkoasuun. Osoite :not(:focus):not(:active) pseudo-luokka estää fokusoitavat elementit, kuten esimerkiksi a, painike, syöttö piiloutumasta, kun se vastaanottaa tarkennuksen.

Ei tarkennusilmaisinta

Aikoinaan tein tämän globaalissa CSS-tyylitaulussa:

* {
outline: none; /* kauhea virhe */
}

Noin 2020 Huomasin mustat rajat näkyvät Google Chrome -lomakkeen syötteissä, kun ne on tarkennettu tai painikkeissa, kun ne on siirretty - se oli todella outoa, koska en ymmärtänyt sitä tuolloin, jonkin verran tutkimuksen jälkeen olen selvittänyt, että se johtuu ääriviivojen CSS-ominaisuudesta, joten poistaminen ratkaisi tuon "ongelman" minulle.

Tuolloin minulla ei ollut aavistustakaan siitä, mikä oli oikea tapa tehdä se. Tutkittuani hieman tämän uuden oletusarvon syitä ja tapoja sain selville, että ääriviivat ovat elementin tarkennuksen osoitin, ja jos ne poistetaan, on annettava ilmeinen tarkennuksen muotoilu, joten periaatteessa sitä, mitä tein, pidetään huonona käytäntönä. Voit muokata tarkennusindikaattoreita parhaaksi katsomallasi tavalla, mutta niiden poistaminen kokonaan verkkosivustolta on suuri esteettömyysongelma. Elementin tarkennuksen muotoilun mukauttaminen on esimerkiksi melko helppoa:

 a:focus {
   outline: 4px solid #ee7834;
   outline-offset: 4px;
 }

Esteettömyystyökalut

Kaikkien käsittelemiemme asioiden tarkistaminen voi olla paljon työtä, varsinkin kun tiedämme, että esteettömyydestä on paljon muutakin kerrottavaa, joten esteettömyyden käsittelemiseksi meillä on kaksi loistavaa selainlaajennusta.

WAVE-arviointityökalu on arviointityökalupaketti, joka auttaa meitä tekemään verkkosisällöstämme helpommin saavutettavaa. Se on käytettävissä sekä Google Chromessa että Firefoxissa.

Kokeillaan sitä pienellä verkkosivulla, joka sisältää navigaattoripalkin ja syötteen, jolta puuttuu etiketti, ja katsotaan, mitä se palauttaa, laajennuksen asentamisen jälkeen meidän tarvitsee vain napsauttaa laajennuksen kuvaketta käyttääksemme sitä.

Yhteenveto-välilehdellä näkyy 1 virhe (lomakkeen elementistä puuttuu merkintä), 2 kontrastivirhettä ja 1 hälytys (puuttuva otsikkorakenne), kuten näet, tulos on hyvin selkeä ja yksityiskohtainen. Yksityiskohdat-välilehti näyttää luettelon kaikista virheistä, hälytyksistä ja ominaisuuksista. Voimme myös olla vuorovaikutuksessa suoraan sivulla klikkaamalla noita punaisia suorakulmioita tarkistaaksemme virheen kuvauksen ja tyypin.

Axe DevTools on tehokas ja tarkka saavutettavuuden työkalupakki. Se on käytettävissä sekä Google Chromessa että Firefoxissa. Laajennuksen asentamisen jälkeen meidän on avattava selaimen dev-työkalut ja mentävä axe DevTools -välilehdelle ja napsautettava Scan all of my pages.

Näet, että Axe DevTools on raportoinut samoista ongelmista WAVE Evaluation Toolin kanssa, jotka ovat kontrastiongelmia, lomakkeen elementistä puuttuu etiketti ja otsikkoelementti puuttuu, ja se jopa antoi meille joitakin parhaita käytäntöjä noudatettavaksi.

Toinen tapa testata esteettömyyttä on käyttää ruudunlukijaa ja testata verkkosivustoasi sen avulla; saatavilla on monia ruudunlukuohjelmia, vain muutamia mainitakseni:

• NVDA
• VoiceOver on saatavilla macOs-laitteissa.
• Orca on ilmainen ja avoimen lähdekoodin näytönlukija linuxille.

Yhteenveto

Olemme nähneet tässä artikkelissa joitakin yleisiä esteettömyysongelmia, tapoja niiden ratkaisemiseksi ja joitakin hyviä työkaluja esteettömyyden testaamiseen. Vielä on paljon muuta käsiteltävää sellaisten elementtien kuin dialogien, akordionien ja karusellien saavutettavuudesta, mutta kuten olet nähnyt tässä artikkelissa, on olemassa runsaasti dokumentaatiota ja työkaluja, jotka auttavat sinua käsittelemään saavutettavuutta.

Joitakin keskeisiä seikkoja, jotka on hyvä muistaa:

• Tarkista aina kontrastisuhde.
• Tarjoa aina informatiivista sisältöä linkkeihin.
• Lomake-elementillä on oltava siihen liittyvä etiketti.
• On tarjottava ilmeinen tarkennusmuotoilu.