LibGuides Standards and Best Practices: Accessibility

Suggestions and guidelines for using LibGuides at the GVSU University Libraries.

Content Styling

  • Don't use color as a way to convey meaning or importance. Colorblind users and screenreaders may not pick up on color changes.
  • Don't mix different font types. Stick to the default font. 
  • Avoid changing the font size unless you have good reason. If you need headers within a text box, use Heading 3 and Heading 4 in the rich text editor, or use <h3> and <h4> tags in the HTML.
  • Underlining text that is not a hyperlink is best avoided as it causes confusion.
  • Use bold or italics in the rich text editor (or <strong> or <em> tags in HTML) to indicate emphasis. Use these tags sparingly. 
  • When using HTML, avoid older-style bold <b> or italics <i> tags as they denote style rather than importance.
  • Avoid relying on non-HTML content that may not be accessible, like PDF or PowerPoint documents.
  • See also the guidelines on Text Styles and the guidelines on Documents from the Web Content Style Guide.

Headings

Use rich text 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.
  • Springshare uses Heading 2 for box titles so only use Heading 3 (<h3> tag in HTML) and below in rich text boxes.
  • Higher numbered Headings should be placed above lower numbered ones otherwise your hierarchy gets confused.
  • Springshare has removed <h1> and <h2> tags in the box editor for WCAG2 compliance.
  • See also the Headings guidelines in the Web Content Style Guide.

Tables

  • Only use tables for tabular data that fits well into rows and columns.
  • Don't use tables to format links or other information. 
  • Use table headers to describe the contents of the table columns.
  • Avoid spanned rows as screen readers may not properly parse them.
  • Tables have special styling to make them work well with responsive design. No need to manually change the table's width or cell padding in LibGuides. You *will* need to use the "Source" editor to add the following attribute to the <table> element: class="table table-bordered" - contact the Web Services Librarian if you need help with this!

Here is an example default 2x2 table with a header created within the rich text editor.

Header A Header B
cell A1 cell B1
cell A2 cell B2

Copying and Pasting

Take caution when copying & pasting content from any source. Many times hidden style code will also be copied along that could break with best practices and introduce inaccessible content.

There are a few ways to avoid hidden style code from being placed into your guide. The rich text editor has a few useful tools to use. 

  •  This button will show a popup box that will strip out all text formatting and leave behind plain text. Best for simple text.
  •  This button will show a popup box that will keep a lot of the original formatting from the Word document source. This is also the default behavior when pasting directly into the rich text editor. This does not follow best practices so try not to use this feature unless you plan to go through the source and clean up the formatting by hand!
  •  This button will remove all formatting from selected text inside the rich text editor. This will generally solve strange formatting issues you may find from copied text. This button will also remove hard-coded widths from tables that may overflow your guide.

Images

  • All Images need to have Alternate text (ALT tags) included. You can check this by double-clicking the image when in the rich text edit mode.
  • If the image links to a resource make sure the image ALT tag also describes the destination. 
  • Alt tags should be very brief and descriptive but not redundant. Don't repeat the same content from the image into the alt text.
  • Avoid using "Image of..." since this is understood to be an image.
  • Also see guidelines for Images, Video, and Audio in the Web Content Style Guide.

Multimedia

To comply with the GVSU Web Accessibility Policy, all multimedia content (streaming audio and video, etc.) must have text-alternatives available to our users. This means that:

  • If you create a video, you must also create captions and/or a transcript for the video. Contact the Instructional Design Librarian for help with this.
  • If you reuse a video created by someone else, it must have the ability to show captions when embedded. On YouTube, videos that use the automated captioning system will not show captions when embedded on another page. For these videos, do not embed them on a GVSU LibGuide. Instead, create a link to the video on YouTube, where users can enable captions. Better yet, find a video that covers the topic that is more accessible, and has quality captions.

Links

  • 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 list of items into logical groups so that it can be skipped by screen readers.
  • Make sure linked text makes sense out of context. Ambiguous phrasing obscures what the link is about.
    • Bad: Click here for directions.
    • Good: Directions to Grand Valley State University are available online.
    • Bad: Learn more about creating LibGuides content here.
    • Good: Learn more about creating useful LibGuides content.
  • See also the guidelines for Links on the Web Content Style Guide.

Credits

Adapted from Boston College Library's LibGuides Standards and Best Practices.

  • Last Updated: Nov 4, 2022 11:30 AM
  • URL: https://libguides.gvsu.edu/libguideshelp