Editoria11y (pronounced “editorial ally”) is a plugin for WordPress to help you catch and fix accessibility issues quickly and easily.
Editoria11y is only available to content editors when you are logged into your WordPress site. It is not visible to the general public.
Review this page to learn more and review tips on how to get started.
What is Editoria11y?
Editoria11y acts like an accessibility spellchecker for your web content. It automatically scans your draft and live pages for common accessibility issues and provides simple, real-time feedback for you to review and take action on.
Editoria11y is designed specifically for content authors and editors, focusing only on issues you have the power to fix. Unlike more technical tools, it provides plain-language explanations of problems like:
- Missing image descriptions (alt text)
- Skipped heading levels
- Links with generic text like “click here”
It’s a proactive tool that helps you create accessible content from the start, rather than having to fix problems later.
Video: Introducing Editoria11y
Video has closed captions. An audio described version and a text transcript is provided on the page following the media player.
Audio Description (English Descriptive)
Video Transcript
Introducing Editoria11y, your real time accessibility checker for WordPress.
There’s a lot of moving parts when it comes to creating web content. You have to draft and design your content. Follow web and brand standards for the university, and make it accessible.
The challenge is most tools don’t let you catch accessibility issues in real time or they give you too much information so you can’t focus on what you can fix.
Editoria11y is a free WordPress plugin that acts like a spell-checker for accessibility. It flags issues like missing alt text, poor heading structure, or unclear link text directly in the WordPress editor and tells you how to fix them in plain language.
Editoria11y specifically highlights issues that you are responsible for and skips the more technical details. Since it’s integrated directly into the WordPress editor there’s no need to stop writing, open a new tool, or navigate to a separate dashboard to check for issues. Editoria11y simplifies the process and empowers you to create more accessible content for everyone.
Getting started with Editoria11y is as easy as 1, 2, 3:
- Step 1: Just start writing! Editoria11y automatically starts checking your content as you work.
- Step 2: Look for the icons. If there’s an issue, a small icon will appear next to the text or image.
- Step 3: Click for a tip. When you select the icon, a clear, simple explanation will pop up, telling you exactly what the problem is and how to fix it.
And that’s it! Editoria11y helps you catch and fix issues right when they happen, so you can create better, more accessible content without changing your workflow.
For questions or assistance with Editoria11y, contact the web accessibility team at OITAccessibility@BoiseState.edu or learn more online at boisestate.edu/webguide.
How to use Editoria11y
Editoria11y is available to you from your WordPress Dashboard and within the pages you edit. Once you are logged in, you will see a set of icons at the bottom right of any page you have editing access to.
Here are three examples of what an icon set at the bottom right of a page may look like:
Blue checkmark: No accessibility issues were found.
Yellow with a number: A potential issue that requires manual review.
Red with a number: A definite accessibility problem has been found.
If you click on the number, a pop-up will jump to and display where the first issue is on the page. The pop-up panel is a tooltip with a brief explanation of the issue and suggestions on how to fix it. Click outside of the panel to close it. You can page through the numbers in the bottom right icon set to see the successive issues.
Editoria11y icons in the body of your page
Editoria11y icons appear in the body of your content for draft, preview, and live pages.
If there are accessibility issues on the page you are looking at, you may also see icons in the body of your page.
The icon’s appearance will tell you the status of the page.
- Blue Checkmark: No accessibility issues were found.
- Red Number: A definite accessibility problem has been found.
- Yellow Question Mark: A potential issue that requires your manual review.
Toggle the alerts
If you don’t want to see the alerts in the body of your page, you can toggle them “off” by clicking on the flag icon. Clicking the flag icon again will make the alerts re-appear.
Review the issues
You have the option to click through the numbers to view each issue, and to click the “list” icon in the icon set:
When you mouse over the list icon it will say: Check headings & alt text.
When the list icon is clicked it will show options to review Headings (in the case above Headings are blue so there are no issues) and Alt Text (in the case above Alt Text is yellow which indicates possible issues).
When you select one of these options, Editoria11y will open the panel and highlight the issues directly on the page (you may see a yellow question mark, a red exclamation point, or a blue header number). Hover over an issue to see a tooltip with a brief explanation and suggestions on how to fix it.
Tip: You may find it easiest to click through the numbers to see each issue. When the number is clicked, Editoria11y goes to the first issue on the page, automatically opening the tooltip with an explanation and how to fix the issue. click the number again and you will be taken to the next issue.
Edit and fix
Switch to Edit Page to make the necessary changes, then save and preview your page. The Editoria11y tool will update automatically to reflect your changes.
Key checks & examples
Issues not flagged by Editoria11y
Here’s what Editoria11y doesn’t check for:
- Colors: It can’t tell you if the text is too light to read against the background.
- Keyboard Use: It doesn’t test if you can use the whole page with just your keyboard, which is how some people navigate.
- Behind the Scenes Code: It won’t flag problems with the website’s code, like whether a button is built correctly or if special code for screen readers is used properly.
- Pop-ups and New Content: It might miss issues with things that appear on the page later, like pop-ups or content that shows up when you click something.
- The Whole Website: It only checks the main body of a single page, not the navigation, footer, or other parts that show up on every page.
- Alt Text Quality: It can tell you if an image is missing a description, but it can’t tell you if the description is actually good or useful.
- Words in Pictures: It won’t warn you if text is saved as a picture, which screen readers can’t read.
- Reading Flow: While it checks headings, it can’t guarantee that the order a screen reader reads things is the same as the visual layout of the page.
Editoria11y focuses on a variety of common issues that can impact the user experience for those with disabilities. It checks for:
- Images: Missing or inappropriate alternative text.
- Headings: Incorrect heading order (e.g., jumping from an H2 to an H4).
- Links: Unclear or generic link text. It also flags links that open in a new tab without a warning.
- Lists & Tables: Incorrectly formatted lists (using asterisks instead of list blocks) and tables missing header rows.
- Media: Reminders to provide transcripts for audio and captions for videos.
- Documents: Reminders that documents are challenging for users and must be accessible or have an accessible alternative
Reviewing Manual Checks
Manual Accessibility Checks in Editoria11y
Page Structure
Editoria11y flags the following page structure issues as manual checks:
- Skipped heading levels
- Very long headings that might not be actual headings
Text and Media
Editoria11y flags the following text and media issues as manual checks::
- Images marked as decorative using an empty alt element
- Images with a filename as alt text
- Images with very long alt text
- Alt text containing redundant text
- Video embeds, reminding the user to add closed captions
- Audio embeds, reminding the user to provide a transcript
- Social media embeds, reminding the user to provide alt elements
- Embedded visualizations that usually require a text alternative
Links
Editoria11y flags the following link issues as manual checks:
- Links with a filename as their label
- Links made of only generic words: “click here,” “learn more,” “download,” etc.
- Links that open in a new window without warning
- Images in links with alt text that appears to be describing the image instead of the link destination
- Links to PDFs and documents, reminding the user to test the document for accessibility or provide an alternate format
Visual-only Formatting
Editoria11y flags the following visual only formatting issues as manual checks:
- Lists made from asterisks, numbers and letters rather than list elements
- LARGE QUANTITIES OF CAPS LOCK TEXT
- Possible heading: suspiciously short blockquotes
- Possible heading: short, all-bold paragraphs
Manual checks may or may not require fixing. These often are posed as a question. For example, the manual check for “is opening a new window expected?” asks you to verify if this function is appropriate.
Review the guidance provided the decide if you want to edit the page, mark as ignored, or mark as ok. The following image is an example of a manual check warning.
Readers can always choose to open a link a new window. When a link forces open a new window, it can be confusing and annoying, especially for assistive device users who may wonder why their browser’s “back” button is suddenly disabled.
There are two general exceptions:
1. When the user is filling out a form, and opening a link in the same window would cause them to lose their work. 2. When the user is clearly warned a link will open a new window.
To fix: set this link back its default target, or add a screen-reader accessible warning (text or an icon with alt text).
Options to fix:
[Edit Page] [Mark as ignored] [Mark as OK]
Difference between Ignore and Ok
Marking an alert as ignored only hides the alert from your view. Other editors will still see the alert and can decide for themselves if the content needs to be fixed.
This is different from “Mark as OK,” which hides the alert for all site editors. Only use if you are sure this issue is okay for the entire site.
Fixing Known Errors
Definite Accessibility Errors in Editoria11y
- Headings with no text at all
- Tables without header cell
- Tables with empty header cells
- Document headers (“Header 3”) inside table cells
- Images without an alt element
- Links with no text
Definite errors are issues that the tool can automatically and confidently detect as accessibility barriers. They are typically things that are clearly incorrect and must be fixed.
Unlike manual checks, you will not have an option to “ignore” or “mark as ok.” You must edit the page to resolve the error. The following image is an example of a definite error.
Headings and subheadings create a navigable table of contents for assistive devices. The numbers indicate indents in a nesting relationship: Heading level 1, Heading level 2: a topic, Heading level 3: a subtopic, Heading level 2: a new topic
Empty headings create confusing gaps in this outline:
they could mean the following content is still part of the previous section, or that the text was unpronounceable for some reason.
To fix:
Add text to this heading, or delete this empty line. Link to Edit Page
Editoria11y Dashboard
What’s in the Dashboard?
You can review all the issues found by Editoria11y on your site in the Dashboard view. There you’ll find:
- Recent issues
- Issues by page
- Issue types
- Recent dismissals
You can use this dashboard to quickly identify pages with the highest number of issues present so you can access and fix them quickly. You can also download the dashboard as a .csv file.
To access the dashboard, use one of the following methods:
Site Report Button
Select the Open Site Report button from the Editoria11y checker located on any live page of your site.
WordPress Dashboard
Select the Editora11y link from your WordPress Dashboard Navigation.
Known Issues
Many of the images in the Theme blocks may get flagged as missing alt text on the live pages. This is because images in these particular blocks are using an aria-label instead of alt text.
If you review the alternative text field for the flagged image and the description is present, you can mark this issues as “OK” for the site.
This may affect the following types of content:
- Department main header image
- Text + Image block
- Interstitial block
- People list block
Need assistance?
Contact the Help Desk at (208) 426-4357 or email helpdesk@boisestate.edu.