Skip to Main Content
Research Guides@Tufts

Accessible LibGuides

Headings

The following is true for the HTML of all LibGuides through the product's HTML structure:

  • The title of your LibGuide is a Heading 1 / <h1>.
  • Box titles are Heading 2 / <h2>.

This is because according to accessibility standards, heading levels:

  • Are used to structure page content and convey a hierarchy of information, not for their visual appearance.
  • Are used in order. You don't skip heading levels. Example: You don't use <h3> followed by <h5>or <h4> followed by <h2>.

If you want to use a heading inside of a box:

  • Be sure your heading coveys a hierarchy of information. Don't use a heading for style or because it looks good. Use font size for that instead.
  • Start with Heading 3 / <h3>

 

References: WCAG Success Criterion 1.3.1 (Level A): Info and Relationships 

Lists

Lists enhance usability by breaking up text and allowing users to scan information to find relevant content and easily digest it. Rules for lists:

  • Always use the Rich Text HTML Editor buttons to style your numbered (ordered) and bulleted (unordered) lists. They add HTML tags that tell screen readers to announce a list is being read so users know how items in the list are related. 

Numbered and Unnumbered List Buttons in the LibGuides Text Editor are circled in green.

  • Use numbered lists when the order of the list matters. If the order of the list does not matter, use a bulleted list. \
  • Don't use a numbered list if the order of the list is not essential. This may increase the user's cognitive load to remember or record the list in order when it's unnecessary. 

 

References: WCAG Success Criterion 1.3.1 (Level A): Info and Relationships

Text Formatting and Appearance

LibGuides are formatted using stylesheets in CSS to provide a consistent user experience. Try not to deviate from the style, which was designed thoughtfully and intentionally.

For example, suppose you change the color of the text or the background color against which it appears. In that case, you need to check the color and background colors together using a contrast checker to ensure it meets the minimum contrast ratio under WCAG, which is 4.5:1 for small text and 3:1 for large text.

Best Practice: Enhance text sparingly

  • Don't change the font. This isn't a student newspaper or band flyer. There's no need to have multiple fonts.
  • People with Dyslexia and other reading disorders often find sentences of bolded, italicized, or underlined text hard to read, so don't apply these styles to more than a concise sentence.
  • Don't underline text. It looks like a hyperlink.
  • If you're using HTML, don't use deprecated tags like <b> or <i>. Use the current ones. 

References: WCAG 2.2, SC 1.4.3 (Level AA): Contrast (Minimum),

Copying and Pasting

  • If you have formatted text that you want to revert to standard, you can press the "Remove Format" button next to the strikethrough button. This will remove most styles from the Styles menu. It will also remove font changes, font size changes, font color changes, bold, italics, and strikethrough. It will not change semantic structure like headings, lists, or links.
  • You used to be able to copy and paste into Microsoft Word and then into LibGuides' Rich Text Editor, and the right amount of styling would carry over and not interfere; however, that paste button is no longer available because of a security issue, according to LibGuides.

The Remove Formatting button in the LibGuides Rich Text Editor is circled in green and labeled with text.