In his Accessibility & Inclusive Design: a Designer’s Field Guide online presentation at last week’s Aquent Summer Camp, Rob Huddleston, Design Director at Capital One, gave an overview of accessibility design basics.
Huddleston discussed the importance of inclusive design as he provided practical tips on how designers and product owners can deliver accessible services and products.
He recommended designers think about accessibility and inclusive design as a best practice.
Here are my takeaways from his presentation.
Accessibility & Inclusive Design: A Designer’s Field Guide
- What is accessibility? The ability of any experience to be easily navigated and understood by a wide range of diverse users so as to enable completion of essential tasks empowering users to achieve their desired goals.
- Every design decision has the opportunity to exclude customers. Designers need to think broadly about meeting needs.
- Disability is contextual: permanent, temporary, and situational. For example, someone may only have one arm (permanent), have their arm in a cast (temporary), or a new parent carrying a child in one arm (situational).
- Solve for the needs of a few and extend to serve the larger audience.
- Vision impairment is often the most discussed accessibility topic. It not only affects people who are blind or color blind, but people who are aging, or whose eye sight is less than 20/20.
- Cognitive and learning disabilities impact how people process information. Everyone processes information differently. It can affect someone’s perception, memory, language, problem solving.
- Physical and motor disabilities include weakness and limited muscle control, which can be situational, temporary, or permanent.
- Communication impairments include not only people who are deaf or hard of hearing, it includes speech impediments and accents. Think of Alexa: how might your southern drawl impact Alexa’s ability to understand your request?
- Content first – consider hierarchy and structure of your content. Create scannable headings so users can quickly review your content and focus on what they perceive is relevant. Craft short and relevant content.
- Reading order should be the same as the visual order. Top to bottom, left to right is common in our culture, but may be different for other cultures. Understand how your grid works in responsive design.
- Typography: use CSS to style text. Avoid using points or pixels in your styling. Set type size with ems to allow for browser and user preferences.
- Avoid embedding type in images. Always separate your foreground copy and background image (example: hero images on home pages).
- Use weight and size with semantic headings to add visual hierarchy.
- Color contrast is crucial. Make sure you have good color contrast between your foreground and background (important for hero images/text on page).
- Web Content Accessibility Guidelines (WCAG) AA-level is the default standard many organizations aim for.
- Never assume the color palette for an organization is compliant or accessible. Just because individual colors are compliant doesn’t mean pairing them together or placing them on different colored backgrounds will mean they’re compliant. Size, weight, and scale can impact whether color contrast is compliant.
- Always differentiate text links in body copy with decoration other than color. For example, users expect body text links to be underlined. For keyboard users, make sure users can visually identify a focused link.
- Make sure your link text make sense out of context. Avoid “click here” or “read more.”
- Buttons: use styled link text rather than images for buttons.
- Pair images and icons with contextual content to convey meaning. Avoid using images alone to convey content.
- Alternative text is required for every image, even if it’s an empty alternative text for decorative images. Note: alternative text should not duplicate what’s in adjacent text.
- Form considerations: maintain logical order, craft visible and descriptive labels, provide instruction as needed. Avoid placeholder text.
- To make sure you use an inclusive approach for your research or usability testing, recruit people from all ages and demographics. Always include people with disabilities in your recruitment.
- Two excellent resources for inclusive and accessible design: Microsoft Inclusive Design and WebAIM Design Resources (a super-helpful infographic I have posted in my workspace)
