Dev – Build an Accessible Post

Introduction

This WordPress blog post is being created in a live presentation to demonstrate just some of the many considerations for creating accessible content. We have a short time to cover a large topic. The hope is that creating an accessible WordPress website will seem less daunting if we pay attention to key factors.

A Little About Me

Peter Ingersoll

I am Peter Ingersoll. I’ve been building WordPress websites for over 10 years. Like most of us, I am self taught and continue to learn more every day. I am very interested in accessibility and I do my best to discover, absorb, and share with others what I learn.

I am co-organizer of the WordPress Hartford, CT Meetup. We present online so feel free to join our monthly meetups. You can learn more about me at IngersollWP.com (and yes, this is also under development).

Please check out our previous accessibility meetup presentation: Getting Started with WordPress Accessibility at a11ywp.com.

What We Will Cover

The goal is to quickly create a WordPress post and a page and review accessibility topics along the way.

We are creating the post right now. I am starting with the post because it covers some key topics in a more direct way. Specifically, we will discuss the importance of starting off right, keyboard navigation, document organization and semantic markup, and images.

Assumptions

We are using an accessible theme

We are using Kadence (classic theme)
In the repository, you can filter by accessibility. However – many excellent accessible themes do not have this tag
Beware of Google searches for things like “best WordPress themes for accessibility”
Be sure to test your theme

We have selected colors that work well together

Color contrast meets accessibility guidelines
There are a variety of contrast checking tools, including the WebAIM Contrast Checker.
For testing a full palette and how the colors work together, try the Color Contrast Grid.

We have small selection of active plugins

There are a lot of great plugins that pay attention to accessibility. And there are far more that don’t. Please test your plugins as you use them. For an interesting discussion on the topic, you can listen to the Accessibility Craft Podcast: 034: Top Accessibility Mistakes In WordPress Plugins.

Key Considerations for Accessibility

Cute little Wapuu mascot holding a blue ball with an accessibility icon

Here are some of the most important things to consider when making a WordPress website accessible:

Keyboard navigation: Make sure that users can navigate and interact with the website using only the keyboard.
Content structure: Content should be organized in a logical and orderly way using headings, lists, and the proper use of HTML elements.
Alternative text for images: Add descriptive alternative text for images to make the content accessible to users with visual impairments.
Color contrast: Use sufficient color contrast between the text and background to make the content readable for users with visual impairments.
Form labeling: Properly label form elements, including input fields and buttons, to be sure that they are understandable and usable by all users.
Responsiveness: Websites should be fully responsive and usable on different devices and screen sizes. Worldwide, more people use a mobile device than a desktop PC.
ARIA (Accessible Rich Internet Applications) roles: Use ARIA roles to help screen readers understand the purpose and function of different elements on the page.
Testing: Regularly check the website using accessibility testing tools. Invite and consider feedback from users with disabilities.

These are just some of the most important considerations for making a WordPress website accessible. Sticking to web accessibility guidelines and standards, such as the Web Content Accessibility Guidelines (WCAG), is a good way to ensure that your website can be used by the most number of users.

The Importance of Keyboard Navigation

Close up of lack keyboard with backlit keys

A key element for website accessibility that all users can navigate and use the website with only the keyboard. Keyboard navigation enables users who are unable to use a mouse, or who prefer to use keyboard commands, to access and interact with the website.

All interactive elements (menus, buttons, links, and form inputs) should be properly labeled. They must be reached and activated using only the keyboard. This also includes providing clear focus indications for keyboard users to easily understand where they are on the page.

One of the first things you should do on your own website to try and use it with just a keyboard.

Properly Ordering and Nesting Headings

Screen shot of WordPress outline, showing headings used in the post

Using properly nested headings in web page content makes sure the outline of the document is clear. This is all about keeping headings group and ordered properly. H3s should always be nested under H2s, and so on. It is crucial for accessibility for the following reasons:

Structure and Navigation: Properly nested headings provides a clear structure to the content and makes it easier for all users to navigate your site, especially those using screen readers.
SEO Benefits: Using structured headings is also beneficial for SEO (Search Engine Optimization) as it helps search engines to understand the content structure, potentially improving the page’s ranking in search results.
Usability: Proper nesting of headings improves the usability of a website by separating sections and highlighting the main points. Readers can quickly scan for the information they are looking for.
Consistency: Maintaining a consistent heading structure throughout the website ensures an overall improved experience. Consistency is particularly beneficial for people with cognitive disabilities.
Support for Assistive Technologies: Proper heading structure supports assistive technologies, such as screen readers, which use headings to provide navigation commands that allow users to jump from one section.

Using properly nested headings is not just a good practice for web accessibility but also enhances the overall user experience and effectiveness of a website.

Images and Alt Text

Alt text is used to describe what an image looks like. The goal is to provide a similar experience for all visitors, sighted or not. Some things to keep in mind:

Be descriptive, but avoid being verbose.
Alt text is not (directly) for SEO. Don’t keyword stuff!
Be careful of automated tools for Alt text.
Alt text describes the image, captions give context for the image.
Decorative text and icons should not have Alt text (alt=””)

Blind woman at computer using assistive technology — Descriptive Alt text is necessary for photos so the experience is similar for everyone.

Icons and decorative images do not need Alt text

If text is part of an image, it should be included in the Alt text.

Wrap Up

If you start with a good foundation for accessibility, including theme, colors, and fonts, creating consistently accessible content is not too difficult. It just becomes a new habit.

I hope you enjoy the rest of WordPress Accessibility Day 2023.