Web Accessibility

Make software for all

What do we mean by all ?

While building the softwares, we forget people with a variety of disability like :

  • For everyone including developers who like keyboard more than mouse
  • With disability :  Motor disability, etc
  • Vision Impairment : Color , Visual
  • Deaf / hearing impairment : Rely on captions.
  • Cognitive disability : Learning disability, grasping / focussing on a lot of information, distractibility, 
  • People using assistive technology : Screen readers
  • Changing ability : Ageing

What all do I have to do ?

Accessibility guides on 4 principles:

  • Perceivable: Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)
  • Operable: Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.
  • Understandable: Content is clear and limits confusion and ambiguity.
  • Robust: A wide range of technologies (including old and new user agents and assistive technologies) can access the content.

Accessible Designs

  • Give more contrast to background and foreground colours.
  • Avoid Busy layout. Make simple layout  and give more spacing to logically segregate areas.
  • Make sure your layout is colour blind accessible.
    • Red / Green Deficiency
    • Blue / Yellow Deficiency
  • Give more contrast between colours used.

Layout

Accessible Designs

  • Responsive Design is a must
  • Use semantic markup. If css is removed, the layout should give a logical flow of data. This would help screen readers and bots to read the page.
  • Typography
    • Proper scaling of fonts
    • Body text should be readable
    • Avoid justify text align.
    • Use ems or rems appropriately.

Layout

Accessible Design

Forms

Make sure your forms are also accessible. They are the important part to know your customers / users.

  • Labels should be clear
  • Help text should be upfront so that user should not guess the field validation.
  • Placeholder should not disappear if no label present.
  • Make sure the user is able to submit the form and recover from errors.

Accessible Design

Touch targets

  • Touch targets should be bigger enough
  • Enough space between the touch targets so that the user finds it easy to click the desired one.
  • Give visual indication and differentiation for various states.

Accessible Design

Focus and Active states

  • Give proper css class and styles
  • Do not remove :focus and :active styles. It gives a visual mark where the user is currently present.
  • Give proper contrast in style wrt the background
  • Allow disable animation
  • Make sense of the animation wrt the context.

Accessible Design

Design for crisis

  • Give info to the user what happened if possible.
  • Give options for the users to revive from the crisis like go to home, go back the form, etc.

Accessible Design

Assets

  • Images
    • Give alt text
    • Use JPEGs over PNG. Compression quality for jpgs are good.
    • Use image optimisation tools
    • Try using svgs.
    • For long description, use longdes="longtext.txt"
<img src="some-img.jpg" longdes="long-description.txt" />

Accessible Design

Assets

  • Video / Audio
    • Use captions and transcripts for people / bots who find it difficult to get the video / audio
    • Have controls to video / audio

Resources

Made with Slides.com