Building Accessibility Into Your Layers Child Theme

Dev Tutorials

Since: 1.2.13 Last Updated: Time to Read: 6 minutes

Layers is not designed around WCAG standards. We do have plans to implement full ARIA in the near future, and will evaluate whether we can implement 100% of WCAG standards without sacrificing functionality. As it stands now, WCAG is something we leave up to designers to implement via child themes as it is a very specific requirement.

The Web Content Accessibility Guidelines outline everything needed to make your site content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photo-sensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.

WCAG 2.0 standards are currently broken down into four key principles:

  • Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
  • Operable: User interface components and navigation must be operable.
  • Understandable: Information and the operation of user interface must be understandable.
  • Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

As they are stated, these principles are rather broad and apply to Layers sites already. However, each speaks to very specific ways elements and functionality on the page interact with the browser and how well they support things like screen readers, high-contrast viewing, and so on.

This article offers ways you can achieve the goals set forth by these principles by using plugins, external services, or direct template enhancements in your child theme.  Due to the nature of WordPress and the many other plugins you may be running, it probably won’t be possible to hit every single guideline recommended in the WCAG, but you can get pretty close.

To put it in basic terms, perception governs how users can navigate and consume your content. A person without disabilities can usually tell where the UI elements and links are, read your text and view multimedia and hear sound. Someone with accessibility needs requires an alternative means of perceiving these elements.

Ensure Images and Video Contain Alt Text

This step has more to do with how you manage content on the site than it does how you code a theme – WordPress and Layers already have support for alt text, but it needs to be entered by you. When uploading media to the Media Library, always add a Title and Alt Text or ensure these fields contain readable values. Descriptions can also help, for example a photo of a mountain climber on  a mountain might be described for the visitor as, “John McCabe hangs 1000 meters over a sheer drop while scaling Mount Kilimanjaro and waves to the camera while gripping the rope.”

Video content, especially content that delivers instruction, should be accompanied by a text transcript, sub-titles or sign-language.

Use High Contrast

Visually impaired users have special needs with regards to contrast and color, to help them discern where links and UI elements are. For example, an orange button on a green background might be invisible to someone with color-blindness. A light blue button on a purple background may be invisible to someone that cannot tell one hue from another.  Light gray text on a white background may be impossible for some people to see well.  Using high contrast such as black and white, red and yellow, and so on helps readability for these users. Visit Contrast Rebellion for some excellent examples of common problems and how to solve them.

Make Fonts Readable

This goes hand in hand with contrast, but pertains more to the font size and type. Avoid fonts with light weights, condensed fonts or fonts with very narrow parts that can disappear when scaled down. Sans-serifs are the easiest to read, and while Layers uses a readability formula to calculate the font sizes in your widgets and content, you may find upping the .story p  to 2.2rem or reducing the .story  width to a max of 650 helps a ton.

Plugins:

Both Yoast SEO and SEO Friendly Images are two plugins that greatly assist with adding alt text and scoring accessibility for mutimedia.

GSpeech is a text to speech solution for WordPress that uses Google power to provide your visitors with automatic text-to-speech functionality.

The WP User Stylesheet Switcher allows visitors to click on a dropdown menu to select a special high contrast color scheme you create in a custom stylesheet.

The Accessibility Widget adds functionality allowing your visitors to change the text size on your site or the Zoom plugin makes it simple for users to resize predefined areas of your site.

Avoid gifs, text animations, video or sliders that flash less than three times per second.

Operable

This goal covers how well your site can be used from assistive technologies such as screen readers or special browsers.

WebAIM offers a great overview of keyboard navigation  and how to test it on your site. You can install Accessible Dropdown Menus to allow site visitors access to menu options via the keyboard and  Accessibility Access Keys  creatse site-wide access keys to make for easier user navigation if needed.

This includes clear titles, sequential ordering, contextual linking, multiple link paths, and descriptive headings. An SEO plugin such as Yoast SEO is the most helpful here, as it guides you through optimizing titles, links and summaries. It will also help you create a sitemap that screen readers use to allow for quicker site navigation.

Understandable

This means use plain language and avoid overly conceptual design that depends on intuition or creativity to “solve” or navigate. An example might be a site that uses uncommon verbs in place of mundane page titles, ie “Opuses” should simply read “Portfolio”

It should be written in a clear and concise manner with the language clearly identified and word choice that could easily be read aloud by a computer voice. It’s also a good idea to define jargon, difficult terms, and abbreviations.

For example, on our site here we use the CM Tooltip Glossary plugin, to build a directory of technical terms that can be read on hover, by screen-readers, or searched for directly in any case where the reader isn’t familiar with the term.

Layers goes through great lengths to enforce this principle already, but it is important to ensure an accessibility-driven site is as straight-forward and familiar as possible. This means pages follow a top-down flow and contain limited, topic-specific information, and that asides such as sidebars or after-post information is minimized and uncluttered. Navigation should be predictable and look the same on every page. Avoid animations, modals or other “fancy” design elements that may not render properly on alternative devices.

This is where code comes into play and where your child theme does the most work. The addition of ARIA in the template framework and any custom HTML you introduce helps assistive technologies properly render or transcribe what it’s reading.  Once your site design and context zones are established, these landmarks can be as simple as adding role attributes to the element wrappers to define each one. Example:

The WP Accessibility plugin covers so many of the guidelines mentioned above and can replace many of the plugins already mentioned. It is designed specifically to make a site meet the WCAG by helping you modify your active child theme and will also fix several accessibility issues that are currently present in WordPress.

How to Improve WordPress Accessibility

Overview of WordPress Accessibility challenges by WP Tavern