If there’s one thing about the internet that stands out to the majority of users, it’s the sheer amount of accessibility it offers. Unfortunately, this accessibility isn’t enjoyed by everyone. This is because not everyone is able to take advantage of these website management features.
When you were first creating your WordPress website, you might not have even considered accessibility.
Besides, how much do you really even need to consider accessibility to make a website that’s functional for most people?
Well, the main issue with this mindset is that it isn’t very inclusive. And in this day and age, inclusivity is a key principle for success in online marketing.
Approximately 15% of the world’s population has disabilities. Therefore, team members who are involved in the design process will need to design the website to be as accessible as possible. The benefits don’t just include better numbers, PR, or loading speeds. The main advantage is that more people will have access to the great content that you create.
Thankfully, WordPress does a great job of providing website management tools to make your site more accessible. They even have a team that’s dedicated solely to this task. The responsibility still lies on web admins to take advantage of these fantastic tools and utilize them to create a professional and presentable website.
So, let’s start by breaking down the ten most common accessibility issues on WordPress websites and how to address them.
Every WordPress website must have appropriate color contrast. Also, it’s important to keep contrast in mind when choosing color shades for your website layout.
A surprisingly large number of people have difficulty with specific elements of an interface. Poor color contrast and confusing text can make comprehension even worse. To prevent confusion, the text should be clear and easy to read. Checking through various contrast combos is recommended before putting your content online.
A website must have appropriate text font-resizing. What does this mean? It simply means giving users the flexibility to increase the size of the overall text to help them read the information better.
Thus, elements that contain text should be able to expand vertically to serve this function.
It’s very common these days for websites to have automated media playing. This means that any website with playable media, including videos and GIFS, will start playing automatically, and sometimes this even includes audio.
However, this advertising method can be annoying for many users, which is why it’s recommended to let users manually choose how they want to play media. There is also the side benefit of pages being able to load faster. And for those with slower internet connections, a website with less stuff to load will work better for them.
Use Alt Text
Many websites have an overload of videos, images, and audio that can make impaired users feel overwhelmed. This is especially true if they are using accessibility tools.
Rather than using videos, images, or audio for everything, you can instead use another method of conveying information, known as “alt text.” Aka alternative text, this will make it easier for impaired individuals to interact with your website content.
Using backend website management tools, you can add alt text to your visuals for screen readers, and search engines, to read what is one your website.
Forms are incredibly versatile tools. They allow users to present their information to a website, whether it’s related to finance, personal matters, or even just for simple questions.
Due to how many people interact with website forms, you’ll want to make sure that you provide as many accessibility tools as possible (aka form plugins).
WordPress provides plenty of excellent plugins, but when it comes to accessibility, you may not find exactly what you want unless you custom-code it yourself.
A common feature of many website forms is self-termination or timing out. This means that an incomplete form will refresh the page after a certain period, forcing the user to start over again. This is a feature related to privacy and security, especially for forms that require financial input.
However, many impaired users cannot complete a form before the timeout. So, it’s worth considering extending the time available to complete the form or giving them plenty of warning before the form expires.
Clicking links is how most internet users navigate from page to page or website to website. However, links won’t always be clear to a person with poor vision or someone using a screen reader.
An example of a link that might not be great is a hyperlink with text saying “click here.” That phrase is not at all descriptive of where the link will take the user. Links should be as self-evident as possible. Any user who clicks the link should automatically have a general sense of where they’ll be brought before clicking.
Keyboard Friendly Website Navigation
Many users actually just use a keyboard to navigate around websites. This is often due to necessity. So, during your accessibility redesign, try playing around with keyboard navigation. Are you able to complete all of the important functions with just a keyboard?
Also, think about how much the keyboard can focus on specific elements that a user might like to check out.
Screen Reader Friendliness
Speaking of navigation, as a WordPress webmaster, you must also consider accessibility options that cater to people who use a screen reader. These options include skipping links at the top of webpages, ARIA roles to easily jump between different sections, and HTML5 landmarks.
A perk that screen readers have is being able to jump between different links on the same page. Therefore, you’ll want to have aria-label attributes and text specifically for screen readers. That alone will make your website much more accessible.
And finally, one of the strongest tools for WordPress accessibility is HTML markup.
For instance, semantic markup lets the code better describe what the content it consists of is about. Do your best to not repeat IDs on a page whenever possible. Also, try to prevent linear heading level usage. Ensure that you always put H1s/H2s before using H3s.