A Guide to WordPress Accessibility: Making your website usable for everyone

Web Hosting

When building a website, accessibility may not be something that stands out as a required feature. But having an accessible WordPress website allows a users with a disability to access information like anyone else would.

Further, by being inaccessible you may be turning away potential users.

What is Accessibility?

Website Accessibility is the ability for anyone to use a website regardless of physical or sensory impairments.

Impairments/disabilities include:

  • Visual – color blindness, blindness, low vision
  • Auditory – deafness, hearing loss
  • Motor – loss or damaged limbs, spinal injuries, diseases or conditions causing physical motor limitations
  • Cognitive – learning disability, dyslexia, difficulty processing information

A website needs to have certain characteristics to make it accessible to all users.

These include the ability of screen reader software to relay the content of the website to someone that is blind or has low vision.

Someone users are unable to see content that has low contrast. While others may not be able to use a mouse and use only a keyboard to navigate.

Someone with reading difficulties or whose native language is different than yours will have an easier time understanding the information on a website if sentences are short and concise.

Why is Accessibility Important?

Approximately 12.6% of the US population has a disability. A website with poor usability for this group could be limiting access to content for a significant number of people or turning away potential customers.

Everyone should be able to use the internet regardless of impairment.

In addition to helping those with a disability use your website, certain aspects of accessibility improve the user experience for other users too. Those aspects are just a part of good web design. They will improve the experience for all users.

These include intuitive navigation and page layout, easy to read fonts, no auto-play on videos, no flashing images, and high contrast design.

Does Accessibility effect SEO?

Some say that improved accessibility also helps SEO.

Google’s own Search Engine Optimization (SEO) Starter Guide makes no mention of accessibility as a way to improve SEO. But best practices for accessibility have SEO benefits.

Both can be improved by using proper link anchor text, page titles, image alt descriptions, headings (h1, h2, h3, …) and video transcriptions.

The better a search engine can understand the content of your website the better its SEO. Certain techniques used to improve how search engines understand your website improve accessibility.

Does my WordPress website need to be Accessible?

Legally your website may need to be ADA compliant and meet WCAG (Web Content Accessibility Guidelines) guidelines depending on your industry or service provided.

WCAG are a set of recommendations designed to make websites more accessible. They are set by the W3C (World Wide Web Consortium), an international standards organization for the internet.

Government and educational institutions are required to meet certain WCAG standards.

Some high profile companies like Target, Home Depot and Netflix have been sued for their websites lack of accessibility. Granted, having such a large customer base they are far more likely to have a high number of users with an impairment.

Blogs and small eCommerce websites are less likely to be sued than large companies. But that doesn’t mean accessibility should be ignored on these smaller websites.

You may not need to make your WordPress website accessible but you should.

How do accessibility users access your website?

Users with accessibility needs can use your website in several ways.

Visually impaired users may use a screen reader, screen or text magnification, high contrast mode, or refreshable Braille displays.

Those without the ability to control a mouse might use only a keyboard to navigate your website. This requires everything on your website to have keyboard focus.

Using tab (move right or down the page) and shift+tab (move left or up the page) to navigate means everything clickable needs the ability to be accessed via keyboard. The enter key is used to activate (click) links.

For users that can’t use a keyboard or mouse speech recognition software can perform commands for web browsing or use dictation to simulate typing with speech-to-text.

Making WordPress accessible

Increasing the accessibility of your WordPress website can be achieved through themes, plugins and the content placed on the website.

Audio / Podcasts

Audio clips such as podcasts should have transcription. Having a transcription of audio on your website will allow users with hearing impairments to still get the information presented in the audio.

Not only are transcriptions important for accessibility but they also allow search engines to understand the content of the audio. This can lead to improved search engine optimization.

Video

Video should have captions/subtitles. Just like audio, video needs a text version of the information presented. This is especially true if the video conveys important information visually that would be lost on a user that could hear the video but not see it.

SEO benefits come with video captions/subtitles just like they do with audio transcriptions because the information in the video becomes searchable.

Links

Links need to be clear and descriptive. Unclear link text like “Click Here” is not helpful for someone using a screenreader on your website.

When using an image as a link be sure to use an alt text attribute that describes what the link is doing. For example, using an image of a magnifying glass as a search button should have alt text of “search.”

Navigation

Navigation drop down menus that only work by hovering the mouse are not accessible. Menu items need the ability to be selected via keyboard. This can be a problem with some navigation menus.

Images

The alternative text attribute or “alt text” should be used on any image that is not decorative like logos. Alt text lets screen readers tell users what the image is. It also lets search engines know what the image is.

WordPress image alt text attribute

Don’t use “image of…” or “link to…” in the alt text of an image. A screen reader will tell the user its an image and if its a link. Adding those would be redundant.

Graphs or charts that display complex information should use the description attribute to display this information. In the WordPress Media Library select an image and enter the information in the description field.

WordPress image description attribute

Forms

Form fields need to be labeled so a screenreader can inform the user what information needs to go in each field.

Labels are used along with ids to associate the label with a specific form field.

Example:

<label for="name">Your name:</label>
<input type="text" name="name" id="name">

The value used for label and the id must match. That way the label of name will be associated with the input field with an id of name.

Text

Text should be easy to read, easy scan and easy to understand. Paragraphs need to be short and clear for the reader.

Most users scan content instead of throughly reading every sentence. Scannable, easy to digest content is preferable on the web. Meaningful headings between paragraphs helps with this.

Text shouldn’t contain too many images. Makes sure images are functional and not just to make the page look pretty.

Don’t use color to differentiate important text. Use bold or italics for emphasis.

Proper heading tags (h1, h2, h3, etc) should be used throughout posts and pages. However they should represent the structure of the document and should not be used for styling purposes.

Modal windows

Popup modal windows should have a close button that can be selected via the keyboard so the window can be dismissed.

modal window without a close button
Modal window without a close button

Accessibility Themes

The theme installed on your WordPress website controls a majority of how the website looks. Other than the content itself, the theme determines how everything else looks. This includes the header, footer, navigation styling, and the display of pages and posts.

A poorly developed theme will make it difficult for users that need accessible accommodations. Many accessibility issues with WordPress are due to the theme. The only way to correct them is to change the theme.

Many themes in the WordPress theme directory are tagged “accessiblity ready.” These themes can be found by acessing the theme directory, selecting Feature Filter, checking the box for Accessibility Ready under Features.

WordPress themes accessibility ready filter

Although, accessibility-ready does not mean a theme meets WCAG standards.

It just means the WordPress theme review team has determined it meets minimum criteria set by the team.

Themes that meet this criteria aren’t necessarily accessibility focused. It is more of an added feature and the tag is used as an additional search parameter in the directory.

The theme directory isn’t the only place to find accessible themes. ThemeForest, StudioPress, pixelemu, and Webman Design also offer them.

Accessibility Plugins

In addition to themes, accessibility plugins can greatly improve the experience for disabled users.

WP Accessibility

WP Accessibility plugin

One of the most popular accessibility plugins is WP Accessibility. The plugin allows you to add many features to WordPress that improve its accessibility. It fixes many common accessibility problems created by WordPress themes.

Some of the features include:

  • Adding skip links (used to jump over certain parts of the page directly to the content)
  • Allow users to toggle high contrast, text size and grayscale modes
  • Force alt text for images (or specify if they are decorative)
  • Replacing “Read More” links with post titles
  • Add labels to form fields
  • Improve accessibility of the admin area

WP Accessibility Helper (WAH)

WP Accessibility Helper (WAH) plugin

Another popular WordPress accessibility plugin is WP Accessibility Helper (WAH) . It adds a toolbar to your website containing accessibility tools such as the ability to change text size, invert colors, convert images to greyscale, remove animations and more.

Additional features include:

  • Adding skip links
  • DOM scanner to check for errors on pages or posts
  • Disable CSS so that all styles are removed and only the HTML is used
  • Underline links, highlight links
  • Change sidebar position
  • Remove animations

One Click Accessibility

One Click Accessibility Plugin

One Click Accessibility includes a toolbar enabling the toggling of text size, grayscale mode, contrast modes, and underlining of links to name a few.

Other features the plugin adds:

  • Skip links
  • Readable font option
  • Outline focus to elements
  • Remove target attribute from links (makes links open in the same window or tab)
  • Add landmark roles for links (landmarks are used to identify regions of the page)

These are just three of the most popular plugins for accessibility. Others can be found by going to the WordPress plugin directory and searching for “accessibility” or “a11y”(a11y is numeronym representing accessibility).

Accessibility Testing Tools

Testing is used to determine what accessibility errors your website may have.

Testing services and browser extensions usually go into much more detail than what an accessibility plugin can fix. These services might return errors even if you have an accessible theme and plugin installed.

The tests done by these services go much deeper than what can be fixed by a plugin and even some accessible themes. Errors may require changes to theme files which may need to be completed by a developer.

Accessibility Resources

Web accessibility is a deep subject with much many more details than can be covered here. The resources below provide a wealth of information on the subject.

Final thoughts

With the help of an accessible theme and plugin, creating accessible content and using an accessibility testing service you can be sure that all users can use your WordPress website and access its information.

I build and maintain multiple WordPress websites. By using the experience gained from building these sites I help others create and customize their own websites.
Posts created 27

Leave a Reply

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

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top