OC logo

Library

Skip to main content

LibGuide Author Style Guide: Images

Preferred practices for LibGuide authors

Alternative text (alt="")

Make images accessible

By following the basic principles outlined here, we can make our LibGuides more accessible to individuals with disabilities.

  • Adding alternative text to images is one of the easiest accessibility practices to implement. 
  • Alternative text may be provided in the HTML alt attribute or in the surrounding context of the image.
  • Every image must have an alt attribute.
  • Decorative images still need an alt attribute, but it should be null (alt="").
  • Alternative text should:
    • present the CONTENT and FUNCTION of the image.
    • be succinct.
  • Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
  • Alternative text should not:
    • be redundant (be the same as adjacent or body text).
    • use the phrases "image of…" or "graphic of…".
  • Appropriate alternative text depends heavily on the image's context.

(WebAIM: 2014)

Screenshots

Create screenshots with mobile users in mind

This screenshot (figure 1) is 350px wide and looks good on computer screens and on an iPhone 5.

I used MS Snippet tool to capture the image, edited it in MS Publisher 2010, saved it as a .png file, and then I resized and autocorrected it with MS Picture Manager.

PubMed screenshot 350px wide

Figure 1. PubMed screenshot 350px wide.