Skip to Main Content

LibGuides: Best practices

Better Images

The Need

Students using screen reading software. Sr hits an image, the alternative text gets read aloud.

Use Alternative Text

An example of adding an alt tag to an image in LibGuides

Alt text provides information about an image or graphic within the HTML tag of the image. 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?

  • include 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 which 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 that compliance tools may show an error for missing alt text. However, you may leave these alt tags blank as the title of the book is next to the image.

For best practices on creating alternative text, please consult the links below.

Better Headers

The Need

Student using a screen reader will not have access to visual-only cues to your guide's organization.

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 use

  • 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

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-toggle="collapse" href="#collapse-transcript">Video Transcript</a></p>
    <div class="collapse" id="collapse-transcript"> 
    <div class="card card-block"> TRANSCRIPT HERE
    </div>
 </div>

What happens to the information once an event occurs? 

This is the Information Life Cycle Zone 

Information starts with an event 

For example and alien crashes lands in the remote desert of Nevada. 

Moments later, images are posted on social media -- tweets of fear, people may be scared at first.

Later that day, a news crew is on the scene talking to witnesses and checking facts for TV and radio.

News coverage continues in the following days.

People begin to see the alien integrating into human society.

A week or so after the event popular magazines begin to do in depth pieces on the alien.

Given more time, researches begin to publish academic journal articles on very specific topics like 

  • Diseases in Aliens 
  • The Environmental Impacts of space visitors 
  • Green and Yellow Fashion Trends 

During the year following the event, books and government publications address different topics related to the alien landing like

  • water treatment at space ship landing sites 
  • the economic impact of alien technology 
  • and alien culture 

Years after the first alien landing, reference books like encyclopedias and bibliographies include entries on the event.

What followed and how researchers of different types have studied the aliens. 

There may be bibliographies published that bring together lists of all the information published about the alien.

And all this time the conversation never really stopped nor did news stories about the alien in society.

We have reached the end of the information life cycle.

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.

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.

  • 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.

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

State State Capital
Pennsylvania Harrisburg
New Jersey Trenton
Delaware Dover

Better Copying and 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. Rich text editor toolbar screenshot of buttons used for removing hidden text formatting

  • Button to use for removing hidden styles from copied text. The "clipboard-T" (Paste as Plain Text) button will show a paste box that strips out all text formatting and leave behind plain text. Best for simple text.
  • Button to use for leaving the original formatting as in the Word document. 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. 
  • Button to use for removing all formatting from selected text in the rich text editor. 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

Accessibility for non-HTML documents

Here are links for tips on making additional file types accessible

Recommendations for most of these formats echo those for webpages such as using headings to convey logical flow for a Word document and PDFs.

Additional Information on Accessibility & Assistive Technology