Creating Accessible Websites

A website menu shows several accessibility features, including options to change the text size and high contrast.

When creating or renovating websites, it is important to ensure that people with different types of disabilities are able to use your website.

An accessible website is often coded and designed by a website developer who is aware of and follows international standards on accessible design, especially the Web Content Accessibility Guidelines (WCAG) produced by the World Wide Web Consortium (W3C).

The following checklist includes important website terminology to know and a series of questions that are important to consider throughout the process of creating an accessible website. The document available below includes the information provided on this page as well as additional resources and guidance.

Important Website Terms to Know

Accessibility or “How to Use this Website” page:

It is helpful for website users to be able to visit a page entitled “How to Use this Website” or “Accessibility” that describes the accessible features of the website and provide directions for features such as increasing the font size or turning captions on. An example of this type of webpage can be found on the Electoral Commission of the UK’s website at http://www.aboutmyvote.co.uk/accessibility 

Alternative text, or alt-text:

Alt texts are brief text descriptions of an image’s content that is displayed when an image is not visible on the page. Persons using screen readers will be able to hear the alt text in place of the image. Alt-texts are usually added through the back-end of a website. Suggestions for how to write alt text can be found at: http://webaim.org/techniques/alttext/ 

Back-end or front-end:

back-end is an interface where you (or a web developer) can add new content and code to change the way that the front-end of a website looks or behaves. The front-end of a website is the normal view that website visitors and users see.

Breadcrumbs:

To assist a website user in going back to previous pages, the ‘breadcrumb’ feature is recommended. Breadcrumbs are a progression of links that show the user the categories they visited, usually placed at the top of the webpage. It may look something like this: 

About Us >> History >> 1950s – 1960s

Captions or subtitles:

There are two different types of text for videos: captions and subtitles.

  • Captions include dialogue and sound notes (e.g. a doorbell chiming, a person speaking with a foreign accent, wind blowing) for people who are deaf or hard-of-hearing.
  • Subtitles are used for dialogue, but don’t include sound notes. For this reason, deaf and hard-of-hearing audiences prefer captioning.

Though YouTube offers automatic subtitles (YouTube calls their service “automatic captioning” even though it is in fact subtitles, as sound notes are not provided) the results are often inaccurate. Until the technology improves, captions should be added manually through YouTube or an editing program such as Final Cut Pro.

Easy-to-read text:

It is a good idea to offer text in an easy-to-read format. Easy-to-read is text where the content and illustrations are simplified for ease of use by people with intellectual disabilities and non-native speakers of a language. Two good examples of easy-to-read formats can be found at www.promotethevote.co.uk/ and http://www.everyvotecounts.org.uk/ 

Slideshows:

Photo slideshows are a common design feature for websites (see an example at www.dredf.org or www.miusa.org), but they are often not fully accessible. Photo slideshows can still allow screen readers to navigate between slides to the links by providing photo descriptions and captions in the alt text for each photo.

Text-to-Speech:

Text-to-speech is a feature that allows people to click on text to hear the content being read aloud. It is not meant to be a replacement for a screen reader, but is another way to offer website visitors important information, especially those who might have difficulty with reading. Examples of this feature can be found at the Swedish Association of Location Authorities and Regions’ website at www.skl.se/english and on the Swedish Election Authority’s website at spoxy4.insipio.com/generator/se/www.val.se/