Design with Accessibility in Mind

Democratizing the Internet

In a world with more internet users than anyone ever imagined, there’s never been a better time to design with human accessibility in mind. Without sounding too much like a 90s personal computer ad, it really is amazing how much information and opportunity is within reach because of the internet.

With this democratization of the internet comes more responsibility. The more people using the web, the more accessible it needs to be to different types of individuals. This can be as simple as being able to translate into a person’s native language or as complicated as building for screen readers and offering alternative means of navigation.

Aiding those with physical impairments and limitations are imperatives for a modern, accessible approach to design. These impairments typically fall into four main areas of focus: visual, motor, cognitive, and auditory. And visual design can aid in improving the experience of all four. As designers, we have a crucial opportunity and responsibility to make the internet a better place for all.

Areas of Impact

We play a pivotal role in helping our clients through the painstaking process of designing for accessibility, with the primary objective being compliance with the American Disabilities Act (ADA). We partner with ADA consulting firms to help us test and make recommendations, but ultimately it’s the designer’s job to navigate the upfront design decisions that adhere to the latest ADA standards.

Now, we will walk through some of our key areas of focus, specifically from a visual design perspective, without going too in-depth on development-specific implementations.

Color Contrast

First, let’s stop off in the land of common sense for a second. Dark text reads best on light backgrounds and light text reads best on dark. This is often overlooked. You will run into accessibility issues when color contrast isn’t sufficient or text overlays busier images.

At Bukwild, two tools we have integrated into our workflow are Cluse ↗, a plugin for Sketch, and the website WebAIM ↗. Both are great for checking color contrast for readability. These additional resources take into account the size of the type and how different foreground and background color combinations may appear to people with visual impairments. For example, for users with color-blindness, Cluse allows you to make on-the-fly color adjustments to achieve an accessible and compliant level of contrast.

Font Size

Font size is an important factor for accessibility. We try to keep body text at a minimum of 16px and user interface (UI) text at a minimum of 14px if capitalized. We’ve found that the contrast in character height increases readability, but this is a consideration for bonus points. Use sentence or title-case instead of all-caps, and try to keep text area widths under 12-15 words per line, to help eyes from growing tired. Thank you Mr Josef Müller-Brockmann.

Button and UI Size

The most important thing is ensuring that visitors can easily interact with your website. This is specifically crucial for people who have motor skill and/or visual impairments. If a button or UI element is too small to be seen and clicked or tapped, you’re frustrating and failing your user.

The good news is developers can increase the size of a button/UI elements “hit area” for ease of use. But, negative space is as important as positive space, especially on mobile devices where a finger isn’t always as precise as a mouse cursor.

UXMovement.com published a research article ↗ to establish standards in button size and spacing for accessibility purposes that we have found especially helpful. Their research found that on mobile devices, buttons less than 42px had the lowest hit accuracy, and buttons over 72px also had a low hit accuracy. This led them to determine that around 60px is the optimum size. In addition, for accurate button hits, larger buttons need less space between them whereas smaller buttons need more.

Forms

Forms are important for business, which means it’s important to design them correctly and clearly in order for someone to interact with them successfully. First, make sure form fields have borders, because fields without borders are harder to see. There is a thin line between love and hate. That line, my friend, is your form field border. This is something we see time and time again, especially with search fields. People need to know where to click and where to type.

Second, make sure people know what is expected of them. Form labels shouldn’t vanish once someone starts entering information. They should either stay in the same spot—outside of the form—or, move slightly to allow for text entry. There are options out there that are usable and elegant like Google’s Material Design system ↗.

Thirdly, remember that your user will make mistakes when they enter information in a form. The kindest and wisest thing you can do is never leave someone wondering what they did wrong. Error states and help text are a great way to provide prompts and ensure optimal usability.

Now, go forth

We constantly strive to make the internet a more inclusive place for everyone. Making informed design decisions can be the difference between an accessible or inaccessible experience, which is something that shouldn’t be taken lightly. Each of these small choices are big opportunities. They needn’t inhibit design or creativity, in fact, some of the greatest innovations of our lifetime have been rooted in a need for accessibility (just look at Siri and other voice activated technologies). With all the tools we have available, putting this knowledge into practice has never been easier. So now, go forth and leave the internet a better, more accessible place than you found it.