LibGuides Accessibility Cheatsheet

Inside

Build Better...

Better Images

The Need

Students using a screen reader will hear the alternative text read aloud when the reader hits an image on your page.

Use Alternative Text

Alt text is how you convey the content you are trying to share via an image or graphic. Screen readers read this description is then read in the place of an image. The insert image tool in LibGuides provides a space where we can insert this description. (image right)

What should be included in an alt text?

All relevant information about the image’s appearance and function.
Keep it brief.
You do not need phrases such as "image of...." as the screen reader will announce it is an image.

Alt text is not needed when...

Graphics are purely decorative.
An alt tag would be repetitive information.
- For example, book cover images from catalog items because the book title is already conveyed in the book link.
Note: compliance tools may show an error for missing alt text.

Better Headers

The Need

Two fold: 1) Student using a screen reader miss the visual-only cues to your guide's organization. 2) Using a screen reader, you can surf your page's content by listening to, and navigating by, the headers.

Proper headings gives your content logical hierarchy.

With a screen reader, students can jump to headers within the page, thus....
Headings provide an outline or table of contents for your guide.
Use the Format dropdown to create Headings.
In the same vein, do not simply making text bigger with the size menu.
Alternatively, go into "Source" and wrap your header with the appropriate header tags by hand.

Example of good heading order

H1 Guide Title
- H2 Box Title
  - H3 Section inside a box
    - H4 Sub-section inside a box
    - H4 Sub-section
  - H3 Section
- H2 Box Title
  - H3 Section
  - H3 Section
    - H4 sub-section
    - H4 sub-section

Please note!

Heading styles in the WYSIWYG editor easily carry over to adjoining paragraphs.
This happens when...
- Deleting into a prior heading.
- Accidentally highlighting the space at the end of a paragraph which selects the next paragraph.
Whole paragraphs tagged as headers really mucks with your site's accessibility and usability.
If in doubt, click the Source button and double check the HTML code.
If you college gets an accessibility study, you can get dinged for this error and they are difficult to find.

Better Links

The Need

Screen readers can skim all the links on a page. Thus links should be able to stand on their own without context.

The Solution

Make sure linked text makes sense out of context.
Avoid the phrase "click here" for something, especially without the something being part of the link.
Ambiguous phrasing can obscures what the link is about.

Examples

Bad: Click here for directions.
Better: Directions to Miami University are available online.
Bad: Learn more about accessibility here.
Better: Learn more about accessibility standards from WebAIM.

Better Video

The Need

Video can be a huge roadblock as it is inherently an audio and visual experience, leaving students in the cold who have difficulty perceiving one or the other.

Video tutorials

If you are creating video tutorials, keep them short and to the point.
Create a transcript of the tutorial and provide a link to the transcript with the video.

Embedding Films on Demand videos

Check to see if closed captioning is available with the video.
Add a separate link below the video to the page on FOD so students can access the transcript.

Closed captions and transcripts

Use videos that have closed captioning at all times possible.
Closed captions should reflect all sound including background noises and sound effects.
Ideally, student should be able to control the close captioning during playback such as captioning color and size.
Provide a link to a transcript it at all possible. Video with blinking and/or fast-cut edited video can cause issues for students with conditions such as epilepsy and migraines.

Sample video transcript button

Below the video, you will see a clickable transcript button. This button uses the following code that taps into the built-in Bootstrap Framework without extra javascript required.

<p><a aria-controls="collapse-transcript" aria-expanded="false" class="btn btn-primary btn-sm" 
data-bs-toggle="collapse" href="#collapse-transcript">Video Transcript</a></p>
    <div class="collapse" id="collapse-transcript"> 
    <div class="card card-block"> TRANSCRIPT HERE
    </div>
 </div>

The Information Life Cycle courtesy of UNLV Libraries on Vimeo.

Video Transcript

This video is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 United States license. Courtesy of the University of Nevada-Las Vegas Libraries. Published July 2016.

Bootstrap Collapse functionality

Better Color

The need

Students with color blindness may not be able to differentiate poorly chosen color combinations. Students with low-sight may have issues with color combinations with low contrast. Students with no sight will miss messages conveyed with color.

Don't rely on color 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.
This color information is also unavailable to screen readers.

Watch your color combinations

Resources below can help you avoid color combinations that can result in contrast issues for students with color blindness.
Similarly low contrast, such as white on gray or white on yellow, can be be very difficult to read for students with sight disabilities and dyslexia.

Better Tables

The Need

Because tables often carry a lot of data, we need to provide a screen reader guidance on what data will follow.

Screenshot of table properties menu in LibGuides.

Solutions

Use tables for data that fits well into rows and columns.
Do not use tables for formatting pages, links, or other information.
Always use table headers to describe the contents of the table columns.
The table headers should clearly communicate the data below them.
Avoid spanned rows as screen readers may not properly parse them.

Example

Here is an example default 3x2 table with a header created within the rich text editor.

State	State Capital
Ohio	Columbus
Indiana	Indianapolis
Kentucky	Frankfort

Source: Boston College LibGuides Accessibility Guide

Better Copying & Pasting

Be careful when copying & pasting content from other sources (or even your own LibGuides).

Hidden style code will be copied along with the content that can break any of the above accessibility tips.

How to avoid hidden styles

The rich text editor has a few useful tools to use.

The "clipboard-T" (Paste as Plain Text) button will show a paste box that strips out all text formattingand leave behind plain text. Best for simple text.
The "clipboard-W" (Paste from Word) button will show a paste box that keeps the formatting structure from the source, but strips out extra styling.
This button will remove all formatting from selected text inside the rich text editor. This will generally solve strange formatting issues you may find from copied text. This button will also remove hard-coded widths from tables that may overflow your guide.

Extra tip: You can also use the "Paste from Word" button with data from Excel!
When you paste in a series of cells, the resulting paste will be a simple and clean HTML table in your guide!

Source: Boston College LibGuides Accessibility Guide