WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Testing Web pages with Screen Reader after DisablingCSS:


From: JP Jamous
Date: Apr 25, 2017 7:51AM

Great point Birkir. I agree with you. Personally, I do not turn CSS off.

This started a long debate at work. We are still trying to find out if it behooves us or not. Personally, I don't see any value in turn it off. I would take JavaScript as an example.

Many posts on the web used to talk about turning JS off in the browser. The current web is loaded with JS that are encapsulated in different frameworks such as bootstrap and much more. All the sudden it became that turning JS off in the browser breaks the whole UI.

I am sure some folks out there still do it, but the majority would not touch it. The same applies to CSS. Let it be, as so many classes are used in the CSS to enhance many visual presentations. As long as the CSS is designed to accommodate low vision and color-blind users, why remove it?

It doesn't violate WCAG; It doesn't cause any issues; and the only alternative is to use more embedded CSS, which would make the page larger in size. Why have redundant CSS, when knowing that avoiding it completely is not feasible. It was developed for a reason.

I just wanted to answer his questions in case he was determined to test without it. Although, I'd recommend keeping it running as more visual issues can be captured that way, which would impact low vision and color-blind users.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, April 25, 2017 8:20 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Testing Web pages with Screen Reader after Disabling CSS:


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.
<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."
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >

Work hard. Have fun. Make history.