Skip to Main Content
Addlestone Library is open to the College of Charleston community and affiliates via card access. Visitors may access Addlestone Library Monday-Friday, 9am-5pm, and must present a government issued ID and sign in upon entry.

CofC LibApps Best Practices: Accessibility

Guidelines for keeping LibGuides, LibCal, and LibAnswers content fresh.

Start with Universal Design

By following universal design principles, you reduce the need for accommodations and make your guides easier for all users to access. Universal Design for Learning is a framework specifically designed to optimize teaching and learning, and much of the framework can be applied to online design.

Simply Said: Understanding Accessibility in Digital Learning Materials

Text

  • Use clear fonts:
    • Don't mix different font types. Stick to the default font (Sans Serif).
    • Use bold, color, italics, and ALL CAPITAL LETTERS, etc. consistently, deliberately, and sparingly; recognize that each has its own function.
    • Don't use underlines for emphasis. Users will think an underline is a hyperlink.
    • Use real text rather than text within graphics. If you must use a graphic that includes text, include the text in an alt-text field.
  • Use headings and lists appropriately. Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page. Using heading styles to organize content is recommended to indicate structure. Guide titles are Heading 1 and Box titles are Heading 2, so those are not available. Do not skip headings. For example, do not use Heading 4 if you did not use Heading 3--you must use Heading 3 first so that the page navigation makes sense to a screen reader. If you apply H3 (or another heading) and it appears larger than you want, you can change the font size to make it smaller. 
  • 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.
  • Ensure proper contrast between the font and the background. Optimize font color use for readability and accessibility. Check color contrast for normal and large text as well as graphical objects with the WebAIM Color Contrast Checker.
  • Make sure your content is clearly written and easy to read. Get more tips from WebAIM on writing clearly and simply.

Graphics, Tables, and Links

  • All Images need to have alternate text (ALT tags) included. Alternative text provides a textual alternative to non-text content (such as graphics or images). It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them. Learn more about providing appropriate alternative text.
  • 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. Certain phrases like “click here” and “more” must be avoided.

Media and Other non-HTML Content

Implications/Instructions

Screenshot of Paragraph Format menu in Add Rich Text/HTML window (WYSIWYG editor)

Use headings as indicators for sections and sub-sections in your guide. This not only provides hierarchical organization and formatting, but also makes it easy for screen readers to scan and jump to different content areas.

  • Never use Heading 1 (<h1> tag in HTML) in your guide as this should only be used once for the entire page.
  • Your LibGuides box titles uses Heading 2, so start with Heading 3 (<h3> tag in HTML) and then Heading 4 in rich text editor.
  • Higher level Headings should be placed above lower level ones otherwise your hierarchy gets confused. Here is an example:
    • H3
      • H4
      • H4
  • Do not use text formatting, such as font size or bold to give the visual appearance of headings. Use the paragraph format drop down in the rich text editor to assign headings.

Screenshot of Alternative Text field in Image Properties window

All Images need to have Alternative Text (ALT tag) included. To add a ALT tag to your image in the rich text editor, you will

  1. Select the image and then click on the add image icon, in the rich text editor.
  2. In the Image Properties window, find the alternative text field under Image Info tab, and then enter the alternative text for your image.
  3. If the image is purely decorative, add Null alt text by entering "" instead of text.

Screenshot of Description Display field in Add Database window

  • Make sure linked text makes sense out of context. Avoid using phrases such as "click here," "more," "click for details."
  • Make sure link and database assets display their description below the link. Don't hide the description behind a hover-over button as this breaks accessibility.
  • Break up long lists of items into logical groups so that it can be skipped by screen readers.

Screenshot of Headers, Caption, and Summary fields in Table Properties window

  • Use tables mainly to display data that fits well into rows and columns.
  • Add table headers to describe the contents of the table columns. (Table Properties > Headers.)
  • Add table caption and summary to provide more information about the table for screen reader to pick it up.
  • Avoid spanned rows as screen readers may not properly parse them.
  • If tables were used for layout purpose (layout tables), then DO NOT add table caption or headings (<caption>, <th>, etc.) to it. Otherwise, the screen reader may incorrectly present the table as a data table causing increased overhead and confusion.

Tips on Adding Text

It is recommended that you type directly into the rich text editor; then use the functions in the text editor to add style and formatting. Creating the text elsewhere and attempting to copy / paste it into the text editor will bring in a lot of unnecessary HTML code and formatting, which will also introduce inaccessible content.

  • If you've already pasted your text into the text editor, highlight it and click on the Tx icon in the text editor. This will remove all the formatting from your text.
  • If you haven't pasted yet, then use the Paste from Word option (clipboard with W icon) when paste content from Word. Or, use the Paste as Plain Text option (clipboard with T icon) when paste content from other places. This generally removes some, but not all, of your formatting.

Style Your Text

  • Stick to the default font (Sans Serif). Avoid changing the font size unless you have good reason. If you need headers within a text box, use Heading 3 (<h3> in HTML) and follow by Heading 4 in the rich text editor.
  • Use bold or italics in the rich text editor (or <strong> or <em> tags in HTML) to indicate emphasis. Use these tags sparingly.
    • Avoid older-style bold <b> or italics <i> tags as they denote style rather than importance.
    • Don't use underlines for emphasis. Users will think an underline is a hyperlink.
  • Don't use color as a way to convey meaning or importance. Colorblind users and screen reader may not pick up on color changes.

Infographics & screenshots can be useful tools, but they do pose challenges for screen readers. To ensure content is accessible for all users, offer a text version of the image. Provide access to the text version in one or more of the following ways:

  • Include a URL for an accessible version in the image (still not accessible for a screen reader, but ensures the accessible version can be found if the image is reused elsewhere without accompanying text/links)
  • Include a clearly-labeled URL for the text version below the image
  • Include the full text below the image
  • Link the image to a text version

Resources

Accessibility Checker

Color Contrast Checker

Caption

Credit: This page is a derivative of the Best Practices: Accessibility page of the University of Illinois at Urbana-Champaign's Getting Started with LibGuides guide, which relies heavily on WebAIM’s Principles of Accessible Design as well as the Boston College Libraries' LibGuides Standards and Best Practices: Accessibility page.