Images

Notes on Implementation

We use Bootstrap’s _images.scss file with minor tweaks to ensure color contrast. The documentation for Bootstrap Images is applicable.

Accessibility Notes

  • All <img> tags must have alt attributes.
  • In order for images to be accessible to assistive technologies, a text alternative must be provided in the alt attribute. The alt text should be brief, should not include phrases like “image of”, and should convey critical information about the meaning of the image to an assistive technology user. Consider the following resources for how to write good alt text:
  • Images of text should be avoided. If they are used, the alt text should match the visual text exactly.
  • Image links must have alt text describing the destination of the link.
  • Decorative images should have a blank alt attribute (alt='').
  • Avoid using the title attribute in general.
  • For complex images, charts, graphs, posters, and the like, including short alt text and a long description of the information contained in the image immediately below the image.
  • Reduce redundant text. Frequently websites will have visual design elements that combine images, headings, and surrounding text as links to other pages, such as list of news articles. In these cases, developers should combine all of these elements into a single link, rather than implementing multiple adjacent links to the same destination. Doing so reduces repetition by assistive technologies, which can be annoying for users. In these cases, it is generally best to give the img tag a null alt attribute.
    • For example:

Avoid

<div>
    <a href="..."><img src="..." alt="My News story"</a>
    <h3><a href="...">My News Story</a></h3>
</div>

Best

<div>
    <a href="...">
        <img src="..." alt="">
        <h3>My News Story</h3>
    </a>
</div>