Jagat Jeevan Sahoo
UI Developer @ThoughtWorks A tech enthusiast
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
Web Accessibility
By Jagat Jeevan Sahoo
Web Accessibility
Let the software we built is used by all
- 153
