Feeling the Web

Accessibility, UX/UI, Tactile Design   |   2019

Designers are often praised for being problem solvers, but what happens when accessibility enters the equation? Accessible design has become a unicorn in the design community: so many people aspire to create it, but few work hard to capture it.
Why does it feel like extra work to design accessible digital environments? The answer requires us to define accessibility in terms of empathy. To do this, one must understand the five basic groups of disabilities, how to design for those communities, and the best practices to create an internet that is equally accessible to all.

These are the five groups of disabilities to keep in mind when designing for the senses:

  • Vision-related disabilities make it difficult to perceive visual information.
  • Mobility disabilities are defined by the difficulty or inability to use one’s hands, arms, legs, or other body parts to interact.
  • Auditory disabilities relate a partial to complete inability to pick up sound.
  • Neurological disabilities refer to restricted sensory perceptions or mental processes.
  • Lastly, cognitive disabilities include loss of memory, reduced attention span and limited problem-solving skills. 

A practical approach to designing for this wide range of different abilities can be found in the acronym P.O.U.R. by W3C (the World Wide Web Consortium), an international internet standards organization. This tool helps design digital environments that are equally accessible to all users. If each standard is followed, you can be sure that your end product will be accessible to each disability group.

Perceivable


Perceivable means on-screen information and user interface components must be easily presentable to users. While this might sound obvious, this is where many design processes fail.
At the crux of this issue is the optical phenomenon of color. In essence, color is light perceived at different wavelengths. Many people use screens and cannot perceive color. As a result, it is the designer’s call to create accessible, digital environments that are accessible and do not rely solely on color to create a visual hierarchy. One of the ways this is achieved is through tactile UI.



It is the designer’s call to create accessible, digital environments that do not rely solely on color to create a visual hierarchy.


Tactile interfaces have their origins in the very first Mac GUI’s (Graphical User Interfaces) from 1984. Designers and engineers implemented a screen-based rendition of the area that users know best: their desks. This became known as the desktop metaphor. The result is utilities, folders, directories, notepads, hard drives and other items that have become icons on our screens.

Tactile UI takes the same approach. You wouldn’t see a flat, dimensionless field of color for an elevator button. Real-world buttons have texture, depth, changing states, and feel attached to the button. If we can learn to marvel at elevator buttons, then we can learn to design tactile UI by implementing various user states, such as adding outlines or visuals other than color to communicate function. An approach like this will help create a better user experience for everyone.


Operable


The second standard of accessibility in P.O.U.R. is operable. This involves designing interfaces that don’t depend on one interaction that a user might not be able to perform. On desktop, this means making websites that are accessible by use of the keyboard only. On mobile devices, we can consider touch targets and the thumb zone.
Touch targets are the actionable areas extending beyond the visual bounds of a button. These areas are typically sized to accommodate the standard fingertip at 9mm2 (3/16 in2). To eliminate any pain points, consider the padding as you create buttons, and give that touch target a little more room than you’d think.

A similar concept to touch targets, thumb zones have the greatest impact on mobile users. You know you’ve left the thumb zone when you find yourself shifting your grip or straining to reach a button on the far side of the screen. In the diagram below, it’s easy to see where you can place a button for ease and where a button might easily become a pain to reach.




Understandable


Understandable, the third standard, means that the information provided has to make sense to the viewer. This is where it is important to consider the concept of cognitive load, a proven and measurable restriction on how much new information that the human brain can reasonably process at one time.
There are a great number of tools available to the designer that measure understandability, oftentimes the most useful of these can be the person next to you. Ask for feedback constantly. Share what you’re working on with your kids, your parents, your desk neighbor. These kinds of creative partnerships are what create an inclusive environment around design.


Robust


This brings us to the fourth and final standard: Robust. This is perhaps the most importent part of this discussion. Defined in terms of screen-based environments, robust design is making something available to assistive technologies. This can be achieved by adding alt-text for images in code, using audio and video tags in HTML5, and applying accurate labels in web forms. Some of the most common assistive technologies are hearing aids, screenreaders like VoiceOver, and voice recognition software.
VoiceOver is a screenreader technology that comes preloaded on your MacBook. Screenreaders translate on-screen information into speech and are a vital part of voice assistants like Siri and Alexa. People who are sighted can scan a screen for context, but audio is linear and requires some parsing out. You can use punctuation like periods, commas, semicolons and some others to do this, but it’s about building up accessible elements on the page for a better experience.


People who are sighted can scan a screen for context, but audio is linear and requires some parsing out.


There are strong practical reasons for making the web accessible, like equal access to productivity and a better information architecture. It is imperative we designers acknowledge those who are disabled and thoughtfully incorporate accessible design into our workflows.

With empathy as a guiding philosophy, accessibility in design becomes second nature. Let’s collaborate toward building digital environments with equal access to productivity for all.






Let’s get in touch.

You’ve made it this far. For collaboration or job inquiries let’s talk at hello@codyhopper.com.