Aiemmin artikkelissa ”Millainen on hyvä linkki?” kerroin linkkien hyvistä käytännöistä. Linkin tulisi mm. varoittaa käyttäjää avautumisesta uuteen välilehteen tai siirtymisestä toiselle sivustolle. Tällaisen varoituksen lisääminen on erityisesti tärkeää ruudunlukuohjelmien käyttäjille.
Miksi käyttäjää on varoitettava uuden välilehden avaamisesta?
Jos linkki avautuu uuteen välilehteen, katkeaa selaushistoria ja alkaa uudella välilehdellä uudelleen. Käytännössä tämä siis tarkoittaa sitä, että käyttäjä ei voi palata takaisin aiempiin sivuihin selaimen sivuhistoriassa. Tilanne voi olla hämmentävä ja vaikeuttaa merkittävästi sisällön käyttämistä. Päästäkseen takaisin aiempiin sivuihin, on käyttäjän ensin osattava siirtyä selaimen välilehtiin ja löytää sieltä välilehti, jolta tuli. Tämä on hankalaa ja erityisen hankalaa ilman näköaistia.
Miten varoitus uudesta välilehdestä on annettava?
Varoitukselle ei ole mitään määrämuotoa mutta kuten elämässä yleensä, yksinkertaisin on parhain ja selkein ratkaisu. Varoita uuden välilehden avaamisesta kertomalla se linkin tekstissä.
Linkki voisi olla esimerkiksi seuraavanlainen. Lue artikkeli Miten sivun HTML-rakenne vaikuttaa saavutettavuuteen (sivu avautuu uuteen välilehteen)
Linkki on kuitenkin hyvin pitkä eikä välttämättä vastaa sivun toivottua visuaalista esitystä. Linkkitekstin tehtävä on kertoa mihin linkki johtaa ja tässä tapauksessa se on kohdeartikkelin nimi. Varoituksena annettu teksti ehkä haluttaisiin piilottaa näkeviltä käyttäjiltä mutta kuitenkin jättää se ruudunlukijan luetttavaksi. Yksinkertaisimmillaan tämä tarkoittaa varoitustekstin piilottamista visuaalisesti.
Vaihtoehdot varoitustekstin piilottamiseen
Vaihtoehtoja on käytännössä kaksi:
- Varoitusteksti voidaan piilottaa näkyvistä CSS-tyylien avulla
- Lisätään linkille aria-label otsikkoteksti, jossa on varoitus mukana
Käsittelen tässä artikkelissa ensimmäistä vaihtoehtoa ja sitä miten WordPressissä sisällöntuottaja voi itse lisätä linkille varoitustekstin.
WordPress-julkaisujärjestelmässä on sen ydinominaisuuksissa toteutettu saavutettavuusominaisuuksia varten valmiiksi CSS luokka (class) nimeltä ”screen-reader-text”. Elementti, jolle lisätään tämä class, piilotetaan näkyvistä. Voit lukea lisää tästä CSS luokasta ja siitä miten se on toteutettu WordPressin dokumentaatiosta. WordPress screen-reader-class dokumentaatio sivu avautuu uuteen välilehteen
Piilotetun varoitustekstin lisääminen
Varoitusteksti lisätään linkin tekstiin <span> elementillä, jolle em. screen-reader-text luokka annetaan.
<a
target="_blank"
href="kohdesivunosoite">Linkin näkyvä teksti
<span class="screen-reader-text"> Linkin varoitusteksti</span>
</a>Näkevä käyttäjä näkee vain linkin näkyvän tekstin mutta ruudunlukuohjelma ”näkee” ja lukee myös varoitustekstin.
Miten lisäät WordPressissä linkin tekstiin <span> elementin ja class-määreen?
WordPressin omassa Gutenberg editorin linkki-elementissä ei ole mahdollisuutta lisätä ruudunlukijalle tarkoitettua tekstiä. Tämä on selkeä puute ja minulla on siihen ratkaisu, joten lue artikkeli loppuun. Ensin kuitenkin se vaikeampi tapa, joka WordPressissä on käytettävissä. Sääli sinänsä, että WordPress linkissä ei ole mahdollisuutta ruudunlukijatekstin lisäämiseen kun tarvittava tekniikka on jo käytössä WordPressin ”Lue lisää” painikkeissa. Ainakin melkein.
Kirjoita linkin näkyvä teksti, valitse se hiirellä ja napsauta tekstin yläpuolella kelluvan kontekstivalikon linkki-painiketta. Lisää siihen linkki haluamaasi kohteeseen.
Kun linkki on luotu valitse kolmen päällekäisen pisteen valikosta ”Muokkaa HTML-muodossa”. Nyt linkki näkyy HTML-koodina, johon voit lisätä omat muotoilusi. Lisää tähän koodiin yllä olevan esimerkin mukaisesti linkin tekstin perään <span class="screen-reader-text"> ruudunlukijalle lisäteksti</span> koodi.
Koodin lisäyksen jälkeen napsauta ”Muokkaa graafisesti” painiketta ja olet jälleen editorin oletusasetuksissa. Muista tallettaa muokkauksesi.
Voit muokata sisältöjä WordPressissä HTML-muodossa ja lisätä omia muotoiluja tai tietoja, joita Gutenberg-editorissa ei sellaisenaan valita lisättäviksi.
Oliko hankalaa? Ehkä, mutta koodia taitavalle henkilölle tämä ei ole vaikeaa vaan, ainoastaan työlästä.
Helpompi tapa – valmis linkki-elementti, jossa ruudunlukijoille tarkoitettu tekstikenttä
Edellä kuvattu tapa on toimiva ja sellaisenaan äärimmäisen yksinkertainen. Tosiasia kuitenkin on, että kaikki eivät ole koodin kanssa niin tuttuja, että kokisivat muokkauksen HTML-muodossa edes käyttökelpoiseksi keinoksi. Minulle koodin tuottaminen on tuttua mutta ymmärrän, että on luotava parempi ratkaisu. Joten päätin tehdä asialle jotain ja tuloksena syntyi WordPress laajennos (lisäosa), jolla saavutettavan linkin luonti on helppoa.
Linkr-lisäosa luo saavutettavan linkin
Lisäosan on latauslinkki ja ohjeet löytyvät Seloit Oy lisäosat Sivu avautuu uuteen välilehteen sivulta.
Lisäosan idea on lisätä WordPress editoriin uusi valinta ”Linkki ja ruudunlukijateksti”. Tämä uusi linkki-elemetin lisäys löytyy napsauttamalla elemetin yläpuolella kelluvasta muokkausvalikosta alas osoittavaa ”nuolenkärki” painiketta. Valinnasta avautuu uusi dialogi linkin lisäämiseen.
Ja sivulle tulevan linkin koodi on seuraavanlainen.
Mikäli linkki on asetettu avautumaan uuteen välilehteen näytetään linkin näkyvän tekstin perässä vielä kuvassa näkyvä nuoli indikoimaan linkin ulkoista kohdetta.
Lisäosa on vapaasti käytettävissä. Otan mielelläni vastaan palautetta ja kehitysideoita tai ilmoituksen virheestä mikäli havaitset sellaisen.
Koska lisäosa muokkaa WordPress editoria, se ei toimi (tule näkyviin) esimerkiksi Elementor sivunrakennuslisäosan Widgettejä editoidessa. Kyse on vain WordPress oman editorin ominaisuudesta.
Tutustu lisäosaan ja lataa itsellesi Linkki avautuu uuteen välilehteen