Basics of Web Accessibility

Basics of
Web Accessibility
Moin Shaikh

Accessible Vehicle
(Image source: sagetraveling.com)

Accessible Furniture
(Image source: patioproductions.com)

Accessible Roads
(Image source: acessibilidadenapratica.com.br)

Web Accessibility is about making web accessible for everyone.
Web Accessibility = Universal UX
(Image source: connectinternetsolutions.com)

According to a 2011 census, nearly 2.68cr people are disabled in India
(Data Source: Ministry of Statics & Programme Implementation, GoI)

• 19% have visual disabilities
• 19% have auditory disabilities
• 8% have multiple disabilities
(Data Source: Ministry of Statics & Programme Implementation, GoI)

(Data Source: Research conducted by Google & BCG)
India – A Digital Country

Complexity of use i.e. not so friendly UX is 2nd biggest barrier

Types of Disabilities
That hampers UX for users accessing the web

(Image source: webaim.org)
Visual Disabilities: Color-blindness

(Image source: mymansarovar.com)
Visual Disabilities: Low Vision

(Image source: moneyinc.com)
Visual Disabilities: Blindness

(Image source: oakdale.mn.us)
Deafness and Hard of hearing

(Image source: teachspeced.ca)
Fine-motor Control Disability

• In most of the developed countries like the USA, UK, Australia and
many European nations, accessibility is a law that requires
government and non-government websites need to be accessible
for people with disabilities.
• WCAG 2 Level A became the standard for Indian government
websites in February 2009.
• More on web accessibility in India at: web.guidelines.gov.in

• Web Content Accessibility Guidelines (WCAG)
• Web Accessibility Initiative (WAI)
• Authoring Tool Accessibility Guidelines – ATAG
• User Agent Accessibility Guidelines (UAAG)

Components of
Web Accessibility
Web Accessibility depends on several components including content, browser,
rich media players, assistive technology, authoring tools, developers, designers
and the users.

Designing for
Accessibility & Mobility
Users of mobile devices and people with disabilities experience similar barriers
when interacting with web content.
For example, mobile phone users will have a hard time if a website's navigation
requires the use of a mouse because they typically only have an alphanumeric keypad.
Similarly, desktop computer users with a motor disability will have a hard time using
a website if they can't use a mouse.

(Source: smashingmagazine.com)

Designing for Accessibility & Mobility
Usability points to take care of:
• Small Screen Size
• Zoom/Magnification
• Colour Contrast
• Touch Target Size and Spacing
• Touchscreen Gestures
• Device Manipulation Gestures
• Consistent Layout
• Position important page elements before the page scroll
• Grouping operable elements that perform the same action
• Provide clear CTA
• Set the virtual keyboard to the type of data entry required

Design Basics
• Be consistent throughout
• Enhance clarity with good design
• Do not convey information with colour alone
• Create contrast between foreground and background
• Avoid using flashing, flicker and unnecessary animation
• Use multimedia with care
• Create flexible width design if possible and appropriate

Design Tip
Use supporting image/icon with hyperlink

Design Tip
Provide title text for hyper links.

Design Tip
Avoid serif’s and fancy fonts, especially for smaller text

Design Tip
Don’t rely on colour only to convey your message

Design Tip
Use contrast colour mindfully and meaningfully

Design Tip
Avoid using ‘ticker tape’ whenever possible

Design Tip
Provide Closed Caption (CC) for video.
At minimum, include transcript below the video on the web page.

Design Tip
Avoid using animation or flash whenever possible

Design Tip
Avoid using Frames.

Design Tip
Avoid using popups.

Design Tip
Making maps accessible

Design Tip
Give customization control to the users

Design Tip
Avoid server side refresh or redirects whenever possible

Design Tip
Avoid right aligning text/content

Design Tip
All bold does not get your point across.
Avoid using strange fonts.

Design Tip
AVOID USING ALL CAPS IN TEXT/SENTENCE

Design Tip
Provide a way to skip ASCII art

Design Tip
Use proper structure to format & structure your content

HTML Tip
Use the correct tags, proper markups.

HTML Tip
Avoid using font-size in px, use em instead

HTML Tip
ALT tags on image should be descriptive.
ALT tag is not for spamming your SEO keywords!

HTML Tip
Avoid using images to display text

Quick Tips
• Images: Use ALT tags on images
• Videos: Use CC in vidoes. Provide transcript of audio and video
• Hyperlinks: Use text that makes sense when read out of context. For example,
avoid "click here.“
• Page organization: Use headings, lists, and consistent structure. Use CSS for
layout and style where possible.
• Do not rely on color alone to convey your meaning or message
• Check your work: Use W3C and WCAG validators to check if your website
passes through validations required for and set under accessibility standards.

Color Contrast Analyzer
Checks for WCAG 2.0 compliance for color contrast success.
Provides a simulation of certain visual conditions, including dichromatic
color-blindness and cataracts, to demonstrate how your web content
appears to people with less than 20/20 vision

Juicy Studio Accessibility Firefox add-on

Chrome Color Contrast Analyzer plug-in

Text on background image a11y check

Accessible color palette builder

Colorable – Color Palette Combination Contrast Tester

Thank You!
Any Questions?
You can find me on Twitter at:
@MoinGShaikh

Basics of Web Accessibility

More Related Content

What's hot

Similar to Basics of Web Accessibility

Recently uploaded

Basics of Web Accessibility

Editor's Notes