Screen readers and display: none
13th September 2003
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
- Weeknotes: datasette-enrichments, datasette-comments, sqlite-chronicle - 8th December 2023
- Datasette Enrichments: a new plugin framework for augmenting your data - 1st December 2023
- llamafile is the new best way to run a LLM on your own computer - 29th November 2023
- Prompt injection explained, November 2023 edition - 27th November 2023
- I'm on the Newsroom Robots podcast, with thoughts on the OpenAI board - 25th November 2023
- Weeknotes: DevDay, GitHub Universe, OpenAI chaos - 22nd November 2023
- Deciphering clues in a news article to understand how it was reported - 22nd November 2023
- Exploring GPTs: ChatGPT in a trench coat? - 15th November 2023
- Financial sustainability for open source projects at GitHub Universe - 10th November 2023
- ospeak: a CLI tool for speaking text in the terminal via OpenAI - 7th November 2023