Re: Examples of websites that handle linearization properly

You are not going to find accessible sites that use CSS background images
to convey information UNLESS that site also includes an alternative way to
access the information. For example, if you add text in an image (not
recommended) repeat the same message using text that is
correctly positioned in the DOM. If the image itself is relevant to the
page, code it as an image and add an alt attribute to explain its purpose.

On Mon, Jul 20, 2020 at 5:11 PM Catherine Ailanjian <
Catherine.Ailanjian@wdc.com> wrote:

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