WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: CSS background image: MS A11y Insights for Web question

for

From: Birkir R. Gunnarsson
Date: Feb 21, 2020 6:40PM

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