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 8:01AM

Well said JP :) well said.


On 4/25/17, JP Jamous < <EMAIL 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 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:
>
> 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."
>> >> >> 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.