LibGuides: FSU Standards & Evolving Practice

LibGuides are designed as an accessible, ADA-compliant platform. However, because individual LibGuides account holders have tremendous freedom to develop and publish content on the platform, LibGuides creators are responsible for ensuring their own content meets accessibility standards.

• Avoid relying on non-HTML content that may not be accessible, like PDF or PowerPoint documents.
• Don't use color as a way to convey meaning or importance. Colorblind users and screen readers 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.
• In keeping with the W3 Web Accessibility Initiative, only use tables "to organize data with a logical relationship in grids."
  • <table> elements should not be used for layout purposes as this interferes with the responsive design of LibGuides and may reduce site accessibility.

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.

• Only use Heading 3 (<h3> tag in HTML) and below in rich text boxes.
  • Heading 1 (<h1> tag in HTML) describes your guide title and should be the only time Heading 1 is used for the entire page.
  • SpringShare uses Heading 2 (<h2> tab in HTML) for box titles, so any content within a box should use lower numbered headings otherwise your hierarchy gets confused.

One way in which online content is made more accessible is by affixing Alternate Text (ALT tags) to all images. Not only do ALT tags describe an image for audiences that cannot see the image and/or use screen reader technologies to navigate web pages, but they also provide image descriptions when an image fails to load due to limited internet speeds, connection interruptions, or other technical difficulties.

• Not familiar with ALT tags? Read through the WebAIM: Alternative Text tutorial to learn best practices for applying ALT tags to images online.
• All Images need to have ALT tags included. You can check this in LibGuides 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.

• 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: Maps and directions to FSU Libraries are available online.
  • Bad: Learn more about LibGuides here and here.
  • Good: Learn more about creating FSU LibGuides and achieving our accessibility standards.