Accessibility: 7 Things Every Designer Needs To Know

Good read alert! I recently bumped into this post by Jesse Housler, an Accessibility Specialist at +Salesforce, and I absolutely loved it. Here is a summary of the main points discussed but check out the original post for all the awesome deets.

Source

Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web.

These guidelines will cover the major things you need to know in order for your products to be “design-ready” to meet the minimum standards in Section 508 and the Web Content Accessibility Guidelines 2.0

Accessibility is not a barrier to innovation

Accessibility will not force you to make a product that is ugly, boring or cluttered. It will only introduce a set of constraints to incorporate as you design your design. These design constraints will give you new ideas to explore that will lead to better products for all your users. Design for everyone.

Don’t use color as the only visual means of conveying information

This helps users who are unable to, or have difficulty with, distinguishing one color from another. This includes people who are color blind (1 in 12 men, 1 in 200 women), have low vision (1 in 30 people), or are blind (1 in 188 people). Instead explore the use of icons, text, tool-tips, fonts etc.

Ensure sufficient contrast between text and its background

According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to 1. This guideline helps users with low vision, color blindness, or worsening vision see and read the text on your screen. E.g. when the text is 24px, 19px bold or larger, the lightest grey you can use on a white background is #959595.

There is so much info on this, read more on this post. 

Provide visual focus indication for keyboard focus

Focus indicators, which are largely absent on the web, are fundamental to the success of keyboard users. However, most websites do not create their own focus styles. Navigating through websites using the Tab key is challenging especially for where not all links on the page have visual focus indicators. Consider this effect on users who only use a keyboard to interact with the web.

Be careful with forms

Modern designs have foregone traditional identifying attributes and interactive affordances in favour of a more minimalist approach. Today’s forma lack two specific items that are vital for accessibility: clearly defined boundaries and visible labels. 

Avoid component identity crisis

This question is at the core of today’s biggest web accessibility problems. In order to understand this fully, consider the W3C's Authoring Practices for Design Patterns. This is the guide for how to build an accessible version of many of today’s common design patterns including menus, modals, autocompletes, trees, tab sets and many others.

Don’t make people hover to find things

This principle mainly serves people with motor-related disabilities. This includes keyboard users and those who use speech recognition tools to interact with web pages. Keyboard users and assistive technologies rely on actionable items being visible on the screen. If a link or button can’t be seen by the technologies, it can’t be verbally clicked. If a keyboard only user can’t see that a button exists on a page, they can’t navigate to an empty space where the button will ultimately appear.

There is so much more on this topic. Make sure to read here for details on each of the items. Also, if you get more material on accessibility, do pass it along. Sharing is after all, caring!

Thank you for reading.

#HappyDays