Skip to main content

Accessibility: Best Practice Guide for Library Staff

This guide is designed to cover the best way to design and create content on web sites, so that it is accessible to everyone. This guide aims to outline the top tips on how to create engaging and well-structured webpages, ensure video and audio content are accessible and that all web content is usable and accessible for all. 

Creating Content

It is important to use significant contrast between the background of your slide and the font color. This will make it easier for those who are color blind or who have low vision to read your slides.

If you are trying to convey information through the use of color, it is important to convey it in another way.

  • A bar chart that is coded in color can also include text in the graph.
  • Add an underline to a color-coded hyperlink text.

There are a number of web pages, such as National Eye Institute and WebAIM, that have helpful guidance and tips relating to colour contrast and ensuring that webpages are easily accessible to a wider audience.

Take caution when copying & pasting content from any source. Many times hidden style code will also be copied along that could break with best practices and introduce inaccessible content.

There are a few ways to avoid hidden style code from being placed into your guide. The rich text editor has a few useful tools to use. Screenshot of rich text editor toolbar. Focus on buttons used for removing hidden formatting from text

  • Button to use for removing hidden styles from copied text. This button will show a popup box that will strip 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. This button will show a popup box that will keep a lot of the original formatting from the Word document source. This is also the default behavior when pasting directly into the rich text editor. This does not follow best practices so try not to use this feature unless you plan to go through the source and clean up the formatting by hand!
  • 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.
  • All Images need to have Alternate text (ALT tags) included. You can check this by double-clicking the image when in the rich text edit mode.
  • If the image links to a resource make sure the image ALT tag also describes the destination. Screenshot of how to add alternative text to an image within the rich-text editor.
  • Alt tags should be very brief and descriptive but not redundant. Don't repeat the same content from the image into the alt text.
  • Avoid using "Image of..." since this is understood to be an image.
  • WebAIM is a good starting resource for alt tags principles.
  • Only use tables for tabular data that fits well into rows and columns.
  • Don't use tables to format links or other information. 
  • Use table headers to describe the contents of the table columns.
  • Avoid spanned rows as screen readers may not properly parse them.
  • Tables have special styling to make them work well with responsive design. No need to manually change the table's width or cell padding in LibGuides.

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

Header A Header B
cell A1 cell B1
cell A2 cell B2

Use rich text Headings as indicators for sections and sub-sections in your guide. This not only provides heirarchical organization and formatting but also makes it easy for screen readers to scan and jump to different content areas.

  • Screenshot of the Headings dropdown.Never use Heading 1 (<h1> tag in HTML) in your guide as this should only be used once for the entire page.
  • SpringShare uses Heading 2 for box titles so only use Heading 3 (<h3> tag in HTML) and below in rich text boxes.
  • Higher numbered Headings should be placed above lower numbered ones otherwise your heirarchy gets confused.
  • SpringShare has removed <h1> and <h2> tags in the box editor for WCAG2 compliance.
Loading ...

Iorad, online tutorial tool

Iorad – helps to build and share tutorials for any desktop/web application instantly. It can be added as a Chrome extension.

How does it work?

First, go to Iorad.com and create your account for free. You can also go to Chrome Webstore and install the Iorad Chrome extension. Once installed, click the Iorad button:

Screengrab with the Iorad icon added as a Chrome extension in the Chrome toolbar on the top right corner of the screen.

A small window will pop out – click ‘Capture Your Tutorial’ and follow the instructions – creating a tutorial will take you just a few moments. When finished, click ‘Done’ and then you will be able to preview and edit your tutorial. Iorad has already broken the process into steps and automatically adds written instructions that you can check and change if needed.

Once you have completed previewing and editing your tutorial, you can share your tutorial. There are a few ways ofdoing it –  please see the left side of the screen:  

  • You can embed it on your website by clicking the buton ‘Embed’
  • You can share the URL (normal or shortened) to your tutorial – you can Click the button ‘Copy’ located next to each of the links
  • You can download it as a pdf – please note that free version of Iorad enables to download only 1 page as a pdf file. To do this click ‘PDF’ button located in the middle at the top of the screen.
  • Additionally, next to the ‘PDF’ button a drop down menu is located, where you can change the language of your tutorial. The default setting is ‘English’ but there is a number of languages to choose from: from Afrikaans to Zulu!

A screengrab presenting mentioned before options for sharing tutorials, downloading pdf and changing the language of your tutorial.

Content Style

Content

  • 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.
  • Write the content clearly and simply.

Font and colour

  • Don't use color as a way to convey meaning or importance. Colorblind users and screenreaders may not pick up on color changes.
  • Don't mix different font types. Stick to the default font. 
  • Ensure proper contrast between the font and the background. 
  • Avoid changing the font size unless you have good reason. If you need headers within a text box, use Heading 3 and Heading 4 in the rich text editor, or use <h3> and <h4> tags in the HTML.
  • Underlining text that is not a hyperlink is best avoided as it causes confusion.
  • Use bold or italics in the rich text editor (or <strong> or <em>tags in HTML) to indicate emphasis, but use them sparingly and effectively. 
  • When using HTML, avoid older-style bold <b> or italics <i> tags as they denote style rather than importance.
  • Avoid relying on non-HTML content that may not be accessible, like PDF or PowerPoint documents.
  • Don't mix different types of fonts. Stick to one font where possible (sans serif is the best one for visibility and readability).
  • Use bold, colour, italics and ALL CAPITAL LETTERS sparingly

Non-Text Content

  • Provide appropriate alternative text to non-text content (such as images) in web pages. It is especially helpful for people who are blind or have other severe visual impairments and rely on a screen reader to have the content of the website read to them.
  • Caption and/or provide transcripts for media - videos and like audio must have captions and a transcript. 

Structure

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.

Links

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 webpage. Certain phrases like "click here" and "more" must be avoided.

One last thing to remember

  • Ensure accessibility of non-HTML content including PDF files, Microsoft Word and Powerpoint Presentations.