How to Design SEO Friendly Websites for Blind and Visually Impaired Users

According to the World Health Organisation, an estimated 253 million people live with vision impairment worldwide. 

Designing websites to accommodate blind and visually impaired users is not only a sensible move from an economic perspective (why exclude such a large potential market?) but it constitutes a moral obligation and, in many instances, a legal one, too.

In this article, we explore the advice and tips given to web designers by organisations such as the W3C, European Blind Union, and others.

The Web Content Accessibility Guidelines 2.1 published by the W3C, an organisation responsible for web standards, states that a website must be perceivable, operable, understandable and robust in order to be considered accessible. In the Guidelines, the following advice is given:

Perceivable

  • Provide text alternatives for non-text content.
  • Provide captions and other alternatives for multimedia.
  • Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
  • Make it easier for users to see and hear content.

Operable

  • Make all functionality available from a keyboard.
  • Give users enough time to read and use content.
  • Do not use content that causes seizures or physical reactions.
  • Help users navigate and find content.
  • Make it easier to use inputs other than keyboard.

Understandable

  • Make text readable and understandable.
  • Make content appear and operate in predictable ways.
  • Help users avoid and correct mistakes.

Robust

  • Maximize compatibility with current and future user tools.

The W3C’s previous 10 “Quick Tips“, now marked “outdated”, are still worth adhering to:

  1. Images & animations.Use the alt attribute to describe the function of each visual.
  2. Image maps.Use the client-side map and text for hotspots.
  3. Multimedia.Provide captioning and transcripts of audio, and descriptions of video.
  4. Hypertext links.Use text that makes sense when read out of context. For example, avoid “click here”.
  5. Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
  6. Graphs & charts Summarize or use the longdesc attribute.
  7. Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
  8. Frames. Use the noframes element and meaningful titles.
  9. Tables. Make line-by-line reading sensible. Summarize.
  10. Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

The European Blind Union provide a wealth of useful tips and guidelines in a document titled Making information accessible for all.

HTML

The Web Content Accessibility Guidelines are the standard for accessible websites. The standard is edited by the World Wide Web Consortium and has been translated into several European languages.

The key to an accessible website is correct use of HTML for structure and CSS for layout.

In HTML structure elements exist for paragraphs (p), headings and subtitles (h1, h2, … h6), lists (ul, ol and li).

In a table one should identify the table headers by using th elements. The caption element does what its name suggests.

  • All functionality must be operable from the keyboard.
  • All images have an alt-attribute that provides a text alternative.
  • Link texts are meaningful: avoid “click here”.
  • Link texts can be visually distinguished from text that is not a link. It is recommended to underline all links inside a text block.

By following the advice given by these organisations, and adhering to the simple guidelines and tips they provide, you can create SEO-friendly content that is accessible to those with limited vision.

Further reading

European Blind Union – Making Information Accessible for All

W3C – Web Content Accessibility Guidelines 2.1