RE: Examples of websites that handle linearization properly

It seems like you are combining 2 separate issues.

1. Reading order -- linearizing without CSS is one way to test for this -- but disappearing background images are not a fail of this criteria -- this criteria can be tested other ways such as looking at the code or testing with a screen reader.   It has nothing to do with images.  It's just a side effect.   
2. Separately - use of background images can be problematic when those images communicate meeting -- this is covered under criterion 1.1.1 non-text content.  In particular the issues are when these images have no alternatives for users who can't see them -- in particular users of screen readers and users with low vision who may use high contrast mode which in some situations can remove the background images.   Removal of decorative images can help users with low vision as it removes extra visual clutter in with the hopes of providing better contrast.  

Jonathan


-----Original Message-----
From: Catherine Ailanjian <Catherine.Ailanjian@wdc.com> 
Sent: Monday, July 20, 2020 7:08 PM
To: Patrick H. Lauke <redux@splintered.co.uk>; w3c-wai-ig@w3.org
Subject: RE: Examples of websites that handle linearization properly

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


Yes, it's because the "Linearize page" step causes CSS-background images to disappear ... if they are meaningful, then we need to programmatically communicate that content to users - like adding a text element that conveys the image's information and is visible when CSS is turned off.

So, I'm evaluating https://shop.westerndigital.com ... many of CSS-background images are decorative (AKA "lifestyle"), but we have run into some on our pages that are meaningful and communicate content that cannot be found elsewhere on the page.  So, I'm looking for good examples of sites that handle linearization well so that we can learn from them.

- Cat

-----Original Message-----
From: Patrick H. Lauke <redux@splintered.co.uk>
Sent: Monday, July 20, 2020 3:24 PM
To: Catherine Ailanjian <Catherine.Ailanjian@wdc.com>; w3c-wai-ig@w3.org
Subject: Re: Examples of websites that handle linearization properly

CAUTION: This email originated from outside of Western Digital. Do not click on links or open attachments unless you recognize the sender and know that the content is safe.


On 20/07/2020 23:11, Catherine Ailanjian wrote:
> Patrick,
>
> I'm using Accessibility Insights for Web for accessibility testing.  For SC 1.3.2 of WCAG 2.1, these are the instructions in the Assessment portion:
>
> ----------------------------------------------------------------------
> ----------------------------------------------------------------------
> --------------------------- The visual helper for this requirement 
> highlights content positioned on the screen using CSS position:absolute or float:right.
> This procedure also uses the Web Developer browser extension.
> 1. Examine the target page to determine whether it has any positioned (highlighted) content that's meaningful:
>       a. Content is meaningful if it conveys information that isn't available through other page content.
>       b. Content is decorative if it could be removed from the page with no impact on meaning or function.
> 2. If the page does have meaningful positioned content, use the Web Developer browser extension (Miscellaneous > Linearize page) to show the page in DOM order.
> 3. Verify that the positioned content retains its meaning when the page is linearized.
> 4. Record your results.
> ----------------------------------------------------------------------
> ----------------------------------------------------------------------
> ---------------------------
>
> So, I'm looking for web pages that retain the meaning of their content when the page is linearized, especially e-commerce sites.

That explanation/instruction in Accessibility Insights is perhaps a touch misleading or confusing. Essentially, what 1.3.2 wants to ascertain is that the content makes sense in terms of the DOM order / the order in which assistive technologies would read/announce it. This is approximated visually by using the linearization tool in the web developer extension or similar. Another way to test would be to actually go through the page with a screen reader. And what you're trying to check is whether or not the content/functionality overall still makes sense, i.e. that the page wasn't relying on layout/positioning to convey meaning.

To be clear, actual end users wouldn't generally use something like web developer extension's "Linearize page". This is used here to help with evaluating the content order of the page, from an audit/development point of view.

Now I'm curious about your original question "I’m looking for websites that make use of CSS-background images but that also handle linearization well"...not quite clear what background images would have to do with ascertaining correct content order - I'm going to speculate and ask "is it because doing the "Miscellaneous > Linearize page" step ends up messing with the CSS and some of your images are disappearing?
If so, that's not a problem per se, as it's expected that a page starts to look odd once you mess with its CSS.

Maybe more specifically: do you have a specific page that you're currently evaluating that you believe i failing content order? And it also uses CSS background images? Maybe it's easier if we can have a look at the kind of problem you're concerned with?

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke https://flickr.com/photos/redux/ | https://www.deviantart.com/redux

twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Tuesday, 21 July 2020 01:12:29 UTC