Size Matters: Helpful Accessibility Tips to Improve Usability Using Large Elements and Controls

We all have the internet at our fingertips, which can be a powerful tool. Unfortunately, that’s not the case for everyone. People with disabilities, or those who need to use assistive technology, face challenges we wouldn’t expect.

Making the right design decisions can help accommodate users and bridge the ability gap on your projects from the beginning. Doing this allows you to create a more inclusive experience that can work for all types of users.

I don’t have a particular preference for designs that are bigger in size. Still, given what I have learned so far about web accessibility, usability, and UX design – size can make or break the deal for your users, preventing useful interaction with your interfaces.

Poorly sized designs can not only be difficult but, in some cases impossible, or just frustrating enough to click away from your website and never come back. That’s why today, we’re going to dive into how clear design elements and the choices you make can make a difference in your design.

What “Clear Design Elements” Really Means?

Clear design elements can mean many things, but for the sake of being brief today, we’re going to talk about the most important ones you can work through on your designs. These are:

• Links
• Buttons
• Controls

Ensuring these elements are large, clear, and easily understood can make sure that all users will gain access to all of the features of your website. In addition, by simply making these elements more user-friendly, and more apparent, you can help them not only be found but actually usable in your designs.

The thing is: small buttons, links, and controls (like checkboxes) can be extremely difficult for people to use, especially when these elements are close together or difficult to discern.

These usability issues are only made worse when you also consider the devices your users are using to navigate your site, for example, mobile phones and tablets. With decreased functionality and smaller screens, it’s much easier to mix buttons up or find them exceedingly difficult to use.

Who does this help?

Large Buttons, links, and controls in a website’s design can help address the needs of almost any user – but especially those with reduced dexterity or those struggling to use a small screen.

There are plenty of people out there who struggle to see small text, or contrasting colors, or in general, small, detailed design. If your elements become jumbled too quickly, they can be challenging to select and use.

Using a mouse or cursor of any kind can become frustrating if you’re constantly clicking the wrong thing because the buttons or boxes are so small and put together. Not to mention people with cognitive disabilities or reduced vision (even blind users, using screen readers to navigate the web).

By including these needs in your design, you’re creating an environment that allows your content to be consumed quickly and brings in more repeat visitors to your site.

But there are plenty of other benefits to including large elements in your design. Not only will your content be easier to access on smaller screens, but the flow of your site will also make more sense. For example, it can help users who can’t keep the device steady for physical reasons or people who are constantly on the move.

Having more room to press buttons quickly makes them less likely to give up on the website entirely. You’ll be creating an inclusive design that welcomes people to consume your content without struggling.

Where to start?

There are plenty of ways to integrate large buttons, links, and controls into your website. But, some of the best, most straightforward ways to do that are:

• Large, clickable headers: Providing your users with a table of contents can help bridge the gap for users who struggle with large blocks of text. This way, they can easily access the information they’ve come for without needing to weed through tons of text.
• Large, well-spaced links: Large links are an excellent way of providing clear and accessible navigation and should be well-spaced for ease of clickability. They can also be used to bring you back to the homepage if no hyperlink is available in your header or navigation menu.
• Large, obvious buttons: When large and spaced out, clickable buttons can also improve the overall usability of your site if used correctly. Large, accessible buttons should be used for necessary actions, such as calls to action, transactions, buying a product, or registration.

These elements are also crucial in user interfaces requiring multiple steps so that users don’t miss any options or small clickable elements along the way.

Even with these in mind, there are plenty of different ways to get started or paths you can take when working through your site.

• You can use large hover areas to make sure users can easily click and find the links. Also, make sure each link has its own space, at least 20 pixels away from any other interactive elements for simplicity’s sake.
• Large text can be a critical factor in legibility and the overall size of the buttons.
• Adding bright colors, borders with good color contrast, or clear markers can help direct your users to where they need to be.
• Make sure all boxes that need to be filled in are large enough to be clicked easily.
• Colors should contrast and be clearly visible when paired together. Users with reduced visibility, or with devices in non-ideal circumstances, may struggle to see some aspects if it doesn’t correctly contrast against each other.
• All “floating” elements should stand out and be visible to users since they’re not attached to clear navigation or toolbar.

Keep in mind a general rule of thumb: the more critical it is, the larger it should be. So, for example, you may wish to reserve buttons for clickable actions, like “subscribe” or “sign up,” or activate JavaScript functions.

Less significant steps should be smaller and less distinct and not be styled like buttons to help make it clear to users what is what. Finally, you’re going to want to stick to traditional design patterns; Not all users will be experienced with non-traditional web design patterns. The closer you get to something ‘familiar’ and universal, the better.

You’ll notice user retention will benefit significantly from these changes, and your overall website experience will as well. Giving your users explicit instruction can lead to a higher click-through rate, more easily consumed content, and even higher sales conversions.

Integrating these elements will benefit your site in the long term. You’ll notice how much easier people can find exactly what they need without being affected by these sorts of details.

Again, as I have said before in previous articles, you don’t have to implement all of these changes in one shot. Instead, tackle it as an issue at a time so it doesn’t feel overwhelming, and you can also collect feedback from your users as you go.

Did you find this information helpful? Which elements would you like to resize first on your website? Please let me know your thoughts in the comments below. Also, please click the like button to support more content like this. Likes are free!

If you want more information on web accessibility, make sure you check out my YouTube channel. Also, make sure you subscribe to our newsletter for notifications about new content, so you don’t miss a single article!