Accessibility and Inclusive Design

Sep 15

Notes from Aquent Summer Camp’s Accessibility & Inclusive Design: a Designer’s Field Guide by Rob Huddleston, Design Director at Capital One.

This was a webinar about accessibility and inclusive design as a best practice - giving an overview of definitions and basic principles.

Every design decision has the opportunity to exclude customers.

Accessibility is the ability of any experience to be easily navigated and understood by a wide, diverse audience to complete their tasks and achieve their goals. Inclusive design is usable by as many people as reasonably possible without special adaptation or design. This means the design solves for 80-90% of users while taking the approach to solve for the needs of the few and extend to the masses.

This definition reminded me of a different documentary I watched about designing pruning shears for gardening. The solution for the shears included thicker handles to make it easier for those with arthritis or weaker grip strength to use the shears more easily, with the thought being, if these work for people with arthritis, it works for the larger population as well.

An example of a special design is m. sites that were duplicate sites specifically for mobile.

Disability does not necessarily mean just personal health conditions. Disability means mismatched human interactions that are contextual. For example, it can be permanent like someone with one arm, temporary such as a broken arm, or situational like a new parent using one arm to hold a child.

Illustration of scale of disabilities from Microsoft’s Inclusive Design toolkit

An interesting question: how would speech impediments or heavy accents affect Amazon Alexa or Google Home?

Takeaways

There are a great number of articles online that detail best practices for accessibility and inclusive design. I’m just going to highlight ones I thought were interesting from the webinar.

Vision impairment

This is typically the first thing we think of when talking about accessibility. Vision impairment can include blindness, color blindness, aging, and eyesight that is less than 20/20. In terms of color contrast for red-green colorblindness, adding a bit of blue to the green helps users differentiate between the two. WCAG AA is the best default standard for color contrast.

Comparing contrasts of the body text. We all love our shades of grey but make it accessible. Using the Stark Figma Plugin Contrast Checker.

Images and icons

Pair icons with content. Image alt text should not be redundant and it should be useful. Example, “girl drinking coffee while working on her laptop” versus “decorative background image”. Semantic html says all images need alt text but is the alt text actually useful if the image is decorative?

Text

People scan headings and stop when something captures their interest. Reading order should equal visual order with short, relative content to support scanning.

Use copy with relevant context. Example, “Click here to begin survey” versus “Click here” and more descriptive copy for buttons aside from just “OK” or “Cancel”.