Search the site:

Copyright 2010 - 2018 @ DevriX - All rights reserved.

21 Tips for Building an Accessible WordPress Website

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 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 provide a pleasant experience for all end users. Unfortunately, when it comes to user experience, there is one element that’s often neglected, and that’s accessibility.

According to statistics, 54% 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 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 the aging.

A key principle of web accessibility is flexibility which means websites should be designed and developed in such a manner that they are 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–can 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.
  • Understandable – 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

  • Don’t rely solely on colors to differentiate links and buttons from the rest of the content.
  • Avoid content that can potentially cause a seizure such as animated GIFs or other flashing animations.
  • Design for different viewport sizes and make changes to position and presentation of main elements to maximize the use of available space.
  • 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.

Accessible Text and Content Tips

  • Offer support for braille and large print as well as text alternatives for non-text content such as images, audio, and video content.
  • Use headings to define a page’s subsections.
  • Ensure the content on your site is written in a clear and concise manner and make an extra effort to define jargon, difficult terms, and abbreviations.
  • Ensure that text size and linewidth are set to maximize readability and legibility.
  • Use high-contrast colors for your text and background.

Tips for Accessible Links

  • Ensure links are descriptive and make sense out of context. It’s better for a link to say “Continue Reading Title of the Post/Page” rather than “Read More”.
  • Use the title attribute for links only if the corresponding text is not redundant when viewed side by side,
  • Don’t set links to open in a new window or a tab without user interaction or without providing a description notifying users what will happen.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *