Skip to main content

Accessibility

A brief guide to accessibility in LibGuides at College of San Mateo.

Introduction to Accessibility

National Archives Accessibility Logo

Topics Covered

The following buttons will navigate you directly to the section on this page

Headings

Using Headings

Proper heading structure is a crucial piece of creating accessible content and meeting WCAG Guidelines. In LibGuides, each page's title is declared by the system as an h1 tag, and each section or box is given an h2 tag. By nesting other headings within sections, we can provide further context to screen reader users as to what that section contains.

Common Errors when Using Headings

The most common error that users at College of San Mateo encounter when organizing their content using headings is skipping heading levels. It is important to know that when using headings, it creates a hierarchy for our content that most screen reader users rely upon as their primary method of navigation. An h3 heading should always be followed by an h4 heading, and an h4 heading should always be followed by an h5 heading. Do not use headings strictly to manipulate font size. There are other methods that can be used to achieve the same result for visual users. Contact Bryan Besnyi if you have any questions about how to achieve this.

Example of Heading Structure

See the Pen dwYqKW by bryanbesnyi (@bryanbesnyi) on CodePen.

Links

Links are another method of navigation for screen reader users. By using descriptive links rather than phrases such as "click here" or "link," we can better serve screen reader users. LibGuides also does a great job when using their lists feature or other widgets of asking for the title of the link

To give a bit of context as to why a phrase like "click here" can be detrimental to the usability of our LibGuide, it is important to understand that screen reader users do not use sites in the same manner that visual users do. While a visual user may scroll through a site and recognize headings and links, a screen reader user may elect to have all of the links on the page listed out to them. If you have a listing of articles, for example, and use "click here" to direct users to the site, a screen reader user will hear only the repetition of "click here, click here, click here" without any context of the function of the link.

Descriptive Links Example

See the Pen Descriptive Links by bryanbesnyi (@bryanbesnyi) on CodePen.

Other Considerations to Consider When Using Links

WCAG Success Criterion 1.4.1: Use of Color states that links should not rely solely on color to convey meaning to page elements and this applies to our links as a result. Please note, this is difficult to accomplish in LibGuides, although it does apply an underline upon hovering over the link which aids in meeting the success criteria. Upon the next update of LibGuide's styles, we can take a look at a solution that will better identify links without any further effort from Library staff members. The success criterion, however, is important to keep in mind when designing a LibGuide for all page elements.

Text Alternatives

Using Text Alternatives to Help Identify Media to Screen Reader Users

Images

Screen Reader users have a difficult time with understanding the content of images on LibGuides. In order to better serve those users, is is important that we provide text alternatives using the "alternative text" field in the images pane. The following image shows where this is located.

Location of alternative text field in insert images pane

Audio and Video

Audio and Video content should have captions and/or text transcripts to better assist screen reader users. A forthcoming module in this LibGuide will describe different methods on how to achieve this.

Lists

Using the Appropriate List Type

There are two different types of lists in the LibGuides rich text editor, ordered lists and unordered lists. An example of using an ordered list would be steps in a given process in which the order of the items is important (such as steps to enrolling at College of San Mateo). An example of an appropriate time to use an unordered list is a list of a collection of links to useful resources. Please note: LibGuides also does a good job of assigning the appropriate list type when using their widgets, but consider the message you are trying to convey when manually including links.

Example of Ordered and Unordered Lists

See the Pen Lists by bryanbesnyi (@bryanbesnyi) on CodePen.

Tools

Links to Useful Tools

Abbreviations

Using the abbr tag for Abbreviations

See the Pen Abbreviations by bryanbesnyi (@bryanbesnyi) on CodePen.