Accessibility is important. And making sure your website is accessible to everyone shouldn’t be a minor matter. This plays a big role in the usability of your website and that’s why Google is also placing a stronger focus on the accessibility of your content. Fortunately, awareness is growing, and platforms like WordPress offer many ways to make your website more accessible. We got off to a good start, but there is still a lot to be done. In this blog post, we’ll tell you why you should focus on accessibility and which tools can help you with this!
What is accessibility?
Accessibility is about how your software or website can be used by everyone, including people with disabilities. Wikipedia puts it this way:
Accessibility refers to the design of products, devices, services, or environments so as to be usable by people with disabilities. The concept of accessible design and practice of accessible development ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers).
It is the opportunity for someone to access and benefit from a system or other entity such as your website. To ensure this, accessibility aims to give people with disabilities this access.
In its guidelines for webmasters, Google mentions the importance of making your content accessible. And while it’s not mentioned that often, they also find the following statement on their website: “Everyone should be able to access and enjoy the web. We are committed to making it a reality. This means that Google also considers accessibility to be important.
Accessibility is important
Even if the internet isn’t that old, most of us can’t imagine what life would be like without it. The web connects billions of people around the world, no matter where or who they are. The good thing about the internet is that it has tons of information on almost every topic imaginable.
However, our world population is made up of many different people. And each of these people should have access to all of the information that is available online for free. That is why accessibility is important.
Take people with a visual impairment, for example. Worldwide, at least 2.2 billion people are visually impaired near or by television. In addition, color blindness affects around 1 in 12 men (8%) and 1 in 200 women (0.5%). That’s a lot of people you will miss if you don’t make your website accessible to them.Accessibility Do you want to make your website more accessible? It is great! There are a couple of things you can do right away. The obvious things that can be easily edited are the use of titles, contrasts, and descriptive links.
Use of headings
Headings help both search engines and users understand your text. This makes it easier for them to find out what a post or page is about. As the Web Accessibility Initiative W3C puts it, headings tell more about how content is organized on a page, and web browsers or assistive technology can use them to provide in-page navigation.
Headings help each of your visitors find out what your text is about. So make sure they are descriptive and properly nested. Don’t just use them as a design element (“that’s the only way I can enlarge my text”) or to influence SEO (“I use all H1 headings, that makes it all very important to Google”). Both of these may seem like a simple solution, but they are bad practice as your headings should be clearly structured.
One tool that you can use to test the heading structure of your website is HeadingsMap. This extension for Chrome and Firefox allows you to view the heading structure of a page. It is good to know that you should only use one H1 heading on your page, which should be the title of your page or your post. After that, you can use H2 and H3 sub-headings (or even H4 headings and beyond) to define sections in your text.
Read more in our article on Using how to use headings on your website
.
Color contrast
Color contrast is the difference in light (technically, luminance) between anything in the foreground, such as text, and its background. If you choose a black background for your menu and use very dark text, that text will be very difficult to read. And choosing two colors that you find very contrasting doesn’t mean that this contrast will be enough for everyone. Because of this, there are a few tools that you can use to check the contrast on your page.
For example Contrastchecker.com, which checks the contrast levels and gives information about the accessibility levels: It also gives you a contrast ratio rating based on the W3C contrast guidelines that considers 4.5: 1 to be correct. As you can see in this example, the colors I have chosen are far from this minimum score.Contrast checking is pretty straightforward.
If you want to play with contrast to find out how it affects visits from color blind people, for example, you can try the color contrast analyzer that comes with a color blind simulator allows you to preview designs as they might be seen by color-blind users.
If you are a Mac user, Sim Daltonism is a great tool too. As with the Color Contrast Analyzer, you can hover your mouse over a website and test a number of variations in color blindness:
Descriptive links, alternative text, etc.
The last accessibility tool we’d like to highlight is one that tests the behavior of your content when a screen reader is used. This assistive technology helps many visually impaired people to understand a side.
A screen reader converts text, images, links and other elements into speech or Braille. On a Mac, you can use this with VoiceOver (which is already on your computer). You can download NVDA for free on a Windows computer.
Now why would you want to listen to your content being presented through a screen reader?
Because it helps you discover your content from the perspective of someone who cannot see it. This will help you identify problems with reading order, table highlighting, images, and other form elements and links on your page. Images without alternative text will not be described to this site visitor. And inconspicuous links with text like “More information” or “Click here” give no information about where this link takes you.
It may seem like small things, but for someone experiencing these issues, this is reason enough to leave your page immediately.
Just one thing
The folks at WAVE Web Accessibility created a tool to quickly identify a lot more good and bad on your part. This is done fully automatically and requires a human eye to assess which improvements are realistic and which are not. We don’t recommend using it as a replacement for the accessibility tools mentioned above, but it’s definitely worth a look! You can find all of the above tools and more in the WordPress Accessibility Manual.
It’s an ongoing process It may all seem a bit overwhelming, but you don’t have to fix everything today. Knowing what it means is the first step. You can now determine how accessible your pages are and what you need to work on. Don’t see accessibility as an “extra”. If your website is inaccessible, it will appear very unwelcome to a significant portion of your audience. Additionally, adhering to the accessibility guidelines will improve your website for all of your visitors.
