21 Tips for Building an Accessible WordPress Website

Working as a web developer is incredibly rewarding. There is no greater satisfaction than taking your client’s vision and turning it into a beautiful, functional website that fulfills their needs and generates more business. Making sure the website is responsive, loads fast, and follows SEO best practices on top of an attractive design is important, but it’s not where a developer’s job ends.

No matter what kind of website you build, it should meet your client’s goals and leave visitors more knowledgeable and satisfied. Unfortunately, when it comes to user experience, there is one element that’s often neglected, and that’s accessibility.

According to statistics, 75% of all disabled adults use the Internet on a daily basis in the United States alone, and that percentage grows even more when you look at the number of users with a disability on a global scale. Looking at those numbers, it’s clear that accessibility should not be ignored or considered as a mere afterthought.

If you’re curious as to what web accessibility is and why it matters, we’ll explain it all right here and share tips for building accessible WordPress websites.

What Is Web Accessibility?

Web accessibility allows people with disabilities to access and use the Web. According to W3C:

“Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.”

It relates to all disabilities that can impact how people interact with the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. It also pertains to people with temporary disabilities such as a broken arm, people with a slow internet connection as well as elderly people impacted by the changes due to aging.

A key principle of web accessibility is flexibility which means web development and design needs to be flexible enough to adapt to various users needs, preferences, and situations.

Because of this flexibility, even though web accessibility aims to make the web accessible to people with disabilities, it benefits all of us, including people in developing countries who don’t have high-speed internet, users on mobile devices, and elderly people.

Why Accessibility Matters?

The Internet has become a large part of our everyday lives. We use it to find information, read the news, do our shopping, interact with our friends and family, conduct business, pay bills, and more.

Given its role, it’s crucial for the Web to be accessible to everyone – regardless of their status or ability – to have equal access to it. In fact, web accessibility is considered to be one of our basic human rights, according to the UN Convention on the Rights of Persons with Disabilities.

From a business perspective, an accessible website means you can reach a bigger customer base and provide them with an optimal user experience. It also means you can avoid a legal backlash if your website doesn’t adhere to accessibility guidelines and avoid any damage to your company’s image as a result.

In short, any website that serves the general public, such as a government, education, or large organizations and corporations that cater to a broad audience should pay special attention to accessibility and ensure their website follows the recommended guidelines.

Tips for Building Accessible WordPress Websites

According to the Web Content Accessibility Guidelines, an accessible website must have content that is:

• Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
• Operable – User interface components and navigation must be usable no matter what device or method is used to access them.
• Comprehensive – Information and the user interface (ie. navigation, links, forms) must be understandable by all site visitors.
• Robust – Content must be robust enough that it can be read and understood reliably by a wide variety of user agents, including assistive technologies.

The four points mentioned above are the core principles of accessibility. If only one principle is not respected on your website, then the website itself will not be usable by people with disabilities.

In line with the principles above, there are certain rules you need to follow when designing and developing accessible WordPress websites.

General Accessibility Tips

To make sure you have an accessible website, you need to follow a few simple general rules.

First, don’t rely solely on colors to differentiate links and buttons from the rest of the content. Second, avoid content that can potentially cause a seizure such as animated GIFs or other flashing animations. Third, design for different viewport sizes and make changes to the position and presentation of main elements to maximize the use of available space.

Finally, avoid CAPTCHA where possible since they create problems for many people. If you cannot avoid it, provide several ways to solve them or avoid requiring CAPTCHAs for authorized users.

By following these tips, you can make your WordPress website more accessible to a wider range of people.

Accessible Text and Content Tips

When creating an accessible WordPress website, it is important to offer support for braille and large print as well as text alternatives for non-text content such as images, audio, and video content. In addition, headings should be used to define a page’s subsections.

Furthermore, the content on your site should be written in a clear and concise manner and you should make an extra effort to define jargon, difficult terms, and abbreviations.

Additionally, text size and line width should be set to maximize readability and legibility. Lastly, high-contrast colors should be used for your text and background.

Following these tips will help you create an accessible website that is welcoming to all users.

Tips for Accessible Links

When it comes to the importance of links on a website, they need to be as descriptive as possible, and that’s for all the users out there as well as for the sake of good SEO. However, here is a little more information on how to make links on your WordPress website accessible and compliant with the needs of the disabled.

How Do Individuals with Disabilities Use Links?

As more and more people utilize screen readers and other assistive technologies to access the web, it is important for website designers to create accessible websites. One way to do this is to ensure that links are properly formatted.

For example, when creating a list of links, it is important to include the link text as well as the surrounding text. This allows screen reader users to obtain all of the information they need in order to make an informed decision about which link to follow.

Additionally, it is important to format links so that they can be easily accessed by keyboard-only users. By including the link text and ensuring that links are properly formatted, website designers can create accessible WordPress websites that are accessible to everyone.

In addition, for those suffering from colorblindness, colors can be hard to distinguish. This can pose a problem when using technology, as many pages rely on color cues to indicate links. Without these cues, it can be difficult to navigate a page. To help address this issue, many pages now include underlined links. This simple change can make a big difference for colorblind users, as well as those who are less comfortable with technology.

By including both color and non-color indicators, pages can provide a better experience for all users.

Link Text

Link text is the visible, clickable text in a hyperlink. To make sure you create an accessible WordPress website, it’s most important for link text to make sense without the surrounding sentences or content. The link text alone should convey the function and purpose of the link. Link text should also be unique and easy to speak out loud.

Consider these guidelines when writing link text:

Avoid generic link text like “Click Here,” “More,” and “Read More.”

Use a unique link text where feasible. Duplicated link text may create difficulties for speech recognition software users.

Avoid writing lengthy link texts that may be truncated when read aloud.

Image Links

Usually, using image links is not recommended, especially if you want an accessible website. After all, as a content editor, one of the most important things you can do is ensure that your website is accessible to everyone. This includes people who are blind or visually impaired, as well as those who are using screen readers.

However, when that’s the case, it’s important to include alt text that accurately describes the link destination. Simply including a brief description of the image itself is not sufficient. Remember, the goal is to treat image links as links, not as images.

By taking this approach, you can help ensure that your website is accessible to everyone.

Adjacent Links

By having multiple links to the same destination next to each other, pages are giving assistive technology users a bad experience. This is because they have to navigate through several links instead of just one.

It would be much easier if there was only one link. This way, the user can access the information they need without having to go through multiple links. If you must have numerous links, pick one item to be the link or wrap all items inside of one link. The user will find it easier to access the information they require as a result of this.

Tips for Accessible Interactive Elements

• Buttons and menu items (including drop-down menus) should be accessible via keyboard and mouse. Ensure visitors can select and highlight them using both.
• Make sure the navigation is accessible with a keyboard and include skip links at the top of each page.
• Every form field should have a corresponding label. Additionally, make sure to offer input assistance with a warning and/or confirmation messages that are easy to recognize even for people who are color blind.
• Avoid setting media elements such as video, audio, sliders or carousels to autoplay or change action without user interaction,
• Use tabindex to add an element that does not normally receive focus, such as <div> or <span> into the navigation order when it is being used for interaction.
• Use scripting to facilitate capturing and responding to keyboard events.
• Describe any downloadable media such as PDFs, documents, audio or video content and the accompanying buttons that might trigger the download.
• Provide transcripts, captions or sign language with any audio or video content.
• Include meaning with WAI-ARIA for non-standard interactive elements such as accordions, tabs or custom buttons and their function and state.

Final Thoughts

Building an accessible WordPress website requires some additional steps in your workflow but the benefits cannot be ignored. Use the tips above to help you with your next project and make your contribution to developing a more accessible Web for everyone.