RE: Examples of websites that handle linearization properly

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 Monday, 20 July 2020 23:07:55 UTC