Skip to content

Web Style Guide
Media

Much of the information for specific ways to incorporate different types of media can be found directly on the Foundation website. Scroll down for some details on media in our templates.

 

Images

Most images should be added utilizing specific modules or widgets however we understand the need to be able to add images within the WYSIWYG. Here are some classes to style such images. Please review the accessibility information below for proper use on alt text.

Images of Text

In general, websites should avoid images of text. Images of text are best reserved when a particular visual presentation is essential, such as a logo. If the image is of a small amount of text, the alt text must match the text in the image exactly. If the image contains a considerable amount of text, the text should also be elsewhere on the page.

In general, text in images should be a generous size to mitigate pixilation when zoomed. A minimum size of 19px is a good rule of thumb, with larger being better. Text in images should match color contrast ratio minimums. For text that is at least 24px and normal weight or 19px and bold, use a contrast ratio that is at least 3:1. Ideally, use a contrast ratio that is at least 4.5:1.

Charts, Graphs, and Other Complex Images

For charts, graphs, diagrams, illustrations, and other complex images, simple alt text may not be sufficient to convey the information. In such cases, the information should be provided in addition in text on the page. For charts and graphs, authors may want to provide a data table with the equivalent information. For flow charts and diagrams, a discussion of the relevant information in the following paragraphs may be best. In any case, the image’s alt text should direct the user to the long description.

Accessibility for images

Adding alternative text for images is the first principle of web accessibility. Visually impaired users who are using screen readers will be read an alt attribute to better understand an on-page image. Alt tags will be displayed in place of an image if an image file cannot be loaded and search engine crawlers are able to read alt tags which helps with SEO.

According to the WebAIM web page on techniques the alt attribute should typically:

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • NOT be redundant or provide the same information as text within the context of the image.
  • NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Videos

Wrap embedded content like videos, maps, and calendars in a responsive embed container to maintain the correct aspect ratio regardless of screen size.

More information about this can be found on the Responsive Embed page of the Foundation website.

Code (for YouTube embed)

<div class="responsive-embed"> <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe> </div>