UserWay Logo UserWay Logo Mobile
Feature image 6 Best Practices in Accessibility Web Design

If you’re thinking about creating a website or an app, then you will have a lot of factors to consider. You’ll need to think about your target audience, your site’s purpose, and how to bring everything together nicely to make your idea a concrete reality. One of the biggest components of crafting an impactful website is making sure it is well designed. This doesn’t just mean that you need to make it look pretty. Web design extends well beyond nice color schemes and beautiful fonts. It’s about making sure your site is intuitive, that people can easily interact with the content, and that it generally supports the needs of your users.

Make Your Design Universal!

While there are countless best practices out there that cover traditional web design, they often neglect to account for subsets of your user base. Your typical user doesn’t represent every user. So while web design standards usually cater toward an average user, that excludes huge chunks of the population. I’m speaking particularly about the users that need accessibility accommodations (not shocking, I know, considering that’s in the post title). It’s a great idea to build an accessible website from the start rather than needing to go back and modify it later. This is called Universal Design, “Universal design means considering people’s diverse needs in the initial design of a product. The main goals of universal design are to eliminate barriers and improve access for all.”[1]

Make These Design Choices

So here are some great ways to build accessibility into your new website:

1. Ensure your site makes sense no matter how it is being perceived.

There are so many different accessibility accommodations that people will be using to understand your site. First, at the one that most people are familiar with is text to speech. This helpful tool will read your website to the user, typically if they have a visual impairment or other disability that makes reading a web page difficult. These users may not be able to interact with images that you use on your site. That’s why including metadata like short descriptions of images, known as “alt attributes” can go a long way.

A great example of how to do this well is the American Foundation for the Blind’s Facebook page. Each image they use for a post is described at the end of the post. You don’t need to include extensive detail, but being cognizant of the fact that your users might be using accessibility tools is critical.

To make an image accessible, take this code:

<img src="picture.jpg" />

and turn it into this:

<img src="picture.jpg" alt="Photo of a little girl building a sand castle on the beach" />

While it’s common to think that making accommodations for blind users is the entire point of web accessibility, that couldn’t be farther from the truth. There are many other reasons that people could require web accessibility accommodations. For example, users could be at risk for seizures when they are exposed to content that flashes above or below a certain threshold. Users could also require is descriptive text to explain an auditory component of your site if they are deaf. Don’t limit your thinking or your accommodations plan just to specific categories of disabilities. Good Universal Design means getting perspective on the variety of challenges your users might have, and making it easier for anyone to use your site.

2. Ensure your site has text that is easy to read.

We’re not talking about having only well-written content, but that’s certainly a good thing to strive for too. This factor is critical because as I mentioned above, you’re going to have a lot of users who have trouble seeing your text. This could be due to a disability, temporary impairment, or even old age. As the population grows older, elderly internet users will require help reading and interacting with websites.

There are a few easy ways to make sure your text is readable. Step 1 is to make sure the typeface you choose is simple to read and the font size is big enough. Penn State has a helpful accessibility guide that outlines some text recommendations that might help you. They specify[2] that most body text for websites should be kept between 12 and 14 point font. This standard will help you to adhere to the WCAG 2.0 guideline that all text must be able to be resized to 200% without creating problems for your user like moving content off of the readable edge of the page.

Another important thing to do is make sure the color contrast on your site is ok for your users. Reading text that easily blends into the background of your page can create big issues for users. Checking the contrast of your site it pretty simple, and there are a lot of sites that can help you figure out if you’re following best practices. Head on over to my post about contrast checkers to find the one that’s right for you.

3. Ensure your site is easy to navigate.

This recommendation isn’t only just for accessibility awareness, it’s a good design principle in general. Have you ever used a website that has a confusing design that just isn’t intuitive? It can be a big problem, and burying your navigation or making the sit tough to use will make people annoyed with your website no matter what. However, this is an even bigger problem for users who require adaptations to use your site.

If the user is trying to utilize your website with an accessibility modification, then navigation is even harder. The WCAG website makes some really helpful suggestions to make your website easier to navigate. Here’s what they recommend[1] [2] :

  • Don’t use a ton of links on each page
  • Ensure the links look different from the rest of the text on the page
  • Use highlighting on search terms
  • Give the user ways to get to different sections on a web page easily[3]

4. Ensure your site adaptable to ensure modifications work properly.

If your users need accessibility modifications, you need to do everything that you can to help those modifications to work the way they should. You can create a website that helps these technologies to work well.

There are a lot of accessibility modifications we’ve covered in this post. You need to help out where you can and adapts to the needs of your users. Creating content that adapts to your users’ needs is a task that can vary depending on the type of website you are making. While there aren’t blanket suggestions that I can make to help you because each site is so different, making yourself aware of what issues can come up when users are implementing accessibility technology is important.

5. Ensure users have the time they need to interact with your content.

This suggestion directly correlates to Guideline 2.2 of the WCAG 2.0 rules. If you have content that is time sensitive, like a banner that flies in and out or a popup on a timer, you need to give people enough time to read it. If you include content like this in your site, then you need to allow your users to decide if they need more time by giving them a checkbox or a way to verify that they are done interacting with it.

This timer option can apply to a variety of content, like online forms. If your site includes a form for users to fill out, you will need to make sure that the timeouts are accommodating. Timeouts need to be set on the server so they are long enough to keep the server from resetting the form when one of the steps is submitted. Similarly, if your site includes online tests or quizzes that are timed, you need to make sure there is enough time to complete them. Users may need more time to read questions thoroughly and complete them correctly. While you might be emphasizing speed in the tests, you might be creating an unwelcoming environment for a lot of your users.

6. Ensure your site uses landmarks

Landmarks are regions of a page such as header, navigation, body, footer, sidebar, etc. that allow the user of a screen-reader and/or a user navigating with a keyboard to jump directly to the different landmarks using certain dedicated keys on their keyboard. So if there are 100 links on a page and they want to get to the footer, they don’t need to tab through all 100 links, but they just jump from landmark to landmark directly.

In general, you need to make sure your site is following the WCAG guidelines as closely as possible. If you’ve read any of the other posts on this site, then you know these guidelines aren’t really clear yet. There are recommendations and thoughts on the subject, but there is no solid certification process to ensure you comply fully with the rules. This can make it hard for you to know if your site is compliant, and prevent lawsuits or just having an inaccessible website in general.

This is incredibly frustrating, but that doesn’t mean it’s not important. As a website owner it is your responsibility to understand the best way to make your website accessible. Learn all that you can, figure out what your users need, and bring your site up to code. It’s important.

If you want to know the core of where these suggestions are coming from, please check out our WCAG 2.0 post that’ll clue you into the basis for these recommendations.

Do your users ever comment on your excellent web design? Is there anything that you do to ensure that everyone can use your site without needing modifications? Share your universal design tips below!