lahtinen.me

Blog

  • Hover:in kontrastin testaamiseen apuväline

    Joe Dolson joka on muunmuuassa tehnyt WordPress alustalle saavutettavuus tarkistus työkalua on julkaissut bookmarkletin jolla pystyy tarkastelemaan hover:in kontrastin saavutettavuutta.

    Hoverin kontarasti suhteen tarkastelu on vähintäänkin aikaa vievää puuhaa ja se herkästi jää tarkemmiltakin saavutettavuus auditoijilta tekemättä. Yleensä joutuu valitsemaan siis elementin ja Developer toolseista valitsemaan hover: atribuutin. Tätä kun tehdään jokaiselle komponentille jolla on hover asetettuna menee siihen paljon aikaa.

    Bookmarklettia on siis helppo käyttää. Se lisätään esimerkiksi Chromen 

    javascript:void%20function(){var%20a=Math.pow;function%20b(a){var%20b=new%20MouseEvent(%22mouseover%22,{view:window,bubbles:!0,cancelable:!0}),d=!a.dispatchEvent(b);if(d)console.log(a);else{var%20f=c(a,%22background%22),g=c(a,%22foreground%22),h=e(f,g).toPrecision(3),i=getComputedStyle(a).fontSize;i=parseInt(i.replace(%22px%22,%22%22));var%20j=parseInt(getComputedStyle(a).fontWeight),k=!!(600%3Cj%26%2618.75%3Ci||600%3Ej%26%2624%3Ci),l=k%3F3:4.5;if(h%3Cl){hasRatio=a.querySelector(%22.contrast-ratio-test%22),hasRatio%26%26hasRatio.remove(),b.target.style.outline=%222px%20solid%20%23c00%22,b.target.style.outlineOffset=%222px%22;var%20m=document.createElement(%22span%22);m.classList.add(%22contrast-ratio-test%22),m.innerText=h,m.style.display=%22block%22,m.style.border=%221px%20solid%22,m.style.color=%22black%22,m.style.backgroundColor=%22%23f3f3f3%22,m.style.padding=%223px%22,m.style.borderRadius=%223px%22,m.style.borderWidth=%222px%22,m.style.marginLeft=%223px%22,m.style.position=%22relative%22,m.style.zIndex=%2210%22,m.style.minWidth=%22fit-content%22,a.insertAdjacentElement(%22beforeend%22,m)}}}function%20c(a,b){for(;a;){const%20c=%22background%22===b%3Fwindow.getComputedStyle(a).backgroundColor:window.getComputedStyle(a).color;if(%22rgba(0,%200,%200,%200)%22===c){a=a.parentNode;continue}const%20e=c.match(/\d+/g);return%203===e.length%3Fd(e.map(a=%3EparseInt(a,10))):null}return%20null}function%20d(a){return%22%23%22+a.map(a=%3Ea.toString(16).padStart(2,%220%22)).join(%22%22)}function%20e(a,b){const%20c=f(a),d=f(b),e=Math.max(c,d),g=Math.min(c,d);return(e+.05)/(g+.05)}function%20f(c){const%20d=h(c),[e,f,g]=d.map(b=%3E(b/=255,.03928%3E=b%3Fb/12.92:a((b+.055)/1.055,2.4)));return%20.2126*e+.7152*f+.0722*g}function%20h(a){a=a.replace(/^%23%3F([a-f\d])([a-f\d])([a-f\d])$/i,(a,c,d,e)=%3Ec+c+d+d+e+e);const%20b=/^%23%3F([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);return%20b%3F[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16)]:null}(function(){const%20a=document.querySelectorAll(%22a[href],%20button,%20input,%20textarea,%20select,%20details,%20[tabindex]%22);a.forEach(a=%3E{a.addEventListener(%22mouseover%22,function(){}),setTimeout(b,300,a)})})()}();

    Jos et ole ennen käyttänyt bookmarklettejä niin ne toimii seuraavasti

    1. Raahaa tai lisää bookmarkletti selaimen bookmarkkeihin
    2. Mene testattavana olevaan näkymään
    3. Klikkaa bookmarklettia

    Tämä ajaa JavaScriptin ja se antaa numeraaliset arvot hoverin kontrasti suhteista.

  • Alt-teksti. Miksi ja kuinka.

    Ensimäinen blogi postaukseni lähtee ehkä isommasta ja helpoimmasta haasteesta, joihin käyttäjät törmäävät internetiä selatessaan. Alt-teksti eli vaihtoehtoinen teksti on kuvaan lisättävä <alt-text> tägi, jolla kuvalle annetaan tekstimuotoinen sisältö.

    Alt tekstin lisääminen

    Alt-tekstin lisääminen on yksinkertaista mutta itse tekstin sisältö voi olla välillä hankalaa määrittää. Alt-teksti lisätään img attribuuttiin seuraavasti 

    <img src="img_tytto.jpg" alt="Tyttö jolla on takki päällä" width="500" height="600">

    Alt-tekstin voi myös lisät dynaamisesti ja tulen tekemään siitä omat juttunsa tulevaisuudessa.

    Hyvä alt-teksti

    Koska alt-tekstin lisääminen on helppoa joten se tulisi lisätä kuviin jotta internetin saavutettavuus paranee huomattavasti. Hyvän alt-tekstin laatiminen on välillä vähän haasteellista ja en lähde sitä tässä avaamaan itse sen enempää. Hyviä vinkkejä saa muunmuuassa WebAim:n alt-text oppaasta

    Perus periaatteena kuitenkin on että

    • logot tai koristeelliset kuvat ei tarvitse tekstiä alt atributtiiin vaan niihin voi lisätä vain alt=“ ”
    • Alt teksti ei tulisi sisältää sanaa kuva. Tämä käy jo ilmi ruudunlukijalle <img> tägin kautta.
    • Voit miettiä mitä tietoja jää saamatta jos kuvaa ei näe. Tai mikä on kuvan tarkoitus kontekstissa ja jos kuvan sisältö on jo kerrottu ympäröivässä tekstissä niin tätä ei tulisi toista alt-tekstissä.

    Voit myös opiskella kuvatekstin laatimisesta saavutettavasti.fi sivustolla

    Miksi alt-teksti

    Suurin syy miksi alt-teksti tulisi lisätä on että käyttäjät jotka eivät kuvaa näe saavat sen oleellisen tiedon, joka välittyy kuvan näkeville käyttäjille. Ruudunlukija lukee ilman alt-tekstiä kuvan nimen, joka voi olla esimerkiksi “IMG200402833532.jpg” Tämä ei kerro mitään siitä mitä kuva esittää ja ruudunlukija lukee numerosarjan yksitellen tai kokonaislukuna asetuksista riippuen. Tämä on raskasta kuunneltavaa ja myöskin hämmentävää. Myös käyttäjältä saattaa jäädä jotain tärkeää tietoa saamatta jota kuvan kautta halutaan välittää.

    Toinen iso syy on WCAG 2.1 standardit ja näistä heti ensimäinen WCAG 2.1 1.1.1 Ei-tekstuaalinen sisältö. Voi toki olla että sivustosi tai palvelusi ei kuulu WCAG standardien piiriin mutta miksi et tekisi siitä kuitenkin näiden standardien mukaista. Tämä parantaa muunmuuassa Googlen haku sijoitusta kun sivusto / palvelu on saavuttava ja vastaa WCAG standardeja.

    Vaihtoehtoinen teksti onkin siis yleisin ja ehkä helpoin tapa parantaa sivuston saavutettavuutta. Miksi siis ei sitä tekisi?

    Milloin alt-tekstiä ei tarvita?

    Alt-tekstiä ei tarvita jos kuva tai iconi on koristeellinen eikä se tällöin tuo käyttäjällä sisältöä. Näitä ovat esimerkiksi erottimet tai iconit jotka ovat teksin edellä. Kuitenkin on hyvä muistaa että kun näille ei lisätä alt-teksiä ne tulisi piilottaa myöskin ruudunlukijoilta aria-hidden=true , jotta käyttäjän ei tarvitse näitä elementtejä selata.