5 Common Accessibility Mistakes Designers Make & How to Avoid Them

• Accessibility
• Perfection in Creativity

Web accessibility has become a fast-growing concern over the past few years for designers, developers, and businesses alike, with no signs of slowing down. As the products people interact with every day increasingly move towards screens and digital spaces, it’s important that all users are able to operate them without frustration.

This includes individuals who use assistive devices when navigating computers and also those who may be disabled in other capacities as well. By mindfully designing for these individuals, you will be able to deliver a far better product to all of your prospective and existing users .

That’s why it’s our job as designers to ensure that the digital experiences we help create are both accessible and inclusive to the end user, no matter who they may be. Unfortunately, there are some common mistakes that designers tend to fall victim to that harm the accessibility of their sites. Luckily these can be fixed with some tips, tricks, and effort .

Whether it’s your first time designing with accessibility in mind or you’ve helped construct a AAA compliant site before, reviewing these common accessibility mistakes that designers make will help you mindfully avoid them in the future.

1. Illegible Typography

Ever find yourself squinting at the screen or zooming in to read small text? You’re not alone. A common accessibility issue across the web is illegible typography due to either the size or the color contrast of the typography.

Chances are, if you’re struggling to read something that you’ve designed, someone else may also struggle to read it or may just miss it altogether. It’s vital that accessible designs clearly communicate content and information to all users, especially those that may be visually impaired.

A quick way to check if the typography of your designs are legible is to download this sketch plugin to test the color contrast and size ratio of your fonts and type styles. Additionally, it’s good practice to avoid putting text on visually complex images/videos as well as gradients.

2. The Hidden Focus States

Some users may have to navigate your designs without a mouse or trackpad. This is typically done by tabbing between interactive elements on your site to maneuver through different pages and content. Because of this, these users may not find the cursor helpful in keeping track of where they are on the site, relying on focus states instead.

Most focus states have a blue halo as defined by browser default styling and some designers may ask for them to be removed as they tend to be unsightly. It’s important to keep focus states in the final build of your designs so that users who are tabbing to navigate the site know where they are at all times.

That being said, focus states can be designed and styling can be altered to better fit the aesthetic of your designs. Aesop is an example of a site that does a great job styling the focus states of their interactive elements to keep in line with the brand’s premium aesthetic.

3. Confusing Form Design

Forms are a vital part of online experiences as they are often used to capture relevant information from your users. Whether this is a newsletter sign up, a contact form, or a payment registration, these elements should be clear and easy to complete.

When designing forms, no matter how complex, it’s important to give users clear instructions on how to complete them correctly. This includes adding labels that don’t disappear on input fields and error states that give helpful information when a user fills a form out incorrectly.

Additionally, avoid using icons as the only means of communicating an action (such as a credit card icon to represent putting a card number in). There should always be text in addition to icons in these situations to help guide users on how to properly complete these forms with as little frustration as possible.

4. Inaccessible interactions

Interaction design should help support the communication of important content and information to users and never impede their experience. It’s important to ensure that content is never hidden behind complex interactions or animations, as some users may find it difficult to complete certain tasks with a mouse or via rigorous clicking.

Avoiding the use of any flashing animations altogether is also recommended, as this may trigger seizures in some users. In general, simple animations that help steer users towards certain actions or flows can help make the online experiences you design feel much more intuitive.

5. Thinking that it Ends with Design

Accessibility is not only a design concern as it takes a group effort between developers, content creators, designers, and copywriters holding each other accountable to create fully accessible experiences.

Accessibility is not only a design concern as it takes a group effort between developers, content creators, designers, and copywriters holding each other accountable to create fully accessible experiences.

Technology, visual aesthetics, and content all play equally important roles in accessibility and as a designer, it’s important to be empathetic to users of all different backgrounds, while also encouraging your team members to do the same. As more and more users adopt and readily use digital products, it’s becoming imperative that we account for different cases and people who interact with our designs, whoever they may be.

---

• For more articles subscribe to Phase Magazine Newsletter. 
• Follow Phase on Facebook, Twitter, Instagram, and LinkedIn. 
• Join Phase Community on Slack and our Facebook Group.
  

If you want to contribute to next the issue of Phase Magazine, just drop us a line: