Toki, jos voisin opas saavutettavuuteen

Pseudo-elemetit ::before ja ::after

Me kehittäjät usein lisätään erikoismerkkejä, kuten kolmioita, nuolia tai kustomoituja bullet-listan ikoneita näiden pseudo-elementtien content ominaisuuteen. Mitä moni ei välttämättä tiedä on se, että nämä kyseisen ominaisuuden sisään laitetut sisällöt luetaan myös ruudunlukijoilla. Se, että miten ja millä tavalla nämä luetaan, riippuu sekä selaimesta että ruudunlukijasta. Esimerkiksi Windowsin Narrator ei lue näitä ikoneita tällä sivulla lainkaan, mutta VoiceOver taas lukee.

Testaa nämä esimerkit ruudunlukijalla.

Haasteellinen esimerkki

Tässä on tekstiä

Parempi esimerkki

Tässä on tekstiä

Loppukommentit

Tällä ominaisuudella pitäisi olla mahdollista lisätä sisällölle myös tekstimuotoinen vaihtoehtoinen teksti, mutta tämä ei ole pikaisen testauksen perusteella ainakaan omilla selaimillani ja ruudunlukijoillani toiminut. Mutta tyhjä vaihtoehtoinen teksti tuntuu toimivan varsin luotettavasti.

Firefox ja Safari eivät vielä tue tätä ominaisuutta, joten tarkasta aina tämän ominaisuuden käyttö näillä selaimilla. Selaimet saattavat jättää sisällön visuaalisesti näyttämättä. Tällaisissa tapauksissa suosittelen lisäämään sisällön taustakuvana content-attribuutin sijaan.