WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Testing Web pages with Screen Reader after Disabling CSS:

for

From: Birkir R. Gunnarsson
Date: Apr 25, 2017 7:19AM

Gents

A few notes of clarification:
CSS display: none; or visibility: hidden hides content from everyone,
including screen readers.
The only exception is when an element with display: none is referenced
via aria-describedby or aria-labelledby.
E.g.
<input type="text" aria-describedby="errMsg1">
<span id="errMsg1" style='display: none;">error message<span>

When you move focus to the input field, this error message will be
read, but when you navigate the page in browse mode you won't see it.
Use of display: none to hide content from everybody is good practice,
dynamically displaying content only when needed is essential to keep
webpages as simple and relevant as possible, for all users.

There is CSS for hiding content visually but making it available to
screen reader users, these are classes that use the clip method or
position the text off-screen, they usually have class names like
sr-only or visuallyHidden".
Content hidden this way is visible to screen readers in all forms of navigation.

So turning CSS off and testing with a screen reader is not a great
idea, in fact it can introduce a lot of false positives and bugs that
are not bugs.

The primary purpose of testing with CSS of is to locate CSS background
images and icons (and make sure they have alt text using role="img"
and aria-label" or the same info is available in text) so the images
are decorative.
Beyond that there is not that much gained from testing webpages with CSS off.



On 4/25/17, JP Jamous < <EMAIL REMOVED> > wrote:
> See my answers below.
>
>