In this lesson, we will talk about testing your content for accessibility.
If you watched the first lesson on this topic, you're already familiar with the term accessibility
and aware of its importance.
Let's recap.
Digital accessibility is a broad term that ensures that as many people as possible can
use the web, be it operating an online service or consuming online content.
While accessibility has legal and business implications, it's important to remember
that these guidelines promise a better browsing experience for everyone.
The easiest way to guarantee that your site is accessible is to consider doing the design
and development.
However, block-based themes offer incredible flexibility and with great power comes great
responsibility.
Fortunately, many technical accessibility problems are usually easy to detect and fix
using automated tools.
Proper heading levels, color contrast, meaningful alt text, link text and so on.
Ironically, these are the most common accessibility fails on the web.
In this tutorial, we'll focus on reversing the strand and show you how to test the content
you create before publishing and ensure your posts and pages are usable.
WordPress includes two built-in accessibility helpers in the Editor.
Number 1 - Semantic Structure. Click on Document Overview and then Outline
to check whether your headings are ordered correctly.
Starting from H2 and continuing in a descending sequence up to H6 without skipping over.
WordPress marks the wrong heading levels in light orange and notifies you if you are
using an incorrect heading level.
Number 2 - Color Contrast. If you select a text and background color
combination that fails to provide sufficient contrast, WordPress will alert you indicating
that this color combination may be hard for people to read.
Try using contrasting colors for the background and text to enhance accessibility.
Fix these and you're already better than most of the big sites on the internet.
To fix the color contrast, select the relevant block, in this case the Buttons block, and
then open up Styles in your sidebar settings on the right.
And then below color we can change the background color and then the text color to ensure the
colors contrast well.
Next, let's explore a few accessibility plugins.
WP Tota11y, Sa11y and Editoria11y are variations of each other.
WordPress Tota11y is a lightweight plugin that checks common accessibility compliance
both on the front end and the Editor, notifying you of any incorrect heading levels, color
contrast, poor link text, missing labels in form elements, and missing alt text in images.
The tool has a neat experimental feature called Screen Reader Wand to view elements
as a screen reader would.
You can navigate through the alerts in each category and review the suggested fix, but
it's suggested to do it in the front end as it can be confusing in the Editor as it checks
the entire browser window.
Number 2 - Sa11y Sally provides a comprehensive
set of checks on the front end.
You can toggle a few extra checks such as readability, advanced links, color contrast
and form labels under Settings, where you'll also find color filters to test how your page
would look when viewed by people with several types of colorblindness.
While the errors are clearly marked, the description is more high level and the fix isn't as
straightforward as it could be.
Sa11y enables Administrators to define and control various functions on its advanced
setting admin page.
Editora11y focuses on content and structure.
No design elements like color contrast will be checked.
When enabled, it displays alerts on the front end and the Editor notifying you about the
document outline, heading levels, link texts and targets, also known as Open in a new tab
and missing alt text in images.
Its goal is to help writers and editors catch common problems and it describes the failures
in plain language, suggests fixes and allows users to hide or dismiss the alert when it's
irrelevant.
Editora11y also generates reports and enables administrators to exclude alerts, skip some
tests or include elements based on CSS selectors.
Alternatively, there's the popular Accessibility Checker that adds a new section to the post
or page editor window and a hovering button to the front end.
It displays a summary of the errors, detailed explanations including the relevant code snippet,
potential fixes and an option to ignore individual alerts.
If you want to go the extra mile and test additional technical aspects, you can do the
following.
Number one, try browsing your website with a keyboard.
No mouse.
Use the tab key to navigate between links, buttons and form fields and press enter or
space to activate these interactive elements of the page.
Make note of non-functional elements and missing visual indicators that need fixing.
And secondly, you can change the device's color scheme to ensure things look and work
well in dark or high contrast mode.
To conclude, as you can see authors and content managers who create or maintain the content
have direct control over critical aspects like heading levels, text size, color contrast,
links, alternative text for images and more.
In other words, you can avoid producing inaccessible content without touching the code.
Just be mindful and empathetic.