Tips on how to Enhance Your Web site Accessibility • Yoast

0

Camille Cunningham

Camille is Content Manager at Yoast. She writes and optimizes blog posts and enjoys creating content that will help people master SEO.

Accessibility is important. And making sure your website is accessible to everyone shouldn’t be a minor matter. It plays a huge role in the usability of your website and that’s why Google is also more focused on how accessible your content is. Fortunately, awareness is growing and platforms like WordPress offer many ways to make your website more accessible. We are on the right track, but there is still a lot to be done. In this blog post we will tell you why you should focus on accessibility and which tools can help you!

What is accessibility?

Accessibility is about how well 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 that can be used by people with disabilities. The concept of accessible design and the practice of accessible development ensures both “direct access” (ie unsupported) and “indirect access”, ie compatibility with a person’s assistive technology (e.g. 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 focuses on making this access possible for people with disabilities.

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 this a reality. ”That said, Google also sees that accessibility is 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 worldwide, no matter where or who they are. The great thing about the internet is that it has a lot of information on pretty much every topic you can think of.

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 freely available online. That is why accessibility is important. Take anyone with a visual impairment, for example. Worldwide, at least 2.2 billion people have near or far visual impairment. In addition, color blindness affects around 1 in 12 men (8%) and 1 in 200 women (0.5%). That’s quite a lot of people that you will miss out on if you don’t make your website accessible to them.

But there is more!

Visual impairment is one of the things to be aware of, but it is definitely not the only one. think of Dyslexia and other reading or dexterity difficulties. Users with severe dexterity are unlikely to use a mouse and will often rely on the keyboard instead. Have you ever tried using your website or our plugin without a mouse? It’s a tough job.

To give another example: a few years ago we had a customer with hearing problems who wanted to complete our SEO all-round training. He was faced with over two hours of unsubtitled video. It’s easy to add these, and that’s what we did.

We know it sounds like there’s a lot to work on that you may not have thought of before. Fortunately, there are plenty of great tools out there that you can use to find out what else you can improve. And if you have a website on WordPress, you’ll be happy to know that there is indeed an accessibility team out there that spends their time making WordPress more accessible with each release. But not only the platform sees the importance, Drupal is also working on accessibility, for example.

Do you want to make your website more accessible? That’s great! There are a few things you can do right away. The obvious things that can easily be changed are the use of headings, 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 W3C’s Web Accessibility Initiative 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 for 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 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 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 look very contrasting to you doesn’t mean that contrast is good 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:

Contrast checker for accessibility toolsExample of two colors that get poor ratings for contrast and legibility

It also gives you a contrast ratio value based on the W3C contrast guidelines which think 4.5: 1 is OK. As you can see in this example, the colors I picked are nowhere near that minimum score.

Contrast checking is pretty straightforward. If you want to play around with contrast to find out how it affects visits from people who are color blind, for example, you should check out the Color Contrast Analyzer that comes with a color blindness 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. Like the Color Contrast Analyzer, you can hover your mouse over a website and test a number of color blindness variants:

Sim Daltonism accessibility tool

Descriptive links, alternative text, etc.

The last accessibility tool we’d like to highlight is one that tests how well your content performs when you use a screen reader. 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.

So why should you want to listen to your content being presented on a screen reader? Because it helps you experience 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 alt text will not be described to this site visitor. And non-descriptive links with a text such as “read on” or “click here” do not provide any information about where this link takes you. This may seem like small things, but for someone experiencing these issues it is reason enough to leave your page immediately.

Just one thing

The people at WAVE Web Accessibility have developed a tool to quickly identify many more rights and errors on your side. This is fully automated and requires a human eye to assess which improvements are realistic and which are not. We wouldn’t recommend using this 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 Handbook.

It’s an ongoing process

All of this may feel a little overwhelming, but you don’t have to fix everything today. Knowing what it means is the first step. Now you can 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 feel very unwelcome to a significant portion of your audience. Plus, if you follow accessibility guidelines, you’ll make your website better for all of your visitors.

At Yoast, we are also working hard to make our website and the Yoast SEO plugin more accessible. It’s an ongoing process that requires you to reevaluate any software or content that you publish. The important thing is to keep an eye on accessibility and work to improve it wherever you can. If you want to learn more about accessibility and other important SEO skills, you should check out our comprehensive SEO training.

close

Don’t miss these tips!

We don’t spam! Read our privacy policy for more info.

Leave A Reply

Your email address will not be published.