Screen readers and display: none
I’ve long heard rumours that some screen readers fail to read out text hidden using the CSS display: none
property, but I had never really investigated it as I don’t have access to a screen reader myself (I should really download the JAWS trial some day). Bob Easton’s What do screen readers really say? describes the problem and specifies a number of tests for screen reader abilities, the results of which are collated on this Wiki page. As a side note, quickly collecting the results of this kind of test is an excellent way to make use of a Wiki.
The results confirm the initial concern: All three leading screen readers (JAWS, Window Eyes and IBM Home Page Reader) fail to read out text that is hidden using either display: none
or visibility: hidden
, even when those styles are served up as part of a stylesheet targetted for visual (screen) media. This is yet another example of vendors ignoring valuable parts of the CSS specification, but until screen readers become more intelligent we’re going to have to live with it.
Luckily, a solution is at hand. Jon Hicks demonstrates that the following 4 lines of CSS can hide elements from visual browsers while leaving them available to screen readers:
.skip {
height: 0;
width: 0;
overflow: hidden;
position: absolute; /* for the benefit of IE5 Mac */
}
An even neater variant is provided by Tom Gilder on his blog, where the :active and :focus pseudo selectors are used to provide a skip navigation link that remains invisible until focussed on using the tab key on the keyboard. This technique really does provide the best of both worlds; the skip link is invisible in the standard design, but still shows up for keyboard navigation users who may find it useful. I’ve implemented Tom’s technique in my stylesheet for this site.
More recent articles
- ChatGPT should include inline tips - 30th May 2023
- Lawyer cites fake cases invented by ChatGPT, judge is not amused - 27th May 2023
- llm, ttok and strip-tags - CLI tools for working with ChatGPT and other LLMs - 18th May 2023
- Delimiters won't save you from prompt injection - 11th May 2023
- Weeknotes: sqlite-utils 3.31, download-esm, Python in a sandbox - 10th May 2023
- Leaked Google document: "We Have No Moat, And Neither Does OpenAI" - 4th May 2023
- Midjourney 5.1 - 4th May 2023
- Prompt injection explained, with video, slides, and a transcript - 2nd May 2023
- download-esm: a tool for downloading ECMAScript modules - 2nd May 2023
- Let's be bear or bunny - 1st May 2023