by Cathryn Rowe

Last year, I completed a Fellowship with the City of Austin’s Innovation Office as their Design Lead. A big part of my job was ensuring that all of the new sites we designed and built followed the WCAG (Web Content Accessibility Guidelines).

Even if the UI project you’re working on doesn’t have accessibility requirements, it’s worth understanding the implications of your design decisions. If you’re not thinking about accessibility, then you’re not thinking about the full user experience. With that in mind, here are a few simple to start incorporating accessibility into your UI designs.

1. Adjust color and text size to create combinations.

One of the easiest ways to align your designs with the WCAG is to use strong color contrast. The WebAim Color Contrast checker is one of my favorite tools to achieve this. It’s great if you’re building a color palette from scratch, or if you’re working with an existing palette and need to create a complementary web-accessible color set. The tool allows you to input specific hex codes or choose from a color wheel, and then make incremental adjustments to reach AA or AAA contrast standards between elements.

WCAG References: Minimum Contrast (AA) & Enhanced Contrast (AAA)

Different foreground/background color combinations compared to WCAG standards—just a small color shift can make your design more accessible.

2. Use more than color to indicate a status change.

Color is a common way to show changes in state, and can be effective when indicating those changes to people with typical vision. For those with colorblindness or other vision differences, however, color alone may not be enough.

Pairing color with shapes, icons, explanatory text, or some combination of all three, can help ensure you’re communicating clearly. Think of a stoplight, where each state is shown through a unique color and a unique position.

Pairing explanatory text with a thicker line helps the error stand out from the default field and also clearly explains what the problem is and how to fix it.

To simulate how people with different vision types would view your design, download Color Oracle.

WCAG Reference: Use of Color

3. Use header tags in a logical order.

This one is pretty straightforward, but can be easily overlooked if you’re working on parts of a page separately without considering how they work together as a whole. Screenreader software will read the header tags in the order they appear, so taking a step back to make sure your hierarchy makes sense can make a big difference in how someone accesses your page content.

WCAG Reference: Section Headings

4a. Write copy for links and buttons that can function without context.

One basic screenreader function is to read through all of the links on a page. If a page uses the same copy for links that do different things, e.g. ‘click here’, it can be incredibly difficult to navigate. It’s important to make sure that when you’re writing copy for an action, it is unique and can be understood if read independently.

Link copy should clearly communicate the consequences to a user.

4b. Or, work with developers to make sure the code augments the design.

There are outlier cases where the strategy presented in 4a can contribute to a poor user experience. In this case, the solution may lie with your developer(s).

As an example, one of the City of Austin sites I worked on required us to display a list of forms. Each form had an associated downloadable PDF. Our first thought was to use “Download {Form Name}” for each button. However, after looking through the length of the form names, we realized that this format would create huge buttons with multi-line text that would negatively impact our .

We decided to instead use “Download” as the visible button name for all of the forms, while also making sure the code would correctly use “Download {Form Name}” for screenreaders. This method supports accessibility, but applies a different approach to make sure the visual design isn’t impacted.

WCAG reference: Link Purpose in Context

Design for All

Before the beta launch of one of our City of Austin sites, we did usability testing with someone using a screenreader. The way he spoke with our team about the importance of incorporating accessibility into design is now something I think about every time I begin a new project:

“Why would you want to make something that some people can’t use?”

Source link—-819cc2aaeee0—4


Please enter your comment!
Please enter your name here