Build all-access apps: A two-part series

Part 2: How to build accessible experiences

Build a business case 

15% of the world’s population is living with some form a disability. Featuring accessibility enables enterprises to interact with over 1 billion people and builds better experiences for all users. In case you missed Part 1, accessible features (i.e., captioning a video watched by the commuter) are all-inclusive. It’s that simple. 

Deliver all-inclusive experiences 

The de facto standard for web accessibility is WCAG, or Web Content Accessibility Guidelines. Keeping the explanation brief, WCAG is a series of guidelines created by The Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C)—aka the international organization that sets standards for the Internet—outlining how to make web content more accessible. WCAG guidelines are intended for those living with a wide range of disabilities including visual, auditory, physical, speech, cognitive, language, learning, and neurological.  

How these guidelines are implemented and built falls on the shoulders of the cross-functional team. For example, product designers ensure the font featured in the product is accessible-friendly (e.g., Arial, Calibri, Century Gothic, Helvetica, Tahoma and Verdana) and spacing between lettering is adequate for users to read effectively. 

Four WCAG principles of accessibility  

WCAG version is 2.1 notes 4 P-O-U-R principles essential for building accessible applications. 

  • Perceivable: The user must be able to perceive the information presented. 
  • Operable: The user must be able to operate the interface. 
  • Understandable: The user must be able to understand the information as well as the operation of the user interface. 
  • Robust: The user must be able to access the content as technologies evolve.   

Understanding the factors influencing disabled users’ experiences helps define requirements as outlined in the chart below. Additionally, cognitive, visual, auditory, motor, and speech impact how users interact with the web.   

Principle UX Recommendations Examples

Preceivable

Information and user interface components must be presentable to users in ways they can perceive

Make interaction easier for users to see and hear

Text alternatives for non-text content

Caption options for multimedia

Assistive content presentation technology features

Long alternative text on separate linked page for complex chart or complex images instead of <longdesc> attribute

Closed captioning and/or sign language version, and full-text transcriptions options for all multimedia

Decorative elements such as image spacers have empty alt text tags

Operable

User interface components and navigation must be operable

All functionality should be keyboard accessible and/or support inputs other than keyboard accou nting for physical limitations (i.e., seizures)

Keyboard accessible

Ample process time to read and/or use

Navigable

All functions and content available via keyboard only no mouse/trackpad use

Inform and allow users to shut off time- limited activities (session timeouts)

Any authenticated session allows for auto-refresh without data loss

Actionable items touch/click target should be minimally 44 css pixels to ensure ease of selection

Understandable

Information and the operation of user interface must be understandable

Content should be easily understood with failsafe measures to correct mistakes

Readable text

Predictable content patterns

Input assistance

All content should be readable in 200-400% magnification

Reading level target to second-grade level

Provide instructions where and what data input is required on forms using labels and field set html tagging

Submissions made in error are reversable and include confirmation

Robust

Content must be robust that it can be interpreted reliably by a wide variety of user agents, including assistive technologies

Maximize compatibility with current and future tools

Valid HTML documents for all web pages with no errors or long load times

Structure of HTML + JavaScript formatted top to bottom for screen reader parsing like reading a book

Assistive technology with real-time status messages

What now?

Include accessibility into the current application(s) or future build(s) and map out a plan. If the current enterprise application does include accessibility, audit the system to ensure it's compliant. Either way, you’ve got your work cut out for you. We can help. Contact us