Published: September 17, 2019
Ever leave a website feeling frustrated, overwhelmed, confused or all of the above? Don’t worry, me too. But, for those with disabilities, trying to navigate a website that wasn’t designed with accessibility in mind is even more difficult.
Currently, 26% (1 in 4) of adults in the United States have a disability. This means if you don’t have an accessible website, you are excluding millions of users from learning more or interacting with your business.
Whether you’ve dabbled in website accessibility in the past or are just learning about the concept now, our helpful guide below covers everything you need to know to make your website more accessible to everyone.
What is Website Accessibility?
Here’s our one-sentence definition for website accessibility:
Making your website available for all consumers, including those with disabilities.
To get more specific, website accessibility means websites and other online tools are properly designed and coded so people with disabilities can contribute, perceive, navigate and interact with the online world.
You may be wondering: why is website accessibility important for my business? Well, we’re glad you asked. Even if your website is not a federal, state or local government website, there are many benefits for improving accessibility. Not only can you strengthen your audience by following best practices, but you can also improve search engine optimization and increase customer satisfaction. It’s a win-win for everyone!
Tips for Improving Website Accessibility
Now that you’re a website accessibility expert (or at least know what it is), check out our top six tips for improving website accessibility:
1. Use <h> (header) tags correctly.
Many people with disabilities rely on screen readers to relay information back to them. Screen readers depend on <h> tags (and other web elements) to navigate content.
Here’s how to properly use <h> tags:
- Only use <h1> for the main title of the page.
- Do not skip heading levels (ex. Go from an <h1> to an <h4>) because it can confuse screen readers into thinking content is missing from the page.
2. Don’t forget the alt tags.
Adding an alt tag to an image is an easy and effective way to improve website accessibility. Just like heading tags, screen readers rely on alt tags to navigate content. Specifically, alt tags are used to describe an image. Here’s an example to get you started:
<img src=”#” alt=”a bearded man wearing a woman’s scarf”/>
3. Avoid the “click here” link.
Sighted users may never have an issue with “click here” links. On the other hand, “click here” links for screen reader users are ineffective. Since screen readers usually don’t read links within the context of the page, using more descriptive language than “click here” is beneficial for visually-impaired users.
Here’s a great example:
Do not say: “Click here for more information.”
Instead, say: “To learn more about user experience, check out our UX solutions.”
4. Think twice about colors.
Choosing the correct colors for your website can make all the difference for people with low contrast sensitivity or color blindness. But, it sometimes isn’t easy (especially when you’re trying to incorporate brand colors). Luckily, there are tools out there you can use to pick a good color contrast like WebAIM’s Contrast Checker.
5. Improve your keyboard navigation.
Some people with mobility disabilities may not be able to use a mouse or trackpad. Because of this, setting up keyboard navigation on your website is important. With keyboard navigation, users can browse websites by pressing specific keys on the keyboard including the “tab” key and the “arrow” keys. Not sure if you’ve set up your website correctly for keyboard navigation? Follow these tips to make sure you have a keyboard-friendly site.
6. Add labels to forms.
Just like alt tags, labels are an important element to include on your website so screen readers can relay information to the user. For example, if the field is for an email address, it should be labeled as “Email.” To label fields correctly, use the <label> tag.
Once you’ve applied a few accessibility best practices to your website, use tools (like browser extensions) to double-check accessibility levels. Or, use a Web Content Accessibility Guidelines (WCAG) 2.0 checklist.
Website accessibility has become an important standard in today’s world. So, next time you’re designing a website, take a step back, pull out these tips and make sure your following accessibility guidelines so you don’t end up like Domino’s Pizza.
Need help jumpstarting your website for accessibility? Let’s chat!