Allow for Alt Text on Background Images & Card Images (from metadata page)

LoriDelacruz_Lewis

All of our electronic materials must be ADA compliant. Although everyone loved the background images I used in the header row, I had to turn them in to Image Cards so that I could add Alt Text.

I'd also like the capability to add Alt Text to the thumbnail image on the metadata page so it appears in the Gallery Cards.

https://arcg.is/1G0mz1

KlaraSchmitt · ‎01-15-2021

Hi Lori,

We can definitely consider your request for adding alt text to the thumbnail image for gallery cards, rather than marking them decorative. Good idea.

But for your awareness, background images are considered innately decorative: https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F3 Using an image card is a better fit for non-decorative content, since it uses also the <img> tag, which conveys more information to those using assistive technologies. The CSS background-image property actually doesn't support alt text because in HTML, as it's not read as an image, it's usually applied to a container-level element holding additional content. There are ways around this, such as using an aria-label, but one still has to add extra aria-roles to properly convey to screen-readers that the <div> or <section> is masquerading as an image and for instance, NDVA does not read aria-labels on divs or spans. It's a known bug on that screen reader that has been open since 2017. We usually advise using semantic structure whenever possible for that reason, since screen reader idiosyncrasies can be quite varied.

But that being said, in looking at your link, it seems like your child blowing dandelions is a decorative image, so I think you'd be okay in leaving it as a row image. One way to consider whether an image is decorative or not, is to consider, if you removed the image entirely would there be any critical information lost to your audience? If yes, then you need to add alt text. If no, then you're essentially adding it for visual interest, and you can mark it as decorative. Also, if describing the image would be redundant to surrounding copy, then it's better to mark it as decorative, because most likely those using assistive tech don't want to hear the same thing twice.