LibGuides: A How-To

Link Responsibly

• Provide a descriptive title in the Link Name field, avoid ambiguous titles like Resources, More Information, and Contact Us 
• Sufficient details about the link should be provided in the Description field
• Let the user control how links are opened with their browser settings
• Authors should choose to display the description beneath the item title when adding these asset types
• Don’t emphasize text by underlining, as users expect underlined text to function as a link

Alternative Text ("Alt Text")

Alt text is read by screen readers in place of an image, conveying the image’s content and functionality to those with visual or certain cognitive disabilities. Every image should have an alt attribute.

• Text entered into the Alternative Text field of the Image Properties box will be added to the alt attribute of the img element.

Transcripts, Captions, and Audio Descriptions 

Transcripts are essential to people who are unable to hear or have difficulty hearing audio and who are unable to see or have difficulty seeing video. Captions provide text versions of audio, but they are synchronized with the media. Audio descriptions make video accessible for people who are blind or visually impaired by providing short, audible descriptions of what is visible on the screen. 

• Provide transcripts by uploading accessible files as Document/File assets or linking to accessible files hosted externally.

Structure Content with Headings

Headings add structure and meaning to webpages and documents by labeling each content part and indicating the order and relative importance of those parts

• Select headings from the rich text editor’s Paragraph Format options or add heading tags to the HTML. As Heading 1 is used for the Guide Name and Heading 2 is used for the Box Name by default, any additional headings added by guide authors should begin with Heading 3.

Gallery Boxes 

The accessibility and usability challenges presented by carousels, slideshows, and sliders are well-documented: animations can be distracting, transitions between images too fast, and keyboard navigation lacking. 

• Gallery Boxes are problematic for accessibility and should be avoided. 

Instructions for using WAVE

1. If using the browser extension, navigate to the page you wish to evaluate, then click the WAVE button in your browser tool bar. If using the WAVE website, paste the link to the page you want to check into the bar on the center of the page. You can use the special page URL to check a specific tab in your LibGuide, or you may choose to navigate the LibGuide directly in WAVE once you have checked the main page (tab).
2. When the page loads in WAVE, you will see a summary of the report on the left as well as your page overlaid with icons on the right. Red and yellow icons highlight potential problems, while green, blue, and purple icons highlight useful structural queues for screen readers and other accessibility tools.
3. The Details pane, indicated by the red flag icon on the left, lists each of the errors, alerts, and features individually. You can also click on the icons overlaid on the page directly, and read details about what the error means, why it matters, and how to fix it on the Documentation pane marked by the blue circle icon with an "i" in the center. The dropdown at the top of this pane, let's you choose to which WCAG level you wish to adhere. (You must choose WCAG 2.0 AA or leave Full selected.)
4. The Outline pane, marked by the white page icon, shows you the Outline of your page that a person using a screen reader would navigate in order to interact with your page. If it would be difficult to a person using a screen reader to get to the main content of the page, consider reordering your content boxes. The "No Styles" view available through the center button at the top of the left sidebar can similarly help you understand the flow of your content.
5. Finally, the Contrast button at the top-right of the left sidebar can let you know if any colored text or links do not contrast sharply enough with their backgrounds for people with color blindness or other vision issues to be able to see reliably.

Web accessibility means creating digital resources on the web that everyone can use.

1. Provide appropriate alternative text
   Alternative text provides a textual alternative to non-text content (such as pictures and images) in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.
2. Provide appropriate document structure
   Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.
3. Provide headers for data tables
   Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the <th> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.
4. Ensure links make sense out of context
   Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like “click here” and “more” must be avoided.
5. Caption and/or provide transcripts for media
   Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient.
6. Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content
   In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.
7. Allow users to skip repetitive elements on the page
   You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a “Skip to Main Content,” or “Skip Navigation” link at the top of the page which jumps to the main content of the page.
8. Do not rely on color alone to convey meaning
   The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.
9. Make sure content is clearly written and easy to read
   There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately.

- Selected items from the Web Accessibility Toolkit's Standards & Best Practices