The basics of accessible web design

#AllUsers

“Accessibility” refers to the process of making sure your web designs cater to as many users as possible. No, that wasn’t meant to sound like a burdensome task, although we accept it would be if you’re not familiar with the concept of accessible web design.

In this article, we’ll look at how to build accessibility into your designs, discussing content structure, use of colors, and much more. However, before that, let’s get up to speed on what accessible web design means.

What is accessible web design?

Overall, navigating and using the web is intended to be as easy as possible, much like any product or service. In a general sense, if a solution is clunky or difficult to use, you’ll likely swap it out in exchange for a more efficient, easy-to-use alternative. Websites are no different.

You want as many people as possible to be able to easily use your website.

 

When it comes to websites, accessible design refers to how easy it is to use for as many people as possible. As such, if people with disabilities or special needs struggle to use your site, it’s not accessible.

You can also drill down to specific elements. For example, take a visually impaired visitor. If you follow through on the accessible web design concepts we’ll talk about later, your site could be translated through a screen reader or similar tool. This, of course, makes it more accessible. However, if you’ve used a slider or other element where the text cannot be read and transcribed, this is inaccessible.

It’s a simple concept really: give as many visitors as possible the opportunity to use the site you create. However, there’s sometimes a sell-job needed, mainly because a client won’t know that accessible web design is a necessary element.

Accessible web design is important

Accessible Web Design Business

At the top of this piece, we said that clients will likely try and capture all users — but what if they don’t? This could be somewhat understandable, especially if they’re consumed by the visual sweetening and flourishes that often accompany a project brief. In the client’s aim for a site with impressive visuals, they might forget that a site needs to convert users.

This makes accessible design not just important for those who need it. In fact, some of these elements are crucial for conversions on the whole.

Remember: accessibility means giving everyone a chance to optimally use a site.

 

Let’s cut to the chase. Here’s why we think accessibility is so important:

  • It offers parity to all of your site’s users.
  • The techniques to make a site accessible for impaired users are also beneficial to non-impaired users, making them more likely to convert.
  • Some techniques provide a boost to your search engine optimization (SEO).

We haven’t yet mentioned the last point, but it’s not necessary at this stage. You’ll soon see how this plays out, as we present an overview of accessible web design concepts.

You don’t need to be an accessibility expert

Fortunately, you don’t need to be an expert in order to make a site accessible. There are just a few simple concepts. We’ll take our inspiration from Maja Benke’s recent WordCamp talk on accessible design. We also encourage you to check out the comprehensive slides from the talk, as they go into detail on a11y accessibility and other concepts specific to catering for disabilities and impaired users.

A good place to start is with the structure and layout of content. There are three elements here to consider:

  • The structure itself. This means looking at paragraph length, the use of bullets and lists to help break up your content, as well as how your site comes together under the hood.
  • Semantic markup. You should already be comfortable with this concept, but splitting content into short, easily digestible sections helps both “man and machine” to understand your content.
  • Useful anchor text. This is something often overlooked, but vital. In most cases, clear and actionable link text is better than something nondescript. For example, rather than “Click here,” you should offer clarity, such as “Read our Privacy Policy.”

Color theory (or more specifically, the use of contrast in your designs) is another key accessibility element. It’s important to realize that color alone does not equal prominence. Contrast is also key, and although you can do this via style and design, high color contrast is our focus here.

To ascertain whether you have the right level of contrast in your designs, you can use a tool such as Contrast Checker. You’re looking for a ratio between 4.5–21:1, and as many green ticks as possible.

Finally, much like your color palette, you need to consider your font choices. There are some crucial accessibility guidelines you can follow:

  • Use large font sizes, with a “heavier” weight.
  • Match this with a bigger line height, adapted to your font choices.
  • Use different text elements, as outlined above, to help break up your text.

You’ll notice we haven’t talked about specific fonts here. We’ll leave that up to you, although choosing simple serif and sans-serif styles (rather than scripts’ overly ornate designs) is going to be beneficial to the majority of readers.

Don’t alienate your clients’ users

Quite frankly, if your overall goals for a project doesn’t specifically include alienating a slice of your client’s user base, creating an accessible website should be a priority.

Accessible web design is a “base metal” that acts as a fundamental to capturing more users, generating traffic, and ultimately creating a successful site.

Fortunately, it’s simple to do, as accessible web design rests on optimizing primary aspects of a website. For example, font choices and sizes, colors and contrast, and overall structure all contribute to accessibility. If these are at the forefront of your design decisions, you can’t go wrong!