UCF Research Guides: LibGuide Accessibility: Common Errors

Headings

Screen readers rely on HTML tags to identify headings.

When adding content with the editor tools, use the pre-set headings <h1> to <h6>, and use them in correct hierarchical order meaning that <h2> should always follow <h1>.

In LibGuides <h1> is only for the page title. <h2> headings are for box titles. This means that you should use only <h3> and lower headings for box content.

This helps screen readers navigate the LibGuide. It is very difficult for blind or visually impaired users to navigate the page logically without headings.

Text Color

There should be a strong contrast between the text and background colors. Don't rely on text color alone to emphasize text. Color is not usually available to screen readers and won't be useful to all users.

To emphasize text, use bold or italics. If you are going to use a text color, make sure to use a strongly contrasting text color along with bold or italics. For example, a light or bright red such as this color will result in an accessibility error because the contrast between the font and the background is not visible enough. Choose a darker red such as this font instead.

Tip: Run an accessibility check on this page to see the font contrast error.

Hyperlinks

The purpose of a descriptive link is to give users the proper context of where the link will take them. Instead of using words like “click here”, descriptive links allow screen readers to navigate in a clear and logical way.  

Not Correct: To find more information, click here. 

Correct: To find more information, visit the UCF Libraries homepage. 

Videos

To make embedded videos WCAG 2.0 compliant, you may need to manually add the video title to the embed code. The embed codes that are generated from most sources (Vimeo, YouTube, library streaming videos) don’t include a title.

Here’s an example of a Vimeo embed code that is missing the title:

<p><a href="https://vimeo.com/276444525">Anatomy of a Research Article: Arts & Humanities Edition</a> from <a href="https://vimeo.com/ucflibraries">UCF Libraries</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

You can edit your widget by clicking on the “edit” icon in the Assets section. In the “embed code” section, add the title after the opening iframe code:

The screenshot below is an example of how to edit embed code in a LibGuide.

Please remember to always double check to see if a widget has already been created for a video before creating a new one.

Alternative Text for Images

There are many times that images can appear in your LibGuides - from screenshots, to pictures, to book covers. If you are adding a book using the "Book from the catalog" Springshare automatically fills in the alt text field. Adding any other type of image requires you to fill in the alternative text field.

Image Properties form highlighting the Alternative Text field

Alternative text serves several functions:

Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images.
If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image.
Search engines use alternative text and factor it into their assessment of the page purpose and content.

Alternative Text Rules:

Be accurate and equivalent in presenting the same content and function of the image.
Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as concisely as is appropriate. Typically, no more than a few words are necessary, though in rare cases, a short sentence or two may be appropriate.
Don't be redundant or provide the same information as text within the context of the image.
Don't use the phrases "image of ..." or "graphic of ..." to describe the image. It's usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user knows that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Much of this was taken from WebAim, Alternative Text.

Book Descriptions

When adding a book from the catalog and displaying the description, make sure to select "Display beneath item title" or "Clickable "info" icon" in the Description Display area. A screen reader will not be able to read the description if using "Hover over item title."

LibGuide Accessibility