Re: Examples of websites that handle linearization properly

Catherine,

I agree with Amber. Keep background images strictly for decorative purposes
only. Also, be sure not to use those background images to help pass color
contrast requirements. That will open a whole other can of worms. :/

:)

On Mon, Jul 20, 2020 at 4:21 PM Amber Holladay <
amber-holladay@pluralsight.com> wrote:

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

-- 

*Kelly Childs*
*Director of Website Accessibility*
888.750.4556, option 7