Transcript
Introduction
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 failures 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.
Built-in helpers in WordPress
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 text color to ensure the colors contrast well.
Plugins
Next, let’s explore a few accessibility plugins. WP Tota11y, Sa11y and Editoria11y are variations of each other.
WP Tota11y
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.
Sa11y
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.
Editoria11y
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.
Accessibility Checker
Alternatively, there’s the popular Accessibility Checker, which 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.
OS apps and browser extensions
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.
Conclusion
To conclude, 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.
Practical
Use WordPress Playground to test your knowledge:
- Conduct a headings audit:
- Create a sample post with multiple headings. You can use the sample text below:
- Use WordPress’s Overview tool in the List View to check the semantic structure of your headings.
- Ensure that headings start from H2 and descend sequentially without skipping levels.
- Color contrast check:
- Add a Group block with text. Change the color of the Group block and text.
- Background Color: Light Yellow (#FFFFE0)
- Text Color: Light Gray (#CCCCCC)
- Use WordPress’s built-in color contrast tool to identify the problematic color combination.
- Adjust the colors to achieve sufficient contrast, ensuring readability.
- Add a Group block with text. Change the color of the Group block and text.
- Test out a plugin:
- Test one of the mentioned plugins on your own site and identify how you can enhance its accessibility.