{"id":3142,"date":"2022-11-15T10:09:22","date_gmt":"2022-11-15T10:09:22","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/4-common-web-accessibility-issues-to-know\/"},"modified":"2026-03-09T13:10:53","modified_gmt":"2026-03-09T13:10:53","slug":"kontrastisuhteen-ongelma","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fi\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 yleist\u00e4 web-saavutettavuusongelmaa, jotka on hyv\u00e4 tiet\u00e4\u00e4"},"content":{"rendered":"

Kontrastisuhteen ongelma<\/h2>\n\n\n\n

Yleisin esteett\u00f6myysongelma, jonka olen n\u00e4hnyt vuosien varrella, on se, ett\u00e4 kontrasti ja v\u00e4rin saavutettavuusongelma<\/b>, huono kontrastisuhde vaikeuttaa sivusi sis\u00e4ll\u00f6n n\u00e4kemist\u00e4, mik\u00e4 on eritt\u00e4in haitallista k\u00e4ytt\u00e4jillesi, my\u00f6s niille, joilla on n\u00e4k\u00f6vamma. <\/p>\n\n\n\n

Kontrasti on kahden v\u00e4rin havaitun \"luminanssin\" tai kirkkauden eron mitta, esimerkiksi sivun sis\u00e4ll\u00f6n taustav\u00e4rin ja etualan v\u00e4rin v\u00e4linen ero. Katsotaanpa t\u00e4t\u00e4 navigaattoripalkkia.<\/p>\n\n\n\n

\"navigaatiopalkki<em>palkki<\/em>vihreill\u00e4<em>otsikoilla<\/em>\"<\/figure>\n\n\n\n

Oletetaan, ett\u00e4 asiakkaasi todella pit\u00e4\u00e4 tuosta vihert\u00e4v\u00e4st\u00e4 v\u00e4rist\u00e4 ja pit\u00e4\u00e4 sit\u00e4 mahtavana, mutta kontrastin kanssa on ongelmia. Meill\u00e4 on #FFFFFFFF<\/code> tausta, jossa on #83A94C<\/code> tekstin v\u00e4ri, jolloin kontrastisuhde on 2,71:1, mik\u00e4 on paljon alle v\u00e4himm\u00e4isvaatimuksen. 4.5:1<\/strong> tarvitaan. T\u00e4m\u00e4n ongelman havaitsemiseksi meill\u00e4 on useita ratkaisuja: <\/p>\n\n\n\n

    \n
  1. K\u00e4yt\u00e4 verkossa olevaa kontrastin tarkistusohjelmaa, kuten Webaim Contrast Checker<\/a>, joka laskee kontrastisuhteen ja antaa teille Pass<\/strong> tai Fail<\/strong> luokka.<\/li>\n\n\n\n
  2. K\u00e4yt\u00e4 jotakin monista selaimen kontrastin tarkistuslaajennuksista, esim: WCAG V\u00e4rikontrastin tarkistusohjelma<\/a>.<\/li>\n\n\n\n
  3. Kokeile selaimen integroitua kontrastin tarkistusohjelmaa. Voit k\u00e4ytt\u00e4\u00e4 sit\u00e4 Google Chromessa avaamalla dev-ty\u00f6kalut, tarkastamalla kohteena olevan elementin (esim. navigaattoripalkin Home-linkki), siirtym\u00e4ll\u00e4 CSS-v\u00e4riominaisuuteen ja napsauttamalla v\u00e4risuorakulmaa avaat v\u00e4rivalitsimen, jonka alareunassa n\u00e4kyy kontrastisuhteen arvo, laajenna sit\u00e4 saadaksesi lis\u00e4tietoja. Prosessi on t\u00e4sm\u00e4lleen sama Firefoxissa, vain pieni ero suhteessa n\u00e4kyy v\u00e4rinvalitsimen vasemmassa alareunassa.<\/li>\n<\/ol>\n\n\n\n
    \"musta<em>tausta<\/em><\/figure>\n\n\n\n

    Saadaksesi lis\u00e4tietoja kontrastista tarkista t\u00e4m\u00e4 Kontrasti ja v\u00e4rien saavutettavuus Artikkeli<\/a>.<\/p>\n\n\n\n

    Linkin tekstin ongelma<\/h2>\n\n\n\n

    Linkit ovat iso osa web<\/a> joten niiden saatavuuden parantaminen on eritt\u00e4in t\u00e4rke\u00e4\u00e4. Linkin on oltava j\u00e4rkev\u00e4 ja sen on kerrottava k\u00e4ytt\u00e4j\u00e4lle asiayhteydest\u00e4\u00e4n, joten ep\u00e4informatiivinen linkki, jossa on teksti kuten Lue lis\u00e4\u00e4, klikkaa t\u00e4st\u00e4, tarkista yksityiskohdat, ei ole kovin hy\u00f6dyllinen. tuote<\/a> yksityiskohdat, esimerkiksi tuotteen nimen, kuten \"Mandalorian kyp\u00e4r\u00e4\", k\u00e4ytt\u00e4minen on parempi ja informatiivisempi. Sellaiset sanat kuin klikkaa t\u00e4st\u00e4<\/code> tai enemm\u00e4n<\/code> voidaan j\u00e4tt\u00e4\u00e4 pois, koska linkki on oletusarvoisesti napsautettavissa, ja esimerkiksi \"lis\u00e4\u00e4 t\u00e4m\u00e4n p\u00e4iv\u00e4n uutisista\" voidaan lyhent\u00e4\u00e4 muotoon \"t\u00e4m\u00e4n p\u00e4iv\u00e4n uutiset\". Linkin pituudelle ei ole mit\u00e4\u00e4n erityist\u00e4 s\u00e4\u00e4nt\u00f6\u00e4 tai rajoitusta, vaan linkin on oltava luettavissa<\/b> ja riitt\u00e4v\u00e4n pitk\u00e4, jotta sen tarkoitus voidaan kuvata hyvin.<\/p>\n\n\n\n

    Kuvat linkkein\u00e4 ovat laajalti k\u00e4ytetty malli, joten t\u00e4ss\u00e4 on noudatettava samoja s\u00e4\u00e4nt\u00f6j\u00e4, joista puhuimme edell\u00e4. Kuvan alt-attribuutti toimii linkkitekstin roolissa, ja ruudunlukijat ilmoittavat sen. Kuvien k\u00e4sittelemisess\u00e4 linkkein\u00e4 on useita tapauskohtaisia skenaarioita, jos kuva on linkin ainoa sis\u00e4lt\u00f6, sill\u00e4 on oltava alt-attribuutti, jos linkiss\u00e4 on teksti\u00e4 ja kuvaa, alt-attribuutti voidaan j\u00e4tt\u00e4\u00e4 pois, t\u00e4ss\u00e4 on muutamia esimerkkej\u00e4:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Ilmoitukset">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Tutustu linkkeihin t\u00e4\u00e4ll\u00e4 ja lue linkkien saavutettavuudesta:Linkkiteksti ja ulkon\u00e4k\u00f6<\/a>, Toiminnalliset kuvat<\/a>.<\/p>\n\n\n\n
    Lomakkeen sy\u00f6tteest\u00e4 puuttuu etiketti<\/h2>\n\n\n\n
    \"input<em>labels<\/em>with<em>blue<\/em>button\"<\/figure>\n\n\n\n
    Olemme kaikki ennenkin n\u00e4hneet lomakkeen sy\u00f6tteit\u00e4, joissa ei ole merkint\u00e4\u00e4 ja joissa on vain paikanvaraaja, joka kuvaa sy\u00f6tteen tarkoitusta. Ensimm\u00e4inen huomio on, ett\u00e4 heti kun k\u00e4ytt\u00e4j\u00e4 t\u00e4ytt\u00e4\u00e4 kaikki sy\u00f6tteet ja paikanpit\u00e4j\u00e4t eiv\u00e4t ole en\u00e4\u00e4 n\u00e4kyviss\u00e4, meill\u00e4 ei ole visuaalista kontekstia sy\u00f6tteen tarkoituksesta, mutta anna k\u00e4ytt\u00e4j\u00e4n t\u00e4ytt\u00e4\u00e4 kaikki sy\u00f6tteet. us<\/a> keskity t\u00e4ss\u00e4 yhteydess\u00e4 saavutettavuuteen. <\/p>\n\n\n\n
    Yhdist\u00e4minen etiketti<\/code> sy\u00f6tt\u00f6\u00f6n antaa meille kaksi merkitt\u00e4v\u00e4\u00e4 etua: ruudunlukija lukee etiketin, kun k\u00e4ytt\u00e4j\u00e4 keskittyy lomakkeen sy\u00f6tt\u00f6\u00f6n, ja kun etiketti\u00e4 napsautetaan tai sit\u00e4 kosketetaan\/taputetaan, selain siirt\u00e4\u00e4 fokuksen siihen liittyv\u00e4\u00e4n sy\u00f6tt\u00f6\u00f6n. Helppo ratkaisu t\u00e4llaiseen tilanteeseen on vain lis\u00e4t\u00e4 tarrat seuraavasti:<\/p>\n\n\n\n
        Etunimi\n\n    \n  \n\n    Sukunimi\n\n    \n  \n\n    S\u00e4hk\u00f6postiosoite\n\n    \n  \n\n    L\u00e4het\u00e4\n  \n\n```<\/code><\/pre>\n\n\n\n
    Siin\u00e4 kaikki, kaikilla sy\u00f6tteill\u00e4 on niihin liittyv\u00e4t merkinn\u00e4t, joten ne ovat kaikkien k\u00e4ytett\u00e4viss\u00e4. Voimme jopa poistaa paikannussalpaajat, jotta v\u00e4lt\u00e4mme sy\u00f6tt\u00f6tarkoituksen p\u00e4\u00e4llekk\u00e4isyyden, mutta tied\u00e4mme kaikki, ett\u00e4 todelliset tilanteet eiv\u00e4t ole niin helppoja, kun olet juuri saanut mallin, jossa lomakkeen sy\u00f6tt\u00f6tiedot ovat ilman merkint\u00f6j\u00e4, eik\u00e4 asiakas halua muuttaa t\u00e4t\u00e4 osaa. Ensimm\u00e4inen mieleen tuleva ratkaisu on soveltaa display: none;<\/code> tai n\u00e4kyvyys: piilotettu;<\/code> tarroihimme, t\u00e4m\u00e4 piilottaa ne, mutta ne ovat silti siell\u00e4, eik\u00f6 niin? N\u00e4m\u00e4 ominaisuudet piilottavat elementtej\u00e4 paitsi n\u00e4yt\u00f6ll\u00e4 my\u00f6s ruudunlukijan k\u00e4ytt\u00e4jille, joten t\u00e4m\u00e4 ei ratkaise ongelmaamme.<\/p>\n\n\n\n
    Voimme k\u00e4ytt\u00e4\u00e4 leikekuvio<\/strong> ratkaisemaan t\u00e4m\u00e4n. T\u00e4ll\u00e4 tavoin piilotamme sis\u00e4ll\u00f6n visuaalisesti, mutta tarjoamme sen silti ruudunlukijoille. Luomme seuraavan CSS:n Vain sr-verkkosivusto<\/code> luokkaa ja soveltaa sit\u00e4 kaikkiin tarroihimme:<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0 0 0);\n   clip-path: inset(50%);\n   height: 1px;\n   overflow: hidden;\n   position: absolute;\n   white-space: nowrap;\n   width: 1px;\n }\n<\/code><\/code><\/pre>\n\n\n\n
    T\u00e4m\u00e4 piilottaa merkinn\u00e4t, tekee niist\u00e4 ruudunlukijoiden k\u00e4ytett\u00e4viss\u00e4 olevia ja sopii ulkoasuun. Osoite :not(:focus):not(:active)<\/code> pseudo-luokka est\u00e4\u00e4 fokusoitavat elementit, kuten esimerkiksi a<\/code>, painike<\/code>, sy\u00f6tt\u00f6<\/code> piiloutumasta, kun se vastaanottaa tarkennuksen.<\/p>\n\n\n\n
    Ei tarkennusilmaisinta<\/h2>\n\n\n\n
    Aikoinaan tein t\u00e4m\u00e4n globaalissa CSS-tyylitaulussa:<\/p>\n\n\n\n
    * {\noutline: none; \/* kauhea virhe *\/\n}<\/code><\/pre>\n\n\n\n
    Noin 2020 Huomasin mustat rajat n\u00e4kyv\u00e4t Google Chrome -lomakkeen sy\u00f6tteiss\u00e4, kun ne on tarkennettu tai painikkeissa, kun ne on siirretty - se oli todella outoa, koska en ymm\u00e4rt\u00e4nyt sit\u00e4 tuolloin, jonkin verran tutkimuksen j\u00e4lkeen olen selvitt\u00e4nyt, ett\u00e4 se johtuu \u00e4\u00e4riviivojen CSS-ominaisuudesta, joten poistaminen ratkaisi tuon \"ongelman\" minulle.<\/p>\n\n\n\n
    Tuolloin minulla ei ollut aavistustakaan siit\u00e4, mik\u00e4 oli oikea tapa tehd\u00e4 se.  Tutkittuani hieman t\u00e4m\u00e4n uuden oletusarvon syit\u00e4 ja tapoja sain selville, ett\u00e4 \u00e4\u00e4riviivat ovat elementin tarkennuksen osoitin, ja jos ne poistetaan, on annettava ilmeinen tarkennuksen muotoilu, joten periaatteessa sit\u00e4, mit\u00e4 tein, pidet\u00e4\u00e4n huonona k\u00e4yt\u00e4nt\u00f6n\u00e4. Voit muokata tarkennusindikaattoreita parhaaksi katsomallasi tavalla, mutta niiden poistaminen kokonaan verkkosivustolta on suuri esteett\u00f6myysongelma. Elementin tarkennuksen muotoilun mukauttaminen on esimerkiksi melko helppoa:<\/p>\n\n\n\n
     a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n
    Esteett\u00f6myysty\u00f6kalut<\/h2>\n\n\n\n
    Kaikkien k\u00e4sittelemiemme asioiden tarkistaminen voi olla paljon ty\u00f6t\u00e4, varsinkin kun tied\u00e4mme, ett\u00e4 esteett\u00f6myydest\u00e4 on paljon muutakin kerrottavaa, joten esteett\u00f6myyden k\u00e4sittelemiseksi meill\u00e4 on kaksi loistavaa selainlaajennusta.<\/p>\n\n\n\n
    WAVE-arviointity\u00f6kalu<\/a> on arviointity\u00f6kalupaketti, joka auttaa meit\u00e4 tekem\u00e4\u00e4n verkkosis\u00e4ll\u00f6st\u00e4mme helpommin saavutettavaa. Se on k\u00e4ytett\u00e4viss\u00e4 sek\u00e4 Google Chromessa ett\u00e4 Firefoxissa. <\/p>\n\n\n\n
    Kokeillaan sit\u00e4 pienell\u00e4 verkkosivulla, joka sis\u00e4lt\u00e4\u00e4 navigaattoripalkin ja sy\u00f6tteen, jolta puuttuu etiketti, ja katsotaan, mit\u00e4 se palauttaa, laajennuksen asentamisen j\u00e4lkeen meid\u00e4n tarvitsee vain napsauttaa laajennuksen kuvaketta k\u00e4ytt\u00e4\u00e4ksemme sit\u00e4.<\/p>\n\n\n\n
    \"valkoinen<em>ikkuna<\/em>,<\/figure>\n\n\n\n
    Yhteenveto-v\u00e4lilehdell\u00e4 n\u00e4kyy 1 virhe (lomakkeen elementist\u00e4 puuttuu merkint\u00e4), 2 kontrastivirhett\u00e4 ja 1 h\u00e4lytys (puuttuva otsikkorakenne), kuten n\u00e4et, tulos on hyvin selke\u00e4 ja yksityiskohtainen. Yksityiskohdat-v\u00e4lilehti n\u00e4ytt\u00e4\u00e4 luettelon kaikista virheist\u00e4, h\u00e4lytyksist\u00e4 ja ominaisuuksista. Voimme my\u00f6s olla vuorovaikutuksessa suoraan sivulla klikkaamalla noita punaisia suorakulmioita tarkistaaksemme virheen kuvauksen ja tyypin.<\/p>\n\n\n\n
    Axe DevTools<\/a> on tehokas ja tarkka saavutettavuuden ty\u00f6kalupakki. Se on k\u00e4ytett\u00e4viss\u00e4 sek\u00e4 Google Chromessa ett\u00e4 Firefoxissa. Laajennuksen asentamisen j\u00e4lkeen meid\u00e4n on avattava selaimen dev-ty\u00f6kalut ja ment\u00e4v\u00e4 axe DevTools -v\u00e4lilehdelle ja napsautettava Scan all of my pages.<\/p>\n\n\n\n
    \"DevTools<em>ikkuna<\/em><\/figure>\n\n\n\n
    N\u00e4et, ett\u00e4 Axe DevTools on raportoinut samoista ongelmista WAVE Evaluation Toolin kanssa, jotka ovat kontrastiongelmia, lomakkeen elementist\u00e4 puuttuu etiketti ja otsikkoelementti puuttuu, ja se jopa antoi meille joitakin parhaita k\u00e4yt\u00e4nt\u00f6j\u00e4 noudatettavaksi.<\/p>\n\n\n\n
    Toinen tapa testata esteett\u00f6myytt\u00e4 on k\u00e4ytt\u00e4\u00e4 ruudunlukijaa ja testata verkkosivustoasi sen avulla; saatavilla on monia ruudunlukuohjelmia, vain muutamia mainitakseni:<\/p>\n\n\n\n