Sometimes you need to hide parts of a web page, either permanently or temporarily. A common use case is content that becomes visible only after the user has interacted with a control on the page, for instance by clicking a button that reveals more content or activating a tab in a tab system.
Hiding content from all users, including screen reader users, is easy – just use display:none. Add visibility:hidden if you want to be extra sure that it is hidden, since Screen readers sometimes ignore display:none. However in some cases you want to hide something from sighted users without hiding it from screen reader users. In those cases you can use the off-screen and clip techniques. But what if you want screen readers to ignore content that is visible?
Posted in Accessibility.
Copyright © Roger Johansson