Website accessibility is no longer an optional feature. It is a requirement for being on the internet today. If the recent Supreme Court decision to not take up Domino’s appeal in an accessibility lawsuit is anything to go by, you need to be making your website accessible.
But what does being accessible entail? It’s make sure people who use something other than a mouse can use your website the same way mouse users can. It’s making sure people can see the words because you have the right color contrast. And it’s making sure images have descriptive alternative text.
That seems like a lot. And it can feel so overwhelming when you start looking into it. We’ve all been there. But once you sit down and start to learn and start to fix some of the errors, it will all start to make sense.
This page will give you blog posts, videos, resources (external and internal) and people and websites that can help you learn web accessibility. And then you can begin to work to make your website accessible.
Because everyone — everyone — should be able to use your website no matter what technology they use to browse the web. Accessibility matters.
Table of Contents
- What is Accessibility?
- Why does accessibility matter?
- Accessibility tools
- Alternative text for images
- Headings
- Color contrast
- Forms
What is Accessibility?
In simple terms, accessibility is making sure everyone can view and use your website no matter what tools they use to browse the web. Not everyone surfs the web using a normal screen and a mouse. Some might only be able to use a keyboard. Others might have to use a screen reader. And still others might have to use something else.
Accessibility matters. Because everyone — everyone — should be able to use your website no matter what technology they use to browse the web.
So you need to account for all of those technologies so that everyone can use your website. It sounds scary, but the good news is that making your website accessible can be as easy as making sure you’re following the default standards of the web.
- A look at some web accessibility guidelines
- Introduction to Web Accessibility (W3C)
- Introduction to Web Accessibility (WebAIM)
- Accessibility Basics (Usability.gov)
Why does accessibility matter?
Everyone should be able to use your website no matter what tools they use to browse the web. Period. End of story. Just because someone doesn’t use a mouse and normal screen like you might, doesn’t mean they can’t enjoy your website.
Plus, inaccessible websites limit your user and customer base. In fact, According to a 2005 study from the U.S. Census Bureau, about 54 million people, or 18.7 of the U.S. population, have some sort of disability. Why would you want to actively keep them from being a loyal reader or customer? It makes moral and economic sense to have an accessible website.
Accessibility matters, y’all.
Why Website Accessibility Matters
- Why accessibility matters in the modern web
- Why Web Accessibility Matters (Stanford)
- Why digital accessibility matters (InVision)
- Building an Inclusive Web: Why Accessibility Matters (Envato Tuts+)
Accessibility tools
While making your website accessible can seem like an incredible challenge at the start, the good news is that there are a number of tools that can help you out. There are the guidelines of course, of which you’ll want to focus on Section 508 and the WCAG 2.1 guidelines.
Plus, there are a number of automated testing tools that can tell you if something isn’t accessible and how you can fix it. You’re not taking on this accessibility journey alone.
- Tools to test website accessibility
- WAVE Web Accessibility Evaluation Tool
- JAWS
- aXe
- WebAIM Color Contrast Checker
Alternative text for images
One of the easiest accessibility fixes you can make to your website is to make sure all of your images have alternative text. What is that? It’s an HTML attribute for images, and it’s text that will show up if an image fails to load for whatever reason. And it’s also what devices like screen readers read out to users who may not be able to use your website like you do. Plus, it’s got some SEO benefits too.
Most content management systems, like WordPress, make it easy to add alt text to your images. So make sure you go through all of your images and check for meaningful alternative text.
Website Accessibility: Alternative Text
- Alternative Text (WebAIM)
- Five golden rules for compliant alt text (AbilityNet)
- How to Design Great Alt Text: An Introduction (Deque)
Headings
Another easy fix is to check your headings and to make sure they are the correct level. In HTML there are six heading levels, denoted by the h1, h2, h3, h4, h5 and h6 tags. H1 is obviously the most important and it descends down to six. There should only be one h1 tag on a page, and that should be the title of the page (or maybe the website name for the homepage).
H2 should come next, and I use this for all of my subheadings. If you have any subheadings under those subheadings, you would use h3 and so on and so forth.
This helps screen readers figure out the importance of each heading and create an accurate outline to help their users. Users then can use that to navigate their way around the page.
Website Accessibility: Headings
- Headings (W3C)
- How to structure headings for web accessibility (Nomensa)
- Use proper heading elements to indicate the page’s content structure (Indiana University)
Color contrast
Color contrast is a little bit trickier to get under control if you’re a website owner. Most of this is on the web designer. But there are some things that you can do to make sure your website has the right color contrast.
You’ll want to use the color contrast tool I’ve linked to below to help you do the complicated math to get the ratios. And then check all of your text and your backgrounds to see if they have the right contrast. Aim for at least hitting the WCAG AA guidelines for those ratios.
Website Accessibility: Color Contrast
- WebAIM Color Contrast Checker
- Color & Contrast (University of Minnesota)
- Color and Contrast on Web Pages (Penn State)
Forms
Another crucial part of web accessibility is forms. Again, if you’re just a website owner, it might be hard to do anything here. But there are some things that you can still look at, and if you’re looking for a forms extension or plugin, it can be helpful to figure out which one to use.
The most critical parts for any forms and accessibility is to make sure each form has a submit button and that each field has a label that can be seen. No more placing the label as just a placeholder.
