Data Driven Design icon

Designing for Accessibility and Inclusion Part 3: Controls

Today, we round out the third part of our series about designing for accessibility. We'll be talking about controls: what are they and how to design them better. Our previous articles explored the importance of making informed color and contrast choices to maximize accessibility, as well as choosing and styling fonts for increased readability. Together, the information and guidance provided means that your website project will be usable by a wider audience and more accessible to underserved customers.


What are they and why does it matter?

Controls are any on-screen elements that people can interact with. They can be buttons, links, inputs, or many other HTML components. Some of the most common problems that people encounter are that website controls are too small or too close together.

While everyone has a harder time clicking on controls that are too small, poor sizing and spacing of controls disproportionately affect people with tremors and older people who have reduced dexterity. Form elements are one important area of concern, as more companies rely on intake, health history, and sign-up forms online. Radio buttons and checkboxes can be especially tricky for some users because of their smaller default size. These controls are commonly overlooked and can be viewed by inexperienced designers as less important, too.

Controls that are too close together are another common source of user frustration, especially when using a touch screen on a phone or tablet. If controls are too close together, it becomes imperative to be precise, which can be extremely difficult for some people. Accidentally activating something that navigates you away from your page or makes you lose content is a frustration that most of us have encountered at one point. User frustration is especially common for controls that are nested inside each other, which is a design pattern that often leads to touchscreen errors.

The Fix: Designing Controls That Work

In order to give people enough space to accurately trigger the control that they intend to, it’s now recommended that they’re at least 34 by 34 pixels, which is the minimum size requirement for Windows Phones. Google recommends going a bit bigger, with a minimum size of 48 by 48 pixels, and Web Content Accessibility Guidelines (WCAG) recommends at least 44 by 44 pixels. These sizes include any padding used on a control, which is an invisible boundary around something, like an icon, for example. This means that a visible icon control that’s 24 by 24 pixels would need 10 pixels of padding on all sides to make it 44 by 44 pixels wide. Control spacing is also crucial to reducing touch errors. Google recommends that controls be spaced at least 32 pixels apart, while Microsoft recommends only 8.

Consider Including Labels

Another thing to consider is labeling controls to ensure that their function is clear. This is especially helpful for icons and form inputs that are vague and easy to misinterpret. Labels should literally spell out the actions the user will take by touching the control or the information the user should provide in a form field. Clear labels eliminate the guesswork and confusion that comes from trying to interpret glyphs.

The Bottom Line: Design Controls for Accessibility

By taking all users into account when designing the controls on your website, a good designer can account for differing abilities. Properly spacing website controls to usability standards and labeling them clearly can help. Usable controls increase the likelihood that all of your users will know how to interact with your website, leading to less frustration and more conversions.

What an Accessible and Inclusive Design Does for Your Business

Throughout this three-part series, we’ve gone over how building inclusivity into your website can benefit others, but you may be wondering how it may benefit your business. One way is that a more accessible website gives you an advantage over your competition. Just like everyone else, people with disabilities want to be able to navigate your site quickly, with few impediments, and without the need for assistance. For many people with impairments, it’s hard to find sites that grant them this level of ease. So if your website gives everyone a smooth experience, regardless of ability level, your potential customers are less likely to turn to your competition in the future. Additionally, inclusive design opens up your product (via your website) to a whole new market while strengthening your bond with your existing customer base. With an estimated 25% of American adults living with some form of disability, an accessible site is an easy way to generate more revenue and improve customer relations.

Need a design for your users?
Contact Us