This site demonstrates the authoring experience for logged-in users. On a real site, the Editoria11y toggles (pictured at left, clickable at the bottom right of the) and reports are only seen by content authors!
- Explore a page showing issue alerts.
- Check out the dashboard.
- Then install your own copy to test.
Changes since v1
- Editors can now mark manual checks as "Checked and OK" if all is well, click "Hide alert" if it is not their problem or they want to handle it later, or restore previously hidden alerts. Site administrators choose which users see which buttons.
- Test results and dismissals are synced to a dashboard. Site administrators can now review all pages with issues, which issues are most frequent, which issues have been ignored, etc. By release, they will also be able to restore hidden alerts.
- All tooltips have been rewritten based on user feedback. There is now a clear delineation between errors and items marked for manual checking, and tips have been rewritten to more fully explain the issue inline, with suggestions for correction.
- The panel has been simplified: outline and alt text are top-level buttons, and users can jump backwards as well as forwards:
- Dark mode is now an option!
- The checker can now handle multiple check roots (e.g., "main, footer") and has more advanced logic for ignoring elements.
- Several configuration options have been added to auto-hide all alerts for certain users on pages they cannot edit -- a feature request for sites where editors can only edit certain content types. If alerts are hidden, the toggle shows as having "info" rather than the page passing all tests. Users can open it and view the results if they choose.
- jQuery dependencies have been removed, and the checker can now dip into shadow DOM components.
- The toggles have been redesigned to look more like an authorial tool and not an overlay:
About Editoria11y
Editoria11y (editorial ally) is a user-friendly accessibility “auto-correct” checker that addresses three critical needs for content authors:
- It runs automatically. Modern spellcheck works so well because it is always running; put spellcheck behind a button and few users remember to run it!
- It focuses exclusively on straightforward issues a content author can easily understand and easily fix. Yes; comprehensive testing should be a key part of site creation, but if a tool is going to run automatically, it will drive an author bonkers if it is constantly alerting on code they do not understand and cannot fix.
- It runs in context. Modern content management systems often assemble pages from many sources. Only the assembled page can be checked for things like the header outline order.
The authoring experience
When an author is logged in to their site, Editoria11y places a small toggle button at the bottom right of each page with an issue count. Users can press the button to view details of any alerts or access additional tools (“full check”), including visualizers for the document outline and image alt attributes, and the panel’s state persists from page to page (open or shut). Note that on this demo site the toggle is visible to anonymous users and "mark as OK" has been enabled, but synchronizing changes as an anonymous user will not work! - If the page has a new issue, a panel automatically slides open with more details.
- If the user minimizes the panel, it will not open automatically on future page visits until the content changes...but it will still tell them they have things to do.
Issues flagged
- Headings
- Skipped heading levels
- Empty headings
- Very long headings
- Suspiciously short blockquotes that may actually be headings
- All-bold paragraphs with no punctuation that may actually be headings
- Text alternatives
- Images without an alt element
- Images with an empty alt element (flagged for manual review)
- Images with a filename as alt text
- Images with very long alt text
- Alt text that contains redundant text like “image of” or “photo of”
- 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
- Meaningful links
- Links with no text
- Links titled with a filename
- Links only titled with only generic text: “click here,” “learn more,” “download,” etc.
- Links that open in a new window without an external link icon
- Images in links with alt text that appears to be describing the image instead of the link destination
- General content quality assurance
- Lists made from asterisks, numbers and letters rather than list elements
- AVOID LOTS OF CAPS LOCK TEXT
- Tables without headers and tables with document headers (“Header 3”) instead of table headers (<th>)
- Links to PDFs and other documents, reminding the user to test the download for accessibility or provide an alternate, accessible format
- Suspiciously short blockquotes that may not be block quotes
- Embedded videos, reminding the user to add closed captions
- Embedded audio, reminding the user to provide a transcript
- Embedded social media, reminding the user to check their social media content as well