E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Micky Hulse
Date: Fri, Feb 21 2020 4:36PM
Subject: CSS background image: MS A11y Insights for Web question
No previous message | Next message →

Hello,

I have an HTML element that has a CSS class applied which uses a background SVG.

<header class="heroheader hexagonsbackground hexagonsbackground-secondary">
... content ...
</header>

When running an assessment using Microsoft's Chrome browser a11y
Insights plugin, it's telling me:

Image type: CSS background-image
Coded as: (no value)
Accessible name: (no value)

Out of curiosity, is there a way for me to mark this image as
decorative? Or, do I just ignore this Accessibility Insights result
and move on with my life? :D

For future reference, am I doing anything wrong in terms of a11y and
decorative background imagery? Is there a better way to do this in
terms of a11y?

Many thanks in advance!

From: Micky Hulse
Date: Fri, Feb 21 2020 5:16PM
Subject: Re: CSS background image: MS A11y Insights for Web question
← Previous message | Next message →

Related question:

For other elements in my site, the Accessibility plugin is saying:

Image type: CSS background-image
Coded as: Meaningful
Accessible name: <snipped for brevity>

I have no clue why some elements with background images are getting
marked as meaningful with an accessible name and others are coming up
as "no value".

I'd like to understand how to control this better. Additionally, is
this going to affect screen readers?

Let me know if I can provide more information.

Thank you!

From: Birkir R. Gunnarsson
Date: Fri, Feb 21 2020 6:40PM
Subject: Re: CSS background image: MS A11y Insights for Web question
← Previous message | Next message →

Sounds interesting, see if you can get us more code examples.
CSS background images are technically decorative (unless the elemet is
marked with role="img" and an aria-label ih a value).
But if the CSS background image is included using pseudo classes like
::before or ::after (and the CSS background has a content attribute)
that content atribute's value is actual content (it's part of the
accessible name calculation).
There are a couple of great blogs from various accessibility experts
on CSS content and screen readers.
I should be on a beach right now without internet connection, but
Delta messed up flights big time so I am checking my laptop in an
airport hotel room, so I am going to be lazy and not look it up. ;)
Cheers
-B

On 2/21/20, Micky Hulse < = EMAIL ADDRESS REMOVED = > wrote:
> Related question:
>
> For other elements in my site, the Accessibility plugin is saying:
>
> Image type: CSS background-image
> Coded as: Meaningful
> Accessible name: <snipped for brevity>
>
> I have no clue why some elements with background images are getting
> marked as meaningful with an accessible name and others are coming up
> as "no value".
>
> I'd like to understand how to control this better. Additionally, is
> this going to affect screen readers?
>
> Let me know if I can provide more information.
>
> Thank you!
> > > > >


--
Work hard. Have fun. Make history.

From: Micky Hulse
Date: Wed, Feb 26 2020 9:03PM
Subject: Re: CSS background image: MS A11y Insights for Web question
← Previous message | No next message

Thank you for the reply Birkir! Sorry for my late reply! I will setup
a demo tomorrow and shoot you/the list a link.

I really appreciate the help!!!

Talk to you soon. :)