top of page
  • Writer's pictureJames Boughton

The Art of an UX UI Designer: A Closer Look at Web Accessibility

Illustrated Graphic depicting Web Accessibility
A Closer Look at Web Accessibility

Let’s dive into the fascinating world of working as an UX UI Designer. But we're not just focusing on aesthetics. We're going to explore how to make your website or application accessible to everyone, including those with disabilities. So, grab a cup of tea, sit back, and let's get started.

1. Size Matters : Buttons & Links

When it comes to UI design, size really does matter. The Web Content Accessibility Guidelines (WCAG) 2.1 suggest a minimum target size of 44 by 44 CSS pixels for interactive elements like buttons and links. This ensures they're easy to activate, even on small touch screen devices or for users with limited dexterity.

But remember, this is just the minimum. If a button is frequently used or part of a sequential task, consider making it larger. This reduces the chance of accidental clicks and makes the user experience smoother.

And don't forget about spacing. On mobile devices, where our fingers are the primary means of interaction, having buttons and links too close together can lead to frustrating mis-clicks. So, give your interactive elements some room to breathe.

2. The Power of Colour & Contrast

Colour isn't just about making your site look good. It plays a crucial role in usability. WCAG guidelines recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. This ensures that your text stands out against its background, making it easier to read for everyone, including users with low vision or colour vision deficiencies.

But remember, colour shouldn't be the only way you convey information. If a form field is filled out incorrectly, don't just change the colour of the field. Add a text message or an icon as well. This ensures that users who can't perceive the colour change can still understand what's going on.

3. Consistency & Navigation : The Unsung Heroes

A consistent layout is the unsung hero of UI design. Keeping your navigation menus in the same place on every page and using consistent icons and terminology helps users predict where to find information and controls. This reduces cognitive load and makes your site easier to use.

And let's not forget about keyboard navigation. Not everyone uses a mouse or touch to navigate. For users with motor disabilities, keyboard navigation is crucial. So, make sure all your interactive elements are keyboard-friendly.

4. Feedback & Error Handling : Clear & Kind

Finally, let's talk about feedback. If a user performs an action, your UI should clearly indicate the results of that action. Whether it's a form submission or a button click, a clear message should appear to confirm the action or indicate any errors.

And when errors do occur, be kind. Provide clear, easy-to-understand instructions on how to fix them. This ensures that all users, including those with cognitive disabilities, can successfully interact with your site.

Wrapping Up...

Incorporating these web accessibility best practices into your UI design isn't just about ticking boxes—it's about creating an inclusive and enjoyable user experience for all. By considering factors like button and link sizes, colour contrast, consistency, and feedback, you can create a UI that's not only visually appealing but also accessible and user-friendly.

So, next time you're working on your UI design, keep these points in mind. Your users will thank you for it!

11 views0 comments


bottom of page