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.

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.

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.

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.

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.