Search code examples
htmldeploymentaccessibilityhref

W3 accessibility issue with **a href= ** linking to a .jpg

I have a thumbnail image that after clicking on it, opens up an enlarged version. The code is based on this page:

enter image description here

But when I test this page for accessibility issues on this site: www.webaccessibility.com/ I get an error saying "This A element has an href attribute set to an image file reference". Basically, it doesn't like "a href=xxxx.jpg" is linked to a jpg file.

Is this accessibility issue something I should be concerned about?

Solution

  • Yes, you should be concerned about the accessibility issue the testing site has found. When a website flags the use of an anchor (a>) element with a href attribute directing straight to an image file (xxxx.jpg), it warns people who use assistive technology like screen readers that there may be an accessibility issue.

    Here's an updated version of your code :

    <a href="/pix/samples/181.jpg" target="_blank">

        <img src="/pix/samples/181.jpg" style="max-width: 100%;" alt="Photo of 3 cats">

        <p> This thumbnail image is linked to a larger version.</p>

    </a>

    In the above code, the alt attribute of the tag in the code above gives screen readers a textual description of the image.

    paragraph tag is also present to include a text description of the link. You can make sure that both visually impaired users and sighted visitors have the information they need to understand the goal and destination of the link by integrating the alt text for the image with the supplemental text content.