Accessibility principles

Why Accessibility Matters

Usability Improvement

• Implementing accessibility best practices corrects usability problems and delivers a better user experience for all users, not just people with disabilities.
• Good usability means that users achieve their goals effectively, efficiently, and satisfactorily, which can impact our Consumer Satisfaction (CSAT) positively.

Optimizing for SEO

In many ways, SEO robots are blind and deaf. Similarly to assistive technologies, they rely on content structure, semantics, and functionality to either present content to users or determine the relevance of content. When optimizing for accessibility, we are covering our bases for those technical optimizations where accessibility and SEO overlap.

Social Responsibility

It is the right thing to do. An accessible product leaves no one behind and can broaden our audience to online users who have changing, temporary, or permanent disabilities. This includes:

• Vision trouble - color blindness or reliance on a screen magnifier or reader.
• Hearing trouble - reliance on transcripts and/or captions for audio and video media.
• Cognitive impairment - complex scenarios are not understood.
• Physical functioning difficulties - impacting the use of a mouse or a keyboard.

It’s the Law

• Civil rights legislation (the Americans with Disabilities Act, the Reauthorized Rehabilitation Act, and the Telecommunications Act) support equal access to online information. Creating accessible websites and digital products is required by law, referred to under section 508.
• Online commerce has brought attention to website accessibility and an increasing number of lawsuits are being filed against companies, affecting nearly every industry.

Building Inclusive Experiences

Adhering to the Web Content Accessibility Guidelines (WCAG) 2.0 ensures our re-usable patterns meet the AA compliance level and align with the four principles of accessibility: perceivable, operable, understandable, and robust. This translates to:

Appropriate Use of Color

• Sufficient contrast between text and background colors.
• Color is not used as the only visual means of conveying information or distinguish a visual element.

Standard Markup

• Appropriate semantic HTML structure.
• Logical content structure.
• Logical grouping of related user interface controls.

Keyboard Navigation

• Full control of components with a keyboard.
• Keyboard focus always visible.
• Logical tab order of elements on the page.

Design Content that does not Cause Seizures

• Animated transitions and moving backgrounds (parallax) can be turned off.
• No page content flashes/flickers more than 3 times per second.

Descriptive Copy

• Text alternatives for all non-text content (images, videos, icons, actions).
• Meaningful link texts.
• Transcripts and/or captions for audio and video content.
• Ensure form controls have descriptive labels and instructions.
• Provide sufficient labels and instructions for when content requires user input.

Multi Device Responsive Design

• Touch targets are large enough (48dp) for reliable interaction of interface controls through click and touch.
• Text size can be increased up to 200% without any loss of content or functionality and without overlapping with other content.

Testing and Validating

• Markup validation using an HTML validator.
• Automated accessibility checker to inspect the accessibility level of content.
• Keyboard only testing to ensure that all content on a page is operable with a keyboard, receives visible focus and responds to common key presses (Enter, space, arrow keys).
• Testing accessibility for native apps and the web on mobile devices.
• Testing supported browsers.
• Assistive technology testing, preferably with users skilled with those technologies.

In addition, each pattern has also a section in the documentation describing any accessibility considerations.

The build-it-once, use-it-everywhere component model means the accessibility knowledge is now available to us all. This way, our users get a consistent, accessible experience, each and every time.

Getting You Started

Accessible design is everyone’s responsibility, no matter your role. Coming soon, a companion accessibility checklist to help you implement best practices, check and record web accessibility progress, and set targets out for the future. Stay tuned!

Additional Resources

• Check out our accessibility toolbox to help you build inclusive experiences.
• The A11Y Project provides tips to help make accessibility easier to implement on the web.

References

1. “Keyboard accessibility.” WebAIM. 28 Jan. 2016. Web
2. “Web Accessibility Initiative.” W3C.
3. “Web Content Accessibility Guidelines (WCAG) overview.” W3C.
4. Fercia, Andrea. “Accessibility testing for beginners.” Yoast. 29 Mar. 2018. Web.
5. Groves, Karl. “List of Web Accessibility-Related Litigation and Settlements.” Karlgroves. 15 Nov. 2011. Web.
6. Sethfors, Hampus. “Accessibility according to actual people with disabilities.” Axesslab. 4 June 2017. Web.
7. Swan, Henny. “Mobile accessibility testing guide for Android and iOS.” The Paciello Group. 2 Nov. 2017. Web