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.
