rha11y-img-checker demo

Return to the rha11y-tools homepage

Getting the bookmarklet

To get the rha11y-img-checker bookmarklet, drag the following link to your bookmarks bar. You may also click the link directly to use it on this page for testing. (Refresh the page to reset it.)

rha11y-img-checker

When run, the rha11y-img-checker bookmarklet identifies all images on a page (including inline SVGs and images in the shadow DOM) and returns accessibility information in the following ways:

  1. All identified and tested images on the page are given 8px outlines:
    • Blue outline = image passed accessibility checks or is hidden from accessible tech
    • Orange outline = image failed accessibility checks and is not hidden from accessible tech
    • No outline = image was not successfully identified
    • Background images are faded to white, as they don't require testing
  2. Detailed accessibility test processes and results are displayed in the browser console.

Test images

Inline SVGs

  • Inline svg
  • No title or img role
  • Not hidden from screen readers
  • Should fail
  • Inline svg
  • No title or img role
  • aria-hidden="true"
  • Should pass
  • Inline svg
  • No title or img role
  • role="presentation"
  • Should fail, since role="presentation" doesn't hide SVGs.
  • Inline svg
  • Has title and img role
  • Not hidden from screen readers
  • Should pass
  • Inline svg
  • No title or img role
  • Has aria-label
  • Not hidden from screen readers
  • Should pass
  • Inline svg
  • No title or img role
  • Has aria-labelledby:
    Red Hat
  • Not hidden from screen readers
  • Should pass

Non-shadow JPG <img> elements

  • Has no alt
  • Not hidden from screen readers
  • No hidden parent
  • Should fail
  • Has no alt
  • Not hidden from screen readers
  • Has hidden parent
  • Should pass
  • Has alt (null)
  • Not hidden from screen readers
  • No hidden parent
  • Should pass
People computing
  • Has alt (with value)
  • Not hidden from screen readers
  • No hidden parent
  • Should pass
  • Has no alt
  • role="presentation"
  • No hidden parent
  • Should pass

Non-shadow SVG <img> elements

  • Has no alt
  • Not hidden from screen readers
  • No hidden parent
  • Should fail
  • Has no alt
  • Not hidden from screen readers
  • Has hidden parent
  • Should pass
  • Has alt (null)
  • Not hidden from screen readers
  • No hidden parent
  • Should pass
People computing
  • Has alt (with value)
  • Not hidden from screen readers
  • No hidden parent
  • Should pass
  • Has no alt
  • role="presentation"
  • No hidden parent
  • Should pass

Shadow <img> elements

  • Image component
  • Has no alt
  • Not hidden from screen readers
  • No hidden parent
  • Should fail
  • Image component...
  • Nested in component...
  • In another component
  • Has no alt
  • Not hidden from screen readers
  • No hidden parent
  • Should fail

Background image

  • Should not be tested