Accessible LibGuides

Floating boxes appear to have no title or border on a guide. If you do this for all boxes on a single-column page (except for your profile box), the page will look more like a typical website, which can be useful for some types of content.

Because a floating box's title is not known to the user:

• DO NOT make a tabbed box or gallery box a floating box. Only standard boxes can be floating boxes. Other types rely on the title as a label with semantic value for users of certain assistive technologies.
• Rich Text / HTML content in floating boxes must start with a Heading 2 <h2> if you're using headings, so users will still have a proper page structure for meaning and navigation (see Headings). This is tricky because there is no Heading 2 option in the Format dropdown menu, so here is the workaround:

1. Add a Rich Text / HTML item as the first thing in the floating box.
2. Choose the Italic Title option from the Styles dropdown to create a level 2 heading. While the heading will look italicized in the rich text editor, it will look normal on the page.

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

Tabbed boxes in Libguides used to be inaccessible. That is no longer the case; however, the old tabbed boxes are still on older guides, so you'll need to replace them.

To use a tabbed box correctly:

• Give your box title a descriptive label, so that it is the name of a list and each tab is an item on that list. The tabs of a tabbed box are presented to a screen reader using the <tablist> element and the title of your box is the list label.
• Don't inadvertently make a tabbed box a floating box. If any other boxes on the page are floating boxes, the tabbed box will convert itself to a floating box on the published page, but it needs to start as a standard box to use the box title as a label for the tab list.

Settings:

• Automatically Play: Off.
• Show Dots: Off.
• Only use this box for images. Other settings have not been tested for accessibility. The defaults should be fine.

Do not include a slide title if you want to make one of the images a link. LibGuides creates two separate links rather than combining the two, which is confusing for accessibility. Instead, add a title as a heading (level 3) in the rich text editor as a workaround. 

Also, if you make one of the images a link, remember that alt text for images that function as a hyperlink should always describe the link destination and never the image itself.

Reference: Web Accessibility Initiative (WAI) functional images tutorial. WAI writes WCAG.