Cover Block has image with no text alternative

  • bhammondCVL

    (@bhammondcvl)


    1 year, 4 months ago

    This one-page site is dinged in automated accessibility audits for the background image that has no text alternative. This normally wouldn’t happen for a background image, but perhaps it is happening here because the background image div has the ARIA role=”image”?

    <div role="img" class="wp-block-cover__image-background wp-image-221 has-parallax" style="background-position:50% 50%;background-image:url(...)"></div>

    Can you explain why the div has this attribute? Does this make screen readers treat it as an <img />, and so expect some alt-text?

    • This topic was modified 1 year, 4 months ago by bhammondCVL. Reason: fixed typo

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • George Appiah

    (@gappiah)

    1 year, 4 months ago

    Background image is a CSS style and CSS has no alt attribute — that belongs to the HTML.

    If you’re getting a warning about a missing alt attribute, that must be somewhere else on the page — not the code you’re showing here.

    Can you explain why the div has this attribute?

    So the image can go in the background, and text, another image or something else can be placed on top of it. That’s why it’s called “Cover” block.

    Does this make screen readers treat it as an , and so expect some alt-text?

    As I mentioned earlier, this is a CSS style and screenreaders will simply ignore it as if it doesn’t exist… just as they ignore colors and whatnot.

    Here’s what the Mozilla Developer Docs says about the background-image property and accessibility:

    Accessibility concerns

    Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

    In short only use background images, whether for the cover block or something else, for decorative purposes.

    Thread Starter bhammondCVL

    (@bhammondcvl)

    1 year, 4 months ago

    Yes, I know that about the accessibility of background images. And yes, it is definitely the background image div that is getting highlighted in the accessibility audit.

    Your explanation as to why the div has the “role=’img'” attribute does not make any sense to me. Clearly, the div could contain a background image without the “role” attribute.

    As MDN docs state, the “img” role attribute is generally used for an element containing multiple images, and there should also be an “aria-label” attribute.

    George Appiah

    (@gappiah)

    1 year, 4 months ago

    Your explanation as to why the div has the “role=’img’” attribute does not make any sense to me.

    It doesn’t make any sense to me either 🙂

    My bad: I read your post completely (at least I believe I did!), but I never saw the part about the ARIA role at all. So I answered the question of why a background image is used… not why there’s the role="img" in the div.

    Very sorry about that!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Cover Block has image with no text alternative’ is closed to new replies.