by: Simone Dehel

Why accessibility in UI design matters

Ensuring that everyone, regardless of their abilities, can interact with your website or application is critical to creating a more inclusive user experience. When you make your UI accessible, you not only attract a larger audience and follow best practices for design, development, and accessibility, but you also reduce legal risk and improve your brand’s reputation.

As UI designers, we should be considering how all our users will interact with our designs. In this article, you’ll learn more about the four web accessibility principles and best practices to use during the design process that will help inform your design decisions.

Principles to live (design) by

While designing websites, applications, or any other browser-based design, it’s important to adhere to the four web accessibility principles that are outlined in the Web Content Accessibility Guidelines (WCAG). The WCAG web accessibility principles, also known as POUR, are perceivable, operable, understandable, and robust.

• Perceivable means that users must be able to perceive information and the UI in some way, using one or more of their senses.
• Operable means that users must be able to control UI elements using some type of input device, such as a mouse, keyboard, or voice command.
• Understandable means that the content must be readable and appear in consistent, predictable patterns for its users.
• Robust means that the content must be developed using web standards that work with current and future browsers and devices.

By keeping the POUR principles top of mind, designers can start to make design decisions early and often in their work while seamlessly adhering to accessibility standards.

How to make POUR decisions

The POUR principles are the perfect introduction to how we can consider accessibility more thoughtfully in the interfaces we design. There are common misconceptions about web accessibility, like that the end result will be an ugly user experience, or that you can ignore them until the end of a project. Unsurprisingly, neither of these are true.

Once you familiarize yourself with the POUR principles, it’s easier to make POUR decisions rather than POOR decisions. The list below outlines simple considerations to make during the design process to ensure your designs follow web accessibility standards. You might even find that you’re already following some of these practices without even realizing it.

Perceivable

Perceivable is all about the senses; users must be able to perceive information and your designs in some way by using one or more of their senses. To make sure your website or application is perceivable for all users, consider the following practices:

• Color contrast: Ensure that there is enough contrast between foreground and background colors to make content visible for users with visual impairments. This means that the text should be clearly distinguishable from the background color. Using a Figma plugin like Stark makes testing color contrast really easy.
• Color usage: Don’t rely solely on color. This means that color should not be the only way to convey meaning or distinguish between different elements on the page. By incorporating additional visual cues, such as icons or text labels, you can make your interface more inclusive and easier to use.
• Readable fonts: Use legible typefaces, font sizes, and appropriate line spacing to make content easier to read. This means avoiding typefaces that are difficult to read and making sure that there is enough space between lines and paragraphs.
• Alt text, transcripts, + captions: Provide alternative text, transcripts, or captions for non-text content like images, audio, or videos. By providing a description or text equivalent for these elements, you not only make it possible for people who cannot see or hear to understand the content, but you also improve your site’s Search Engine Optimization (SEO).
• Descriptive links: Use descriptive links that convey the content of the link so users can understand where the link leads without having to click on it. So instead of using a generic phrase like “Click here,” use a descriptive phrase like “Download our latest report on web accessibility.”
• Touch target size: Design interactive elements to have a minimum touch target size of 44 x 44 pixels. This will help ensure that your interactive UI components will be large enough for users with motor impairments to select without accidentally selecting surrounding elements.

Operable

Operable means that users must be able to control UI elements using some type of input device, such as a mouse, keyboard, or voice command. To make sure your website or application is operable for all users, consider the following practices:

• Keyboard accessibility: Ensure your users are able to navigate your website using only a keyboard. This includes being able to use the tab key to move between links, forms, and other elements, as well as being able to activate buttons and other controls using the keyboard. By annotating the tabbing order in their UI mockups, designers provide developers direction on how certain elements will function for keyboard users.
• Enough time: Provide enough time for users to read and process content. This can include options for users to adjust the speed of these elements, or to pause or stop them altogether.
• Focus indicators: Make sure that users can easily see where they are on the page by providing focus indicators for all interactive elements. This can include outlines, borders, or other visual cues that highlight the currently focused element. UI designers are encouraged to design focus states for interactive elements like buttons.
• Additional input methods: Consider different input modalities beyond the keyboard, such as touch activation, voice recognition (speech input), and gestures, which make interfaces easier to use for many people.

Understandable

The understandable web accessibility principle is all about making sure that the content on your website or application is readable and appears in consistent, predictable patterns for its users. This means that users should be able to understand and interact with the content without confusion or frustration.

• Readable and understandable: Use clear, concise language and break up content into digestible chunks throughout the interface. This means avoiding overly technical or complex jargon and using headings, subheadings, and bullet points to organize content.
• Consistent patterns: Use consistent navigation throughout your website or application, so users can easily find what they are looking for. This can include using the same menu structure on all pages as well as consistent labels and icons for buttons and other controls.
• Clear error messages: Provide clear and concise error messages when users make mistakes or encounter problems on your website. This can include providing suggestions for how to correct the error as well as a way for users to contact support if they need additional help.

Robust

The robust web accessibility principle refers to the idea that web content should be developed using web standards that work with current and future browsers and devices. This means that designers should focus on creating content that is compatible with a wide range of technologies, including assistive technologies like screen readers, and will continue to be accessible as new technologies emerge. Some best practices for creating and maintaining robust designs include:

• Responsive design: Create mockups for complex interactions, layouts, and flows to ensure your designs are optimized for various screen sizes.
• Design annotations: Outline annotations before passing your UI designs to developers. Informing developers about your designs’ functionalities will help them in the overall development process. Ultimately, by collaborating with developers, you will help ensure your designs are built using valid Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) to ensure a semantic and well-structured site.
• Browser testing: Check your designs across a range of browsers and devices. By doing so, you can identify any potential issues that may arise when your website is accessed from different types of devices or browsers. Using tools like Browserstack makes testing your designs on different devices really easy and helps you optimize your designs for different devices’ unique characteristics.

POUR decisions > poor decisions

Designing with accessibility in mind is a win-win for both users and organizations. By creating a more inclusive user experience, you can improve customer satisfaction, reach a broader audience, enhance your brand’s reputation, and reduce legal risk. On 2023’s Global Accessibility Awareness Day (GAAD), we’re here to remind you about the importance of making POUR decisions, not poor decisions.