Manual and Automated way to Web Accessibility

Sparshi Dhiman | @Dsparshi

WHAT’S IN STORE?❖ Accessibility Testing - What❖ Accessibility Testing - Why❖ Overview of accessibility standards ❖ Understanding - Usability and Accessibility ❖ Accessibility Testing - Manual and Automated approaches❖ Demo of automated accessibility tool - a11y

STATISTICS❖ According to WHO 15% of world’s population is differently abled.❖ Among the five types of disabilities on which data has been collected,

➢ Disability in seeing - 48.5%➢ Disability in movement (27.9%) ➢ Disability in speech (7.5%) ➢ Disability In hearing (5.8%)➢ Mental Disability(10.3%)

ACCESSIBILITY - WHAT

Accessibility Testing ensures that the application being tested is usable by people with different abilities.

Disability only exists if we don’t provide ways to include people as people have impairments NOT disabilities.

In nutshell, accessibility is about enabling people.

EXAMPLES

BAD

GOOD

Accessibility is the key to make web more inclusive.

ACCESSIBILITY - WHY? Accessibility costs LESS than NOT doing accessibility

❖ Easily accessible app reach more customers.❖ Maintain Customer Loyalty and Brand Value❖ Accessible website yield a good SEO(Search Engine Optimization) ❖ Abide by Accessibility Legislations and Avoid Potential Law-suits *

*Lawyers are more expensive than developers

ACCESSIBILITY STANDARDS WCAG 2.0 & GSA SECTION 508

❖ Web Content Accessibility Guidelines by W3C

▸ WCAG 2.0: Dec 11, 2008

❖ General Services Administration Section 508 Standards

▸ United States Federal Act. Published in Dec 2000.

WCAG 2.0DESIGN PRINCIPLES OF WEB ACCESSIBILITY

❖ Perceivable ❖ Operable ❖ Understandable ❖ Robust

Reference: https://www.w3.org/TR/WCAG20/

WCAG 2.0 - SUCCESS CRITERIA LEVELS - A, AA & AAA

❖ Level A - basic web accessibility features ❖ Level AA - deals with the biggest and most common barriers for disabled

users ❖ Level AAA – the highest level of web accessibility

Reference: https://www.w3.org/WAI/WCAG20/quickref/

USABILITY & ACCESSIBILITY

Accessibility Testing is subset of usability testing, which ensures that the application cater to all sets of people and NOT just limited to disabled people.

❖ ‘Access’ibility - The Right to use ❖ ‘Use’ability - The ease of use

ACCESSIBILITY TESTING - HOW?

Manual & Automated

ACCESSIBILITY BASICS ❖ Alternative text❖ Heading and Semantics❖ Keyboard Interactivity ❖ Focus Management

More Principles

ACCESSIBILITY TESTING - MANUAL ❖ Tab through a page with keyboard

DEMO : webaim.org

ACCESSIBILITY TESTING - MANUAL❖ Test using screen reader

ACCESSIBILITY TESTING - MANUALUse a screen reader❖ Headings and Semantics

Firefox web developer plugin

Screen readers use Heading structures to get an overall understanding of the page. Check for “View Document Outline”

❖ Reference: http://webaim.org/techniques/semanticstructure/

ACCESSIBILITY TESTING - PARTLY AUTOMATED❖ Chrome Browser Plugin - Accessibility Developer Tools❖ Reference :

https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_html_02

ACCESSIBILITY TESTING - FULLY AUTOMATED❖ a11y - By Addy Osmani❖ A11y is a tool to run accessibility audits for web❖ NPM is required prior to installation

$ npm install --global a11y

REFERENCES

❖ https://www.w3.org/WAI/intro/wcag❖ https://github.com/addyosmani/a11y

THANKYOU