WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 6 (In chronological order)

From: Ajeesh Thomas
Date: Tue, Apr 25 2017 5:25AM
Subject: Testing Web pages with Screen Reader after Disabling CSS:
No previous message | Next message →

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?
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?
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?

What would be the objective to the Web page with Screen reader
after CSS Off, kindly guide me.
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."

From: JP Jamous
Date: Tue, Apr 25 2017 6:19AM
Subject: Re: Testing Web pages with Screen Reader after Disabling CSS:
← Previous message | Next message →

See my answers below.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Ajeesh Thomas
Sent: Tuesday, April 25, 2017 6:26 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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."

From: Birkir R. Gunnarsson
Date: Tue, Apr 25 2017 7:19AM
Subject: Re: Testing Web pages with Screen Reader after Disabling CSS:
← Previous message | Next message →

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 ADDRESS REMOVED = > wrote:
> See my answers below.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Ajeesh Thomas
> Sent: Tuesday, April 25, 2017 6:26 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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.

From: JP Jamous
Date: Tue, Apr 25 2017 7:51AM
Subject: Re: Testing Web pages with Screen Reader after DisablingCSS:
← Previous message | Next message →

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 ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, April 25, 2017 8:20 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Testing Web pages with Screen Reader after Disabling CSS:

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 ADDRESS REMOVED = > wrote:
> See my answers below.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Ajeesh Thomas
> Sent: Tuesday, April 25, 2017 6:26 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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.

From: Birkir R. Gunnarsson
Date: Tue, Apr 25 2017 8:01AM
Subject: Re: Testing Web pages with Screen Reader after Disabling CSS:
← Previous message | Next message →

Well said JP :) well said.


On 4/25/17, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS REMOVED = ] On Behalf
> Of Birkir R. Gunnarsson
> Sent: Tuesday, April 25, 2017 8:20 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Testing Web pages with Screen Reader after Disabling
> CSS:
>
> 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 ADDRESS REMOVED = > wrote:
>> See my answers below.
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Ajeesh Thomas
>> Sent: Tuesday, April 25, 2017 6:26 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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.
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.

From: Jonathan Avila
Date: Tue, Apr 25 2017 8:05AM
Subject: Re: Testing Web pages with Screen Reader after Disabling CSS:
← Previous message | No next message

Hi Ajeesh, in regards to current Section 508 standards -- some US Federal agencies are concerned with the ability to turn off CSS completely and as such you would want to look for things like hidden code or other markup, content appearing that shouldn't, and content that is missing such as background images and use of color that will go away.

As others have said on this list -- turning off CSS is not required for WCAG 2 A/AA conformance. WCAG does have failure techniques for using CSS background images to communicate meaning visually, reading order (meaningful sequences), use of color, etc.). So in regards to WCAG 2 -- it could be used as a tool for testing although it's a bit heavy handed and will tend to expose things that are not issues -- for example, it will unhide things that should be hidden to all users as Birkir explained.

The revised Section 508 standards include WCAG 2 A/AA by reference and as such are aligned with WCAG in this manner. So the idea of requiring or turning of CSS for testing will hopefully go away.

I did want to note that the ability for users to apply user style sheets on top of a page's style is still an important technique for personalization for users with low vision and users with some cognitive disability. Many users will likely want to change the font, color, or spacing to help them read the content. These are discussions that are occurring in regards to adapting text as a potential success criteria for future versions of WCAG.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Download our CSUN Presentations Here!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Ajeesh Thomas
Sent: Tuesday, April 25, 2017 7:26 AM
To: WebAIM Discussion List
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?
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?
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?

What would be the objective to the Web page with Screen reader after CSS Off, kindly guide me.
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."