Why accessibility is an important consideration.

Many people face barriers in being able to access or process information online. These barriers are varied and some are not easily defined.
However there are many concrete and sometimes very simple things you can do in your website development to hugely improve the accessibility of your website.
This blog will briefly talk about some common disabilities and suggest some simple tricks and tips to improve the usability and readability of your website.

It is very important to realise that one size does not fit all and the below descriptions will be sweeping generalisations of a variety of accessibility barriers.
You can check your website, validate it, by using tools, checklists and guidelines at http://www.w3.org/TR/WCAG (www.w3.org)

Some accessibility barriers include sight loss, hearing loss, limited mobility and cognitive barriers.

Sight

The most common sight issues to consider are color blindness and partial to full sight loss.

Color blindness occurs most often in males and affects about 4.5% of the population.¹

Protanopia and Deuteranomaly users find it difficult to tell the difference between red and green
Tritanomaly users find it difficult to tell the difference between yellow and blue
Click on the link to Color Blind Awareness to learn more.

Common eye conditions that impair vision include

• cataracts -cloudy vision,
• glaucoma -optic nerve damage leading to tunnel vision,
• macular degeneration-loss of fine detail in the central part of vision,
• retinitis pigmentosa-vision loss due to the breakdown of the eyes rods and cones,
• diabetic retinopathy-diabetes damages the blood vessels in the retina

There are other conditions that cause blindness or partial sight loss but they are less common.
Find out more at blindfoundation.org.nz

Some tools and techniques that can help

• Images and animations: use the alt attribute to describe the function of each visual. (www.w3.org)
• Image maps: use the client-side map and text for hotspots.(www.w3.org)
• Hypertext links:
  • Links should be descriptive to explain what is being linked to (blind f)
  • Use text that makes sense when read out of context. For example, avoid ‘click here’.(www.w3.org)
• Page organisation: use headings, lists, and consistent structure. Use CSS for layout and style where possible.(www.w3.org)
• Use full stops with abbreviations, like I.D.E (for readability and the visually impaired)
  
  • Graphs and charts: summarise or use the longdesc attribute.(www.w3.org)
• Color:
  • Don't use color to soley distinguish things. Use changeable shapes as well e.g. don't use a red circle for no and a green circle for yes, use a green check and a red cross or the words yes and no.
  • Avoid red/green or blue/yellow combinations of the same tone as these are hard for different color-blind users to differentiate.
  • Tone: Try a black and white filter over your colour choices - can you still distinguish between the colors?
• Scripts, applets and plug-ins: provide alternative content in case active features are inaccessible or unsupported.(www.w3.org)
• Frames: use the noframes element and meaningful titles.(www.w3.org)
• Tables:
  • Make line-by-line reading sensible. Summarize.(www.w3.org)
  • Tables should be used for tabular data. (blind f)
  • Do not use tables for layout.(blind f)

Screen readers

Screen readers are a major tool to access the internet, by those with partial to full sight loss If you want to test out how screen readers work or to learn more specifics go to WebAIM. WebAIM mentions that some browsers seem to work better with certain screen readers.

Here are WebAIMs recommended pairings:

• Edge with Narrator
• Chrome or Internet Explorer with JAWS
• Safari with VoiceOver
• Firefox with NVDA

They have a lot of great tips on how screen readers work, follow the link to the webaim screenreader page to read more.

Hearing

Consider when you give out any information with audio to have a transcript written down or subtitles added,

• Multi-media: provide captioning and transcripts of audio, and descriptions of video.(www.w3.org)
• Add context to subtitles, including adding notes for background sound effects e.g. *explosions* or *sad music*.

Mobility impairments

This category is vast. The biggest things to consider are users with a loss of fine motor skills, who can struggle to target small icons or click precisely into a line of text, users with a slower response time, who need time to respond to error messages or to move around the webpage, and those who have limited mobility and rely soley on the mouse and a virtual keyboard to interact with a webpage.

• Add a wide click range around a button (WebCredible has a good how to)
  
  • Consider how much you make the user jump around the screen and how long the text is and how simple the text is. (Difficult for users with motor or cognitive based barriers)
• Tooltips can be troublesome in a lot of situations
  • Make the target as large as possible
  • Make the tooltip text part of the label for the field or use aria attributes to make the proper logical connections
  • Ensure that they can be triggered via onfocus and touch events.
  • "I always argue against tooltips for use in general forms. If the tooltip information is useful, put it directly on the screen. That's the most accessible way to handle it. If the information isn't useful enough to display directly on screen, then it's probably not useful information to begin with so you can just do away with it." (Help tooltips and screen-readers)
• Avoid precision requirements, make sure that icons and clickable areas are large and can be tabbed to rather than clicked
• Consider how non-mouse access (keyboard, touch devices, etc) work for your website. Do you require a lot of dexterity to navigate your site?

Cognitive barriers

There are a few things you can do to improve access to content for people who can struggle to absorb information. This might include users with dyslexia, brain injury/ cognitive impairment, low literacy levels and language barriers.

• The best thing you can do, for all users really, is write directly. Write using the more common English words.
• Contents page should clearly identify all the sections. Each section should begin on a new page.(LLN)
• Illustrations should be linked to the topic being discussed and labelled in someway to show the connection to the text.(LLN)
• Dense text should be supported by headings, use of different fonts for specific purposes, space on the page, bullet points etv(LLN)
• Use graphic representations over dense text. time lines, boxes, graphical organisers.(LLN)
• Readibility:
  • Make it easy to navigate- support colored pages and margins, headings main headings and subheadings and their own format and be consistent(LLN)
  • If you're putting a lot of text onto your website, break it into smaller paragraphs. Use simple, straightforward language in the active voice.
  • What font/size/colors do you use to accent your learning. Images can be powerful to connect information.
• Avoid run on text. Don't use one long sentences with a lot of commas, ands and buts. Break up text. (LLN)
• Vocab and sentence structure: cut down the word number, use imperative and direct over hedging language. For example compare: "You will now begin to write" versus simply "Write"(LLN)
• Only use different fonts for a reason (LLN)
• Be clear on the purpose for each activity/link(LLN)

Added features:

• Consider added features like alt tags, auto complete functions, zoom, easier font to read (Open dyslexic)
• Consider how much you make the user jump around the screen and how long the text is and how simple the text is. (Transference, physically clicking in the right spot to write and attention span are issues)
• How a screen reader will read your layout and text?
• How does the layout of your page change while zooming in with the browser?
• Build/link to an accessibility guide (A good example is BBCs guide)(a bit out of date)

Further reading and references

The Blind Foundation recommends these online tools:

• Web Accessibility Initiative – This international community develops standards to help create an accessible online world. It publishes the Web Content Accessibility Guidelines (WCAG) 2.0 Standards.
• NZ Government Web Standards will help you understand what’s expected of New Zealand’s government departments.
• The WAVE (Web Accessibility Evaluation Tool gives simple feedback on your website.
• The Roundtable on Information Access for People with Print Disabilities has helpful e-text and clear print guidelines.
• Checkmycolours lets you check your website’s colour combinations.

• Color blindness: Color Blind Awareness, no clear author or date, accessed Aug 17 2017
• Blind foundation: https://blindfoundation.org.nz/how-we-can-help/information-for-professionals/accessible-documents-and-websites/, no clear author or date, accessed Aug 29 2017
• Screen readers: Designing for Screen Reader Compatibility, WebAIM - Web Accessibility In Mind, last updated: Apr 21 2017, accessed Aug 17 2017
• ESOL and language frequency: http://www.lextutor.ca/vp/, VP adapted for Web by Tom Cobb, UQAM. Range from Paul Nation or ANT-Profiler from Lawrence Antony, last updated: Nov 30 2015, accessed Aug 17 2017
• Forums:
  • http://ux.stackexchange.com/questions/71950/help-tooltips-and-screen-readers by sliced toad, asked Jan 14 2015, accessed Aug 17, 2017,
  • Follow up to above: https://ux.stackexchange.com/a/71955 by DA10 Jan 14 2015
• 9 Simple Tips for Making Your Website Disability-Friendly by Yohana Desta Apr 22 2014