With our ultimate checklist, you will have perfect WordPress accessibility on your website in no time! Learn about all of the accessibility techniques, tools, plugins, and tricks.
WordPress is one of the most highly regarded platforms for many reasons. Hundreds of thousands of people around the globe use WordPress every day. It’s simply because WordPress offers unmatched customizability, control, accessibility, pricing, and reliability. It allows you to create a high-quality website with very little trouble.
One of the most important things they offer is a high degree of control that you don’t see anywhere else. The sheer number of options and features WordPress lets you customize can be overwhelming. In a lot of cases, this level of control can be a bad thing. Many beginners overlook aspects of their site when they get overwhelmed.
A commonly overlooked aspect of a good WordPress website is accessibility. Accessibility is a crucial feature of your WordPress site because it heavily affects user experiences. Nowadays, accessibility is more of a necessity than a privilege for websites. Thus, it should be one of the first things you focus on when creating your website.
Accessibility can benefit your website in countless ways when done right. An accessible website will allow for more traffic and user retention. It can also help people grow to live your site and come back. Accessible websites are also more optimized and secure compared to non-accessible ones. Though there is an even bigger reason you should care.
Every year there are hundreds of accessibility-related lawsuits on businesses and websites. By not following the guidelines for accessibility, websites have faced lawsuits that have cost their businesses. Following these guidelines are an absolute necessity if you want to run a successful website. This is why you absolutely cannot miss out on accessibility
Although accessibility may seem like a tedious matter, it isn’t. This guide, made for all beginners and experts, will cover everything you need. By the end of this ultimate checklist, you will have every major accessibility feature and setting tweaked. Just follow our simple to understand accessibility checklist, and your website will be fully accessible.
Accessibility is a broad category of topics and features that range in complexity. There are countless things you can tweak and tune on your website to improve accessibility. These features and settings can range from changing your entire theme to adding a few links. However, we have the perfect solution for you!
Labinator offers top-of-the-line WordPress services that can improve your site for you. Labinator’s web experts can tweak your website’s accessibility to perfection without you having to do any of the work. It’s the best auto-pilot service for all of your WordPress needs at the most reasonable price. You can check out their auto-pilot service here.
Before we get started, I should explain a few basic concepts and prerequisites. The Worldwide Web Consortium (W3C) handles all of the matters related to website accessibility across the internet. They have created the basic guidelines for all accessibility practices and policies. This guide will follow their gold standard to get WCAG 2.0 AA.
WCAG 2.0 AA is the second level of the W3C accessibility rating system for websites. It is the recommended requirement for all websites to improve their accessibility. You can try to get Level AAA if you want, but Level AA will suffice for most websites. This guide will cover everything you must improve/tweak to conform to WCAG 2.0 AA.
Before we start the accessibility checklist, you should follow the following pre-requisites, because they ensure your website’s safety. The changes and tweaking mentioned in this guide can heavily impact your site. The steps laid out in the checklist must be taken with caution and safety. So make sure to follow all of these pre-requisites.
Firstly, back up your entire WordPress website before you change anything in it. A simple backup can fix most problems and give you a checkpoint to return to if anything goes wrong. Backups should be a step you take every time before changing anything on your website. You can do this by using the default WordPress backups or a plugin.
If your website is already published and has traffic, you should switch to maintenance mode in WordPress. Maintenance mode makes your website inaccessible for users while you work on it. It creates a splash page that shows that your website is being changed and allows you to keep users updated on the status. If you want to learn how to enable maintenance mode, follow this guide on maintenance mode.
Lastly, you should find the login and access to your cPanel and hosting account. These two accounts will be necessary because we will be using the provided tools to make changes to your website. The settings and tools in cPanel are a necessity when making substantial changes to your website. Your hosting account can also provide access to vital settings and tools.
Now that you know the basics of web accessibility and have followed the prerequisites, we can start with the checklist. In the next section, I will cover the simplest thing you change to optimize for accessibility. It may seem like a small step, but it will have the biggest impact on the accessibility of your website.
The first thing on our checklist for accessibility will be your WordPress website’s theme. Themes are the foundation for WordPress websites and have the most impact on your site. The quality of a theme can be the difference between a good website and a perfect one. Thus, choosing a theme with accessibility features is crucial for your website.
You should look for themes with layouts and designs that are easy to navigate and simple. Your WordPress theme should have support for all devices and users. The theme you choose must have compliance with WCAG 2.0 AA. When choosing a theme on WordPress Themes, you can filter themes in the database by ones that are “accessibility-ready”.
When choosing a theme, you should find one with compatibility with all types of devices, languages, and plugins. RTL (Right-to-Left) Languages support will allow you to create a website available for nearly all languages. AMP Support can also make mobile support for your website easier to handle.
Lastly, your theme should have compatibility with page-builders like Elementor. This is not a requirement, but it helps when creating and designing your website. Support for extra customization as well as well-optimized performance can also be crucial for choosing your theme. An accessible theme is not good if it isn’t also well-coded and optimized for performance.
If you are still having trouble looking for an accessible theme for your website, then I have the perfect solution for you. Labinator’s Nanospace is the perfect theme for all types of WordPress websites. It provides unparalleled accessibility, performance, security, optimization, and customization. The best part of this theme? It’s completely free.
It provides a clean and easy-to-use design as well as an easy-to-navigate layout. Nanospace’s layout/design is perfect for most WordPress websites, ranging from stores to art galleries. It also provides blazing-fast performance with a WCAG 2.0 AA rating and support for RTL languages. So why not try out this stunning theme for completely free.
In the next section, I will talk about the various tools and plugins you should install along with your theme to improve your website’s overall accessibility. These include various plugins, testing tools, and other various things. There are also some things that you should learn to avoid before you add them to your website.
A good theme will do 85% of the work for website accessibility. However, you should also make use of accessibility plugins and tools to further aid you in improving your website. These tools can drastically help you build your website more efficiently and improve your website’s overall accessibility. These tools can range from testers to plugins and much more.
Accessibility plugins will be the greatest help because they directly improve WordPress’s accessibility features. There are hundreds of good accessibility plugins out there, but you should only need a few. A great way to find these plugins is to go to the official WordPress Plugins page and then sort the plugins by “Accessibility”.
The next thing you should look for is a testing plugin or tool for accessibility. These testers will be useful because they show which parts of your website will work for users using screen-readers, keyboard-only, mouse-only, and more. They can give you a good idea of what you may need to improve on and change. A very good tool to start with is axe DevTools, because it provides a large array of vital features.
Once you have a good set of plugins and a testing tool, you will almost be ready to tweak your website. Though there are also a few things you should still look out for when creating your website. When looking for page-builders and WordPress plugins, there are things that you must avoid to optimize for accessibility.
When looking for a page-builder, make sure to use a well-coded and trusted one like Elementor. You should always test out the page-builder and its features before you fully commit to it. Furthermore, you should always avoid interactive features like drop-down menus, animations, and pop-ups. These non-static features will always cause some accessibility problems, so I recommend avoiding them.
Furthermore, I can also say the same for many interactive and decorative plugins that add features that aren’t static. Anything that causes an interruption or shows movement can cause problems for people using assistive devices. They also diminish the reading and viewing experience for the user. If you want to use these plugins, then you must provide them with a lot of testing and configuring.
Lastly, form plugins also tend to be a real hassle when it comes to accessibility. You need to thoroughly test and configure your forms before you publish them on your website. You need to disable the right features on your forms and make them readable by assistive devices. Custom-coded forms are common in websites for this reason, but you can still use a plugin if you test it well.
In the next section, I will cover your website’s layout and menus. Your website’s layout and menus are crucial for navigation and organization. They can help accessibility by providing an easy-to-use interface on your website. The theme does the bulk of the work there, but you can still tweak a lot to improve your accessibility further.
The third thing I will be covering in this guide is your website layout and navigation. These two subjects are vital for creating a site that anybody can access and use. They go hand in hand to create a user experience that is both easy and intuitive. To improve these, we must start with the overall layout of menus and content on your website.
A good theme will make this job a lot easier but, there is always something that you can improve. Firstly, your website should have a clear, simple, and easy-to-understand layout. It should be intuitive like other websites so that people will know where to find what without even visiting your website. Your website’s layout should be conventional and easy to understand from the moment someone visits your site.
Furthermore, you should focus on improving the menus on your website. The menus on your website should be categorized in an easy-to-understand manner and, they should be easily accessible throughout your website. If you make a menu that only shows when you hover over it, keyboard users cannot use it, making it non-accessible.
Make sure that your menus can be accessed by both mouse and keyboard users. They should also feature things like a search bar to make navigation easier. However, you shouldn’t also litter your menu with unnecessary links and pages. To avoid confusion, you should only put the important buttons and pages that users will need.
Ensure that your website does not have any menus using hovering options or text since keyboard users cannot access those. Drop-down menus can be a good choice, but they can fail for keyboard-only users sometimes as well. This feature mainly depends on your theme, so make sure to choose one that supports drop-down menus for keyboards.
Furthermore, your website’s layout should avoid all types of pop-ups and unnecessary notifications. These can get in the way of users trying to access the content. They can be very intrusive for readers and diminish their user experience. If you place ads on your website, make sure they are also not pop-ups or intrusive to the user’s experience.
Your website should also make use of proper headers on every single page. Headers are a way to organize the content on a page easily. They also provide users with a better understanding of what each section of a page is about. Make sure that there are proper headers on every page that accurately describe what is in that section of the page.
Lastly, your website should have well-coded section divisions. This means that each section on a page should be marked with the right HTML and CSS tags. The sections on a page should be divided correctly and labeled as well. Using ARIA labels with each section will allow for landmarks that people can navigate to.
Ensure that all of your buttons and links can be used with screen readers and assistive devices. Important buttons and links should be in accessible places and easily found. Links in your website should clearly describe where they link to. Make sure that your theme has a “Skip To Content” link to make navigation for users easier.
In this section, I will go over the actual design/content of your website. I will show you how they should create a user-friendly experience. Many things will be covered, ranging from fonts and text size to color contrast and alt-text. It will be the largest section and include the most in-depth details, but it will provide the best results.
The first thing I will cover here is the use of contrasts on your website. Your website’s color contrast should be fairly strong so that people can pick out the background and texts. Adequate contrast is a necessity because many people have varying types of monitors and vision problems. You should also make use of contrast in other areas.
When you create a link or special text on your website, it should stand out from the rest of the text to show a perceivable difference. If it’s a link, then changing colors is not enough. You should make use of bold and italic text to emphasize certain text or links. This can help people easily distinguish parts of the text from each other. Using the contrast between the background and button can also help buttons stand out.
The next thing on the checklist for accessibility is the text itself. You should start by picking out the right fonts for your website. Your fonts should always be sans or sans-serif because they are most readable. You should avoid cartoon and cursive fonts for most things except logos. I would recommend picking fonts from the Google Fonts collection.
Font size is also a crucial matter because it heavily affects readability. Most of your text should be in 16px font size, but I recommend using resizable fonts. You should pick a theme that supports the resizing of text to new sizes without breaking the layout. This can be tested if you open your website and use your browser’s text resizing tool.
The next thing regarding the text that you should improve is alt-text. Most websites use a large number of images, sounds, and videos. You should go to your Media folders and assign alternative text to the media. You should provide alt-text that describes the media being displayed. Alt-text should be present for most of the images and media used on your website.
However, there is no need for using alt-text in any pieces of decorative media. Something like a simple logo or background should not have any alt-text. If something is displaying useful information or something of value, then you should assign it alt-text. Make sure that your alt-text works correctly by turning off images in your web browser.
The next few things I will cover for text are short-hands, acronyms, and abbreviations. I recommend using as few of those things as possible when writing your website. They only provide more confusion for the reader, as most new readers may not know the terminology. Screen readers also have a lot of trouble with reading these. You should focus on writing with clarity.
The next things on the list are contact forms. They are used on almost every website these days, so you should improve yours. Most contact form plugins and page-builders do the heavy lifting for you, but I would still try to improve them. You should describe each field in the form tool and make it easy to fill out. You should also add custom styling for bigger fonts and more contrast. Lastly, you should place the form at an accessible part of your page.
You should strive for something similar to Option 4 in this image:
Next up on the list are videos, animations, and sound files. You should always provide these elements with alt-text as well. Then make sure that they never automatically play when the page is viewed. You should always add controls for playing, pausing, and volume. You should also add captions for all of the videos on your website.
Finally, you must disable anything on your website that causes an interruption or flashes. Flashing is a very dangerous threat to those with vision problems. Intrusive and interruptive features like notifications, certain ads, new windows, and pop-ups are very problematic. Always try to limit these from your site as much as possible.
Before I move onto the last section, you should address any last concerns with the documentation. WordPress and W3C have already built documentation that covers everything you need to know about accessibility on WordPress. The Theme Accessibility Standards and Accessibility Coding Standards have everything you possibly need.
The last thing I will cover in this ultimate guide is testing your website. Testing is crucial for success in any area when you are creating your website. Once you have tested your website thoroughly, you will able to tell if it is accessible or not. It may seem difficult if you do not have a testing plugin, but all you have to do is follow these simple techniques for testing your website.
To test your website, the best thing is to disable some features and only use your keyboard. Go to your browser’s Settings page, then disable images and videos. Then grab a plugin for your browser to disable Style Sheets. Lastly, you should put away your mouse and only use your keyboard to navigate the page.
You can also make use of the testing plugins mentioned before. They can give you some helpful insight into what you should improve on. I still highly recommend using the techniques mentioned before, because they give you the best idea of what your website might look like to someone. I would also recommend using a voice-over program like NVDA to see if your website is readable.
In conclusion, you may think that accessibility is a difficult process, but it isn’t. Even though there are many steps and things to consider, all you need to do is follow our simple guide. Once you have completed this guide, your website should be fully accessible for nearly all users.
If this ultimate guide helped you, then you check out more awesome ones here! If you want high-quality WordPress products and services, we have the perfect solution for you.
Labinator provides stunning themes, feature-rich plugins, expert services, and more, all for affordable prices. They also give you a 30-day money-back guarantee that comes with 24/7 customer support and lifetime updates.
Best Collection Of WordPress Guides & Checklists
Our complete and latest collection of WordPress guides and resources that cover everything you need to get the most out of your WordPress website.
All of our guides will be sent to your inbox
All Your WordPress Needs In One Package