Skip to Main Content

Libguides Editing Guidelines

Accessibility

Making your LibGuides content accessible benefits everyone: people with or without disabilities.

Source: Many items on this list come from WebAIM’s Principles of Accessible Design. You can learn more about accessibility at webaim.org.

Text

  • Make your text easy to read:
    • Don't mix different font types. Stick to the default font.
    • Use bold, color, and italics sparingly; each has its own function.
    • Don't use underlines for emphasis. People will think an underline is a hyperlink.
    • Use real text rather than text within graphics.
  • Use headings and lists appropriately. Headings, lists, and other structural elements provide meaning and structure to web pages. People that use screen readers and keyboard shortcuts need this structure on order to successfully navigate webpages.
  • Do not rely on color alone to convey meaning or importance. That information may not be available to a person who is colorblind and it will be unavailable to screen reader users.
  • Make sure your content is easy to read.  Avoid dashes, abbreviations, and slang. See our guidelines for Writing style.

Tables and Links

  • Tables should have appropriate table headers. Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table. Learn more about creating accessible tables.
  • Make sure linked text makes sense out of context. Screen reader users may choose to read only the links on a web page. Avoid phrases like “click here” and “more."
  • Avoid URLs as link text.

    This is because visual users can often interpret intended breaks between words, but screen readers can't. When we see “www.londontoylibrary.co.uk” we see the words “london”, “toy” and “library”, but a screen reader is going to read the URL letter-by-letter which is unintelligible. So always use a descriptive name as your link.
    Example:
    Instead of this as a link: https://github.com/eschnett/zotero-citationcounts
    Use this: Zotero Citation Counts Manager

Media and Other non-HTML Content

Accessible images

For people using screen readers, the alt attribute will be read aloud in place of the images. If the images convey important information, the alt attribute text needs to be descriptive, so they don't miss that information.

Best practices
The best alternative text will depend on the context.

The alt attribute should:

  • Present the content and function of the image.
  • Be brief. 
  • Not be redundant. 
    There is no need to repeat text that is right next to the image. Enter a blank attribute instead. (alt="")
  • Not use the phrases "image of ..." or "graphic of ..." to describe the image. 
  • If the image is decorative, you can enter a blank alt attribute by using two quotation marks with nothing between them. (alt="")

You can learn more about alternative text best practices on WebAIM.org.

There are two kinds of images:

  • decorative
  • informational

Decorative images

A decorative image helps break your content into chunks and makes your page easy to scan. It can make certain parts of your content stand out.

Examples:

Decorative images should have an empty alt attribute. In the source code you should see two quotes with no words between them.
<img src="imagename.jpg" alt="">

For people using screen readers, it makes no sense to hear the voice read, "icon of a computer" or "colorful abstract," which is what you might write for alt tags on decorative images like these. That's why it makes sense to use a blank alt tag.

Informational images

For images that provide information you will need to include an alt attribute.

Examples:

  • a logo with text on it
    (see Campus Resources). Write the text of the logo in your alt text.
     
  • book covers without the title written next to them.
    Write the title of the book in your alt text.
     
  • book covers with the title written next to them.
    (see Books & Teaching Resources). If you have titles written next to the covers, use an empty alt attribute (see above). If you don't, then people with screen readers will hear the title read twice (annoying).
     
  • screen shots
    (see the Blueprints page on this guide). Always consider the people who can't see your screen shots. Write some text before or after the image that can stand alone, with images turned off. Then use an empty alt attribute for the image. It's not practical to write the full text of everything in a screen shot in an alt attribute.
     
  • a photograph of a place or scene
    (See the image on the bottom of Black Lives Matter Resources). Briefly describe the photo. For this one, the alt attribute is "hands up don't shoot sign on bridge."