Skip to main content

UConn Library's LibGuides Standards and Best Practices — Accessibility

A guide to help you create and edit your subject, course, topic and general purpose guides

Accessibility

Create guides that are accessible to all users, including the blind or visually impaired. All pages must meet state accessibility guidelines (see links below) and best practices. Make sure that:

  • All links should open in the same windows
  • All images have alt-text
  • Do not change fonts color, styles and or font sizes. They are already set following accessibility standards

Accessibility Best Practices

We are using a new template to organize and display the content of all our guides that follow the best practices regarding accessibility. Because of that there are features from the old version (v1) that can't be used in v2. One of them are cascading/or drop-down menu for sub-pages:

  • Cascading/drop-down menu sub-pages are not compatible with mobile devices and can't be crawl properly by search engines. They are also hard to access and the content may not be found or may be ignore by users.
  • If your migrated guides have sub-pages, you need to convert them into pages, or if you have many sub-pages, consider creating a new guides for that content or delete them if you don't need them anymore.

You can move sub-pages using the Page menu.

  • Click on the icon to display the menu.
  • Select Pages under the "Reorder/Move" option
  • Hold the sub-page that you want to move and place it in-between the pages where you want to place the new page (you will see a black arrow pointing in-between the pages)

If you have questions about this process, contact us.

Fonts and colors:

  • Use the default font: The default fault is already set and ready to go. You just need to type in the rich text box and voila! you are done!
  • 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 change font type. Stick to the default font
  • Avoid changing the font size unless you have good reason (Consult the LGMT regarding why you need a bigger or smaller font size).
  • You can use bold or italics, but not both together. Use italics sparingly.
  • Don't underline text. Users may confuse it with hyperlinks and get confused.
  • Use bold or italics in the rich text editor or inside Links Custom Description (or <strong> or <em> tags in HTML) to indicate emphasis. Use these tags sparingly. 
  • Do not use use these HTML code tags for bold <b> or italics <i> as they denote style rather than importance.

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.

To remove all formatting that is not in compliance with the guidelines, open the rich text box to access the editing menu. Use Ctrl + A (Control All) to select all content inside the box. Select the option "Remove Format" Button to use for removing all formatting from selected text in the rich text editor.. Your text will then default to the font type and size already set for the guides. If that doesn't work, you can instead, cut and paste the content using the Paste from Word or the Paste as Text options in the editing menu.

 

Screenshot of rich text editor toolbar. Focus on buttons used for removing hidden formatting from textWhen creating a new guide or adding new content to a guide, 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.

  • Button to use for removing hidden styles from copied text. Use this button to strip out all formatting and leave behind plain text. Click OK to add the "clean" text to your box. Recommended.
  • Button to use for leaving the original formatting as in the Word document. Use this button to keep a lot the essence of the original formatting from Word documents but it will remove most of the non-default formatting. But, sometimes still keep the wrong formatting. If that happens, then...
  • Button to use for removing all formatting from selected text in the rich text editor. Use this button to remove all formatting from the selected text inside the rich text editor. This will generally solve strange formatting issues you may find from copied text.
  • All images must 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. Screenshot of how to add alternative text to an image within the rich-text editor.
  • Convert most informational Microsoft PowerPoint and Word files to PDFs before posting them on LibGuides. This ensures superior control of UConn-owned content as well as accessibility and persistent file durability.
  • Provide closed-captioning or transcripts for all video and audio files whenever possible.

► Only use tables for tabular data that fits well into rows and columns.

► Don't use tables to control how to display your content in a box. Check the section on how to use Bootstrap to Display Content to learn a better way to do so

► If you want to set images side by side, Contact LGMT so we can help you with the right bootstrap code to display your content (without the need of tables!)

► Use table headers to describe the contents of the table columns for screen readers to find.

► Tables have special styling options in LibGuides (Under Styles → Compact Table or Borderless Table) to make them work well with responsive design. There is no need to manually change the table's width or cell padding in LibGuides.

► You can create a table in Rich Text box, using the Table Properties tool

► Use the Class option to decide which table class you want to use

► You could create a table in Word first and then copy and paste it by using the Paste from Word Paste from Word iconoption. But, be aware that not all bad code may be removed when pasting from Word. You need to edit those elements out using the Source option.

► After the table is created, click on it to select it, and then click on the Styles option, and select the type of table you want to use.

► Your new table will be formatted properly and will change size automatically regardless of the device use to see it.

Use headings (under the Normal menu) 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.

  • Screenshot of the Headings dropdown.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 the hierarchy gets confusing.
  • 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.

 Screenshot showing the Description Display option to choose, which is Display beneath item title.

  • Break up long list of items into logical groups so that it can be skipped by screen readers.
  • Make sure anchor text (hyperlinked text) makes sense out of context.
Loading ...