Photos fail accessibility test

  • I have a couple of pages on my (soon to be live) website where large thumbnails can be clicked to reveal the full-size photo. These thumbnails fail the Accessibility Insights “FastPass” test for WCAG 2.1 compatibility. The report says:
    ‘
    Path
    .blocks-gallery-item:nth-child(1) > figure > a
    Snippet


    How to fix
    Fix the following:
    Element is in tab order and does not have accessible text
    Fix ONE of the following:
    Element does not have text that is visible to screen readers
    aria-label attribute does not exist or is empty
    aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    Element has no title attribute
    ‘

    Setting “Alternative Text” in the Media Library for these images has no effect.

    If I edit the page, there’s an option for each image to add “Additional CSS Class(es)” but my searching online so far suggests that there’s no way (or at least no straightforward way) of adding a title using CSS.

    I’m not a skilled HTML/CSS programmer though I do have an (old) IT background.

    Can anyone advise how I can overcome this problem?
    Thanks in anticipation,
    Chris

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

Viewing 4 replies - 1 through 4 (of 4 total)

  • I believe, it comes down to what level of accessibility you are trying to achieve and standard needs to be consistent across the board for all content types.

    https://www.w3.org/WAI/standards-guidelines/wcag/

    Moderator bcworkz

    (@bcworkz)

    CSS cannot affect tag attributes, so that’s a dead end. WP image blocks don’t have a provision for aria or title labels, but you should be able to apply an alt text attribute that would fix “Element does not have text that is visible to screen readers”. Complying with that should mean that aria or title attributes are not needed.

    If you’ve provided alt text and still get the same WCAG error, perhaps caching has prevented your update from being visible to the audit tool. Check the HTML source of the actual output that the audit tool sees. The img tag should have an alt attribute whose value is the text you provided. If not, there’s a cache somewhere that needs to be flushed. Or you forgot to save the change ??

    Thread Starter Chris Woodhouse

    (@shed53)

    Thank you both for your time and thoughts.
    I tried both “title” and “alt text” in the media library but to no avail.
    Instead, I’ve changed “Link to” to “None” for the images and added explicit text under each one with the URL of the full-sized image. That change satisfies the Accessibility test.

    That’s great @shed53

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Photos fail accessibility test’ is closed to new replies.