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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Ajeesh Thomas
> Sent: Tuesday, April 25, 2017 6:26 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [WebAIM] Testing Web pages with Screen Reader after Disabling CSS:
>
> Hi All,
> I am Ajeesh, working with IBM Accessibility Team, have number of
> quarries regarding testing the Web pages after Disabling CSS, could
> anyone help me please?
> 1. Once the CSS Disabled Web page will be rendered as same as DOM
> Order, Since the Screen reader go with Linear reading order (DOM
> order) do we have any extra benefits for doing Screen Reader
> Testing after Disabling the CSS?
>
> Yes, because if error messages or any other messages are hidden by CSS, they
> will be visible to a screen reader making the UI confusing and disorienting.
> The best example is display: none; or images.
>
> 2. After Disabling CSS Found some of the extra hidden Elements, as
> these are intentionally hidden from the actual Web page - do we
> needs to consider the Accessibility lags of these hidden Content?
>
> Of course, as I mentioned in the previous questions. They can confuse an
> average computer user with a screen reader and make it harder for low vision
> visitors if they are trying to remove CSS to get rid of colors that are hard
> to see. Some low vision users are color-blind too.
>
> 3. Once the CSS Disabled -There are some Functional difference found
> on Scripted Interactive Elements, as the actual Web page working
> fine -really do we needs to consider these issues?
>
> Of course, if they cause the user to be confused and disoriented. Keep in
> mind all of your audience with disabilities not just screen reader users.
>
> What would be the objective to the Web page with Screen reader after CSS
> Off, kindly guide me.
>
> Clean layout as if CSS is on. The same you mentioned in your introduction.
> Proper DOM structure that renders properly to a user.
>
>
> Thanks in advance,
> --
> " Have a fantastic day "ahead"
>
> Ajeesh Chacko Thomas,
> Accessibility Test Engineer,
> IBM India, Banglore,
> Mob: 0 81233 81222,Lan: 04742586821, Office: 04443423000
> skipe: ajeeshthomas86
>
> "If you look at what you have in life,
> you'll always have more.
> If you look at what you don't have in life, you'll never have enough."
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.