Website design considerations for accessibility

Ross

Ross
Written on 30th July 2020

The different types of disabilities and how we can help:

Visual disabilities

  • Consider Structure and semantic mark-up separate from presentation
  • Design & colour may be perceived differently
  • Don’t rely on colour to convey meaning - it may be missed
  • Avoid too small text
  • Lack of keyboard support
  • Alt tags

Auditory impairments

  • Captions for video
  • Adjustments for captions
  • Transcripts for audio

Cognitive, learning and neurological disabilities

  • Structure is important
  • Consistent labelling
  • Predictable functionality
  • Different methods of navigation e.g. search
  • May use text to speech
  • May adjust text & spacing
  • Simple layouts
  • Break up text with images to break content up
  • Options to disable motion & animation

Physical and motor disabilities

  • Keyboard support
  • Large clickable areas
  • More time to complete tasks
  • Error correction on forms
  • Options to skip things

Speech disabilities

  • Avoid voice only interaction
  • Avoid phone as the only means of communication

Design considerations for accessibilty

Here are some design suggestions for a better experience:

  • Using a skip to main content link. Before the main navigation add a skip to main content link. This link can be hidden using CSS if it’s not focused (Display block when tabbed to. eg .hiddenSkipClass:not(:focus){ display: block;} )
  • Font sizes set at a minium of 16px-20px for body copy. Use ems, rems so that they can scale
  • Use relative units to scale better such as ems, rems, %
  • Headers & use of bold font weight should be distinguishable
  • Avoid all caps
  • Text line lengths should not be too short or long: Ideal length is 45-75 characters , 66 characters is ideal
  • Line height, set at around 125% of the text size
  • Mobile & desktop top touch targets, recommended touch size 44px-48px square. Make them big & give them space
  • Navigation menus give them vertical space
  • Standalone icons should be simple and recognizable. Add text next to them is preferable
  • Motion; Keep it simple. Add option to disable motion for example a fixed toggle control
  • Links with 'read more'. Use more descriptive links, 'read more about XYZ'. Or use a ‘visually-hidden’ CSS class to hide descriptive text
  • Skipping headers & page structure. Headings on well-designed web pages will form an outline of the page’s content.
  • Review https://webaim.org/techniques/semanticstructure/

Forms

  • Use Asterix for required fields
  • Let users know validation requirements before submitting
  • All form fields need a proper label, not a placeholder
  • Don’t rely on colour alone for errors, use an error message or icon
  • Use native HTML form controls
  • Use buttons instead of span tags

A good accessbility process for developers

  • Identify goals before starting projects
  • Put in charge one person
  • Enforce the accessibility features
  • Evaluate 3rd party frameworks for accessibility before use
  • Have empathy with users with disabilities
  • All developers & designs need to know what it takes to make things accessible
  • Make it part of the process potentially while browser testing
  • Check the WCAG Guidelines

If you’d like to know more then please get in touch to see how we might be able to help you improve your website for all of your users needs. 

Get in touch

Join the conversation

 
  
 

Find out more about how your personal data is used in our privacy policy.


Let's contribute!

How about you help us a little and share this page with your friends? It’s just a click, we promise!

Want to get in touch?

Then why don't you? Just click the button below and secure your place in our office chair (before you ask... yes, spinning is allowed)!

Get in touch
Get in touch