WordPress Accessibility: WCAG Content Best Practices

Is WordPress ADA Compliant?

WordPress accessibility encompasses various aspects of web design and functionality to ensure that websites are accessible to individuals with disabilities. WordPress as a content management system does not inherently guarantee ADA compliance, but it does provide the foundation for creating accessible websites.

However, while web developers can build WordPress websites to be ADA compliant, the responsibility lies with the site’s administrators to maintain accessibility standards in design, content, and functionality. Choosing an accessible theme, utilizing plugins with accessibility features, and creating content with WCAG best practices are essential steps towards keeping a WordPress website ADA compliant.

Can’t I Just Use a WordPress Accessibility Plugin for ADA Compliance?

Unfortunately not. While adding a plugin can help improve the accessibility of a WordPress website, achieving full ADA compliance involves more than just installing a plugin. If future content on your website is not made to be accessible, your website can fall out of compliance.

How Do I Make My WordPress Site More Accessible?

In addition to regular technical audits, the best way to keep your WordPress website ADA compliant is by following web content accessibility guidelines (WCAG). Accessibility is an ongoing process, and each new piece of content or website update introduces the potential for barriers to accessibility. Regularly reviewing and updating content for accessibility means that individuals using assistive technologies, such as screen readers, can navigate and comprehend the information effectively.

WCAG Best Practices for Accessible WordPress Website Content

To help maintain your WordPress website’s ADA compliance, we’ve created a comprehensive guide of WCAG best practices tailored for creating inclusive content. From crafting meaningful alt text to heading structure, each section addresses a crucial element in the pursuit of web accessibility excellence.

WCAG Best Practices for Images

Write Good Alternative Text or “Alt Text” for Your Images

Users who are blind or who have low vision often make use of screen reader technology to use their computers and browse the web. This type of assistive technology converts text to speech so that a user can hear the words on a site, or feel them via a refreshable braille device. When a screen reader lands on an image, it looks for alternative text (alt text) that it can read aloud; if it finds none, it will often just say “image,” leaving the user in the dark as to what the image is and how it matters to the story. Alt text is also beneficial for its SEO value, as incorporating keywords into your alt text may even help your content rank better.

How to Write & Add Alt Text to Images

Please ensure that all non-decorative images in the media gallery have alt text. This text should describe the content of the image and can be added through the media gallery. Decorative images (like icons) do not need alt text because they’re simply supplemental to page content. When writing the alt text, avoid saying “A picture of” as screen readers already announce that it’s an image. Within the media gallery, select the image you’d like to add alt text to, and within the modal add the text to the field labeled “Alternative Text.”

Alt Text Example:

If you are using an image of text, be sure to describe the design if relevant, as well as all of the words in the image. (Ex: Whiteboard drawing of the quote “Nothing for us without us”)

Complex Images Must Have a Description

Complex images generally contain text (like an infographic or chart). Since a screen reader cannot read the text on an image, there needs to be a description of the information communicated on that image so the screen reader can convey that contents of the image to a user. This description can either live on the page with the complex image, or live on its own page. 

How to Write & Add Image Descriptions

In addition to the alt text added within the media gallery, there should also be an on-page text description of what is represented in the image. Once the description is written, we recommend adding an Accordion Block below the image, and paste the description into the Content section of the block. We recommend a heading like “Read Image Description” for the accordion.

Important Information Should Not Be Conveyed Through Images, Color, Or Sensory Characteristics Alone

You should not rely solely on images, shape, size, visual location, orientation, or sound to indicate important instructions for operating or understanding content (ex. “See the image above”).

Instead, use a combination of positioning, color, and labeling to identify content. There should be another indicator (such as icons to accompany color coding, or an underline on linked text) so that people who cannot easily distinguish colors will be able to understand and use your content.

WCAG Best Practices for Text

Headings Should Follow a Logic Structure

While many page templates follow a logical structure of headings, to provide an analogy for ease of understanding, think of your website as a book. Each page on the website will have a main heading (an H1), just like each book has a title. Under the title, there are chapters, or sections of content related to the main heading or purpose of the page. Those section headings are H2s. Under the H2s or chapters, if information can be organized further, you can have H3s and even H4s. If content can’t be organized further, you’ll have another H2 for another section of content. 

Proper Heading Structure Example:

Example: Web Content Accessibility Guidelines (WCAG).

Be As Consistent & Clear As Possible When Writing Content

Be clear in copy, avoid jargon and idioms, and use section headings to organize content. When you use abbreviations, make sure to write out the whole name first with the abbreviation in parentheses.

WCAG Best Practices for Videos

Video Captions Must Be Provided Within Content

Captions are similar to dialogue-only subtitles except captions convey not only the content of spoken dialogue, but also equivalents for non-dialogue audio information needed to understand the program content, including sound effects, music, laughter, speaker identification and location.

How to Add Video Captions 

Most video platforms allow video owners to provide captions (closed captions are acceptable). If closed captions can’t be generated on the video, captions must be accessible on the web page.

• For YouTube videos, simply enable closed captions through the YouTube admin area
• Or once the closed captions are written, we recommend adding a Content Accordion Block below the image, and paste the description into the Content section of the block. We recommend a heading like “Read Video Captions” for the accordion.

Provide Video Transcripts

Transcripts are the text version of media content, and serve as a text alternative for videos. These are needed for users who cannot interact with the video. 

How to Write & Add Video Transcripts

Include a transcript of the video directly on the page or provide a link to the page which contains just the transcript. If the video has been uploaded to a video platform like YouTube, you can copy/paste the captions from that platform and rework them (paragraph format with proper grammar) into the transcript of the video.

Once the transcript is written, add the Accordion Block below the video, and paste the description into the Content section of the block. We recommend a heading like “Read Video Transcript.” 

Video Transcript Example:

Here’s an example of a video transcript on our website!

Provide Audio Descriptions for Videos

In addition to the captions and text version of the video, an audio narration describes what is happening in the video. These are intended for users who are blind of low-vision.

Full descriptions are provided of all visual information, including visual context, actions and expressions of actors, and any other visual material. In addition, non-speech sounds (laughter, off-screen voices, etc.) are described. 

How to Add Audio Descriptions to Videos 

Add an audio description for each video on the website or as part of the video. Once the audio description is produced, add the Accordion Block below the image, and paste the description into the Content section of the block. We recommend a heading like “Listen to the Audio Description”

Audio Description Example:

This video provides a good example of what an audio of a video should include: https://www.youtube.com/watch?v=B8BD9txkGL4

WCAG Best Practices for PDFs & Attachments

Ensure PDFs Are Accessible

Make sure your PDFs are accessible. Unfortunately, PDF accessibility techniques are a much larger topic. To learn how to make accessible PDFs, here are some resources:

Requirements for an Accessible PDF

PDF Accessibility – Deque University (online course)

But before you jump into making your PDF, ask yourself if that content really needs to be a PDF. More often than not, it would work just as well as a web page. If you’re trying to get people to share content information by offering them downloadable content, see if you can build pages behind a login or generate unique access URLs. If you think it’s the kind of content piece people would really want to be able to download, offer an accessible PDF in addition to the accessible web page.

WCAG Best Practices for Metadata

Title Tags Should Uniquely Describe The Page’s Topic Or Purpose

Descriptive title tags identify the current location without requiring users to read or interpret page content. When title tags appear in site maps or lists of search results, users can more quickly identify the content they need. User agents make the title tag of the page easily available to the user for identifying the page. For instance, a user agent may display the title tag in the window title bar or as the name of the tab containing the page.

Title Tag Example:

Here is a live example of a descriptive title tag:

• Page: https://bytes.co/company/team/ 
• Title Tag: Meet the Bytes.co Team
• How it looks visually in a browser:

Conclusion

To maintain your WordPress website’s ADA compliance, it’s crucial to integrate accessibility considerations into your content creation and website maintenance processes continually. By committing to ongoing accessibility efforts, you not only meet legal obligations but also foster a more diverse and engaged online community, ensuring that everyone, regardless of their physical or cognitive abilities, can fully participate and benefit from the content you provide on your WordPress site.

For more information on creating accessible website content, check out our Website Accessibility Checklist or reach out to our team for assistance.