Shifting Left: Design and UX Accessibility

August 18, 2022

The best time to think about accessibility

At any given time, most companies are not in the process of redesigning a brand new website. So it makes sense that we talk a lot about how to assess your site’s current accessibility level and what you can do to remediate it.

Of course, the easiest and most cost-effective way to have a WCAG compliant website is to build it that way in the first place. And while it’s never too late, the absolute best time to start thinking about accessibility is when you are planning your site’s user experience (UX) and designs.

Subscribe to our Newsletter

This field is for validation purposes and should be left unchanged.

The value of accessible UX and web design

Most of our clients are based in the United States and it’s natural for us to talk about accessibility in terms of lawsuits and ADA compliance. And we’ll get to that in a moment. But almost everyone would agree that making it possible for everyone to use your website is inherently a good thing. After all, who would ever intentionally make it harder for someone to use their site?

This translates into a very straightforward business case for digital accessibility. Estimates vary, but roughly 20% of the population experiences disability. That is a lot of potential business to leave on the table.

Imagine two stores

  • One has straight, smooth aisles and the other one has unexpected turns and impassable gaps in the floor.
  • One has clearly labeled signs and descriptive packaging and the other is disorganized with products wrapped in unmarked boxes.
  • One has attractive, bright lighting while the other is dim with strobing lights.

The choice here is obvious and the comparison sounds absurd. Yet we see websites every day with similar barriers preventing users from interacting and buying.

Our examples here also show why accessibility is a critical part of the disciple of user experience design (UX). It’s true that a sighted customer with full mobility would have an easier time in our accessible store. She could wander around the aisles to find what she needs, jump over the floor gaps, and open up packages to see what is inside. But making things accessible would make her experience much smoother. Similarly, the steps you take to make a website interface accessible also make the site easier for everyone to use and understand.

And it’s easy to see why building a good user experience in the first place is easier than trying to fix it after the fact.

Reducing the risk of lawsuits under the ADA

In any given year, most businesses are not sued under the ADA. But you may have heard of competitors or others in your industry that have been taken to court recently for inaccessible websites. Most famously, Domino’s Pizza was successfully sued when a blind customer was unable to order a pizza over their websites or mobile apps. But most of the thousands of lawsuits filed annually are targeted at smaller businesses (not to mention the tens of thousands that are settled before ever reaching a court of law).

For businesses motivated by reducing their legal risk, they must weigh their tolerance for risk against the cost of fixing accessibility issues. But when you are designing a new site, there are no tradeoffs. Get it right the first time!

Considerations for accessible UX and design

Incorporating accessibility into your UX and design process takes practice and you may need some help at first. But here are some focus areas you can use to get started. 

Color

If you are developing your brand as part of a new website, be sure to pick a color palette that is high contrast and offers you multiple options for combining colors accessibly. Sometimes that isn’t an option. In that case, you may need to select some additional brand-compatible colors to use specifically on the website for elements like links, buttons, and decorative text areas.

It’s also important to make sure that colors are not used as the only way of sharing a piece of information. For example, outlining a form field in red to indicate an error is not enough. You also need to add an error text or icon that explains the meaning of the error.

Zoom and Resize

Many users rely on magnification, zoom or built-in text and display resize features on their browsers and mobile phones. When designing your page layout, make sure to consider how the page will resize on smaller and zoomed screens. The good news is that if you are building your site responsively to work on desktop and mobile, a lot of that should be taken care of out of the box. But there are some pitfalls you can avoid like using images of text; when you zoom in on an image, the text may end up partially offscreen.

Planning for alt text

One of the simplest accessibility features is adding alternative text for images and other media. This is generally something that your content management system (or the person coding your website) should build into the site, but they still need to know what the alternative text should be. When you design, try to avoid using images of text and try to document the potential alt text for when you hand off designs for the site build.

Making your site keyboard friendly

Think about how your site can be navigated by someone that only uses a keyboard. In most cases, that means thinking carefully about adding in features that require using a mouse like a drag and drop. But one very common issue is dropdown menus that are also links. In that case, you’ll want to make sure that it’s possible to open up the dropdown with a keyboard (without having to click on the links).

Page organization

Screen reader users rely heavily on a page’s heading structure to navigate to the right part of the page. But all users benefit from a logically organized page too. Make sure that you use headings functionally and not just as design elements to make the text bigger. Your page design should always have an H1 heading for the page title and should not skip heading levels (i.e. from H1 to H4).

Shifting left on content creation

Prioritizing accessible user experiences remains relevant even after a site has already been built. Content creators, marketers, and e-commerce managers should adapt a “shift left” mentality when writing, laying out, and creating new web pages, blog posts, and products.

While a lot of accessibility features should already be baked into the design and coded directly into the site templates, there are still UX considerations related to the content that you add to your site. When planning the site, there are steps you can take to make it easier to create new accessible content, but the responsibility to maintain that level of accessibility falls on the day-to-day site editors.

Especially for sites with hundreds or even thousands of unique pieces of content, it is so much easier to get each page right from the start. No one wants to have to review and remediate thousands of blog posts. It’s critical that content teams be familiar with the relevant accessibility principles and their impact on a page, product, or post’s user experience.

In particular, here are some important areas for focus when building new content:

  • Alternative text descriptions for images
  • Proper use of GIFs and animations
  • Accessible charts and graphs
  • Page titles and heading organization
  • Link and button labels
  • Color contrast principles
  • Producing accessible video and audio
  • Form building and configuration

Accessibility know-how is still rare

The vast majority of the internet is simply not accessible. At all. The WebAim Million annual report regularly finds that over 95% of the most popular sites on the internet have easy-to-find accessibility barriers. At best, accessibility is not a priority for most agencies when they design and build websites. And because it’s not a priority, most designers and developers are never forced to learn how to incorporate accessibility into their site builds.

Most agencies don’t know how to build accessible user experiences. Bringing in accessibility help at the early stages of a website project can be an extremely cost-effective way to ensure that the site is designed and built properly. (It is definitely a lot less expensive than having to audit and remediate a site once it is already live.)

If you’re unable to find a full-service digital agency with accessibility experience and expertise, you should consider bringing on an accessibility consultant to conduct a UX or design review. The accessibility specialist can identify accessibility barriers and violations and work hand-in-hand with the designer to achieve your goals without compromising on accessibility compliance.

At Access Armada, we go one step beyond and provide full accessibility documentation for all developers as part of our UX reviews. Without assuming any accessibility knowledge on the part of developers, this documentation lays out how to build the design in compliance with the Web Content Accessibility Guidelines (WCAG). Typical documentation includes alt text instructions for all media, code samples, as well as areas for concern.

Ready to get started?

Get in touch today to get started with your free strategy session!

Contact Us
Share this post: