CAll Us: +1 888-999-8231 Submit Ticket

Assess Your WordPress Theme’s Accessibility with Tota11y

Color CombinationsAccessibility is not often at the front of our minds when we are choosing or designing a WordPress theme. We’re more concerned with aesthetics, functionality, and conversion potential. But ignoring accessibility excludes a huge proportion of our potential users.

Worldwide there are 285 million people with visual impairments, 39 million of whom are legally blind. There are almost as many people with hearing impairments, and a huge number with movement problems that make navigating the web difficult. That’s a lot of people who won’t be able to enjoy your site unless you invest a little time and effort to make it compatible with tools like screen readers.

Unfortunately, accessibility is not easy for designers and developers without training or an awareness of the range of issues that can impact users. There’s a wide variety of factors that need to be addressed if we’re to implement accessibility best practices along with front-end development best practices.

Tota11y, a tool developed by the Khan Academy, aims to make it easier for designers and developers to assess the accessibility of their site. Tota11y is a small JavaScript file that can be included in web pages. It creates a button at the bottom of the page which, when activated, displays an on-screen assessment that highlights accessibility issues.


Among the problems Tota11y can alert developers to are:

  • Non-consecutive headings — Screen readers depend on a clear content hierarchy and offer a degraded experience if the hierarchy is muddled. This point lines up well with both design and SEO best practices too.
  • Contrast — Low-contrast text and page elements make it difficult for visually impaired people to read content and distinguish navigation and other elements from the rest of the page. Tota11y highlights low-contrast areas and suggests color changes.
  • Link Text — Screen reader users depend on the context provided by descriptive anchor text.
  • Image alt text — If alt text is missing, screen readers will fall back on filenames, which are often undescriptive.


Tota11y is not a comprehensive solution for accessibility testing, but it does offer a great way for developers and WordPress users to make sure they’re not excluding a significant proportion of their potential audience.

The easiest way to check your theme with Tota11y is to use the Tota11y Google Chrome plugin, which will inject the necessary JavaScript into any page.

If you’d rather put the code directly into your theme’s pages, you should make sure you follow best practices for adding JavaScript to theme files.

Source link

About the Author