To test the accessibility of web pages I often use WAVE. On one of my sites I have a list of talks with links to PDFs of the slides. In WAVE these links where tagged with an alert. It had an icon to mark them as a PDF, but I realised that this will not work in screen readers, because the icon is a background image.
So as a quick fix I decided to use an ::after pseudo-element to add “(PDF)” as text in CSS.
I didn't want to add it in front the link.
Because it would be quite annoying to hear/read in a screen reader, if every link starts with “(PDF)”.
a[href$=".pdf"]::after {
content: ' (PDF)';
}This won’t fix the WAVE alert, by the way.
I posted the code on Mastodon. A comment mentioned that CSS generated content might not be supported by screen readers. It is! But the article by Léonie Watson testing this in different screen readers is from 2015. So I decided to re-test this, just to be sure. Turns out in Safari with VoiceOver this was not announced.
I created a test page to find out what was happening. In NVDA and TalkBack everything worked fine. I didn’t test Jaws, because I don’t have a license. In Safari with VoiceOver the CSS content was not announced for some reason. But apparently it announced the text of the parent element including the link text.
After some more testing it turns out that it will be announced, only if the focus is on the link itself. If the focus is on a list item or paragraph that contains the link, the CSS content is ignored.
I guess that makes some sense, but I wasn’t aware of this behaviour. I mainly use Apple devices for testing Safari, so I haven’t used VoiceOver much.
If possible, you should probably add this information directly in HTML, like I did on my talks page. This way it will be part of the DOM and be present, even if CSS fails to load.
Of course, you can expand on this for other kinds of files, not just PDFs.
And test your code!