Accessibility Checker is an innovative solution that lets you inspect the accessibility level of content created and immediately solve any issues that are found.
It is built upon these elements:
- User Interface optimized for quick problem solving.
- Flexibility allowing you to use the accessibility engine of your choice.
- Quick Fix feature letting you fix common problems fully automatically
How it Works:
- Content Validation: Accessibility Checker inspects output HTML code against predefined patterns of common accessibility problems. For that purpose, Accessibility Checker uses a dedicated accessibility checking engine.
- Report Issues: Accessibility Checker will list all issues found, and highlight them in the document. It will provide a more detailed description of what's wrong with each issue so the user can verify and solve the problem.
- Fix the Issue: Fix the markup to make your content free from accessibility issues. Thanks to the Quick Fix feature, correcting common problems is as easy as clicking a button. When there is no Quick Fix available, you can switch Accessibility Checker into listening mode and make necessary corrections to your content manually, following the checking engine recommendations provided in the panel.
Running Accessibility Checker
You can enable Accessibility Checker by clicking the "Check Accessibility" toolbar button. Once the button is clicked, Accessibility Checker will perform the content checking process. Typically it takes a fraction of a second. Depending on the result, Accessibility Checker will switch to checking mode or inform you that the document contains no accessibility issues.
Issues Found - Checking Mode
When Accessibility Checker finds issues, it will display a panel containing the tools needed for understanding and solving the problem.
Accessibility problems are presented as one issue at a time, allowing you to iterate over the entire list. Issues can also be ignored. For more information about checking mode, please refer to the "Checking Mode" section.
No Issues Found
If no issues are found in the document, Accessibility Checker will inform you about it. This means your content is valid.
What Exactly Are Issues?
An issue represents a single accessibility problem in your content, as defined by your checking engine. Issues are grouped into different types:
- Error - The checking engine is 100% certain that the highlighted element contains an accessibility issue.
- Warning - The checking engine discovered that there is a possibility of a given error, but it does not have a 100% certainty.
- Notice - The checking engine has no way to detect this issue, so it points an issue only as a notice, and the user can verify if the content satisfies the given rule.
In checking mode, the highlight color will slightly differ to hint the issue type. The color will range from red for an error, through yellow for a warning, to gray for a notice.
Checking Mode is enabled when there is at least one issue in the editor content. It will show a panel containing all key information about the currently focused issue.
It is designed for:
- Quick Problem Identification (with a meaningful title, description, help links).
- Navigation over the detected issues.
- Fixing the problems, ideally without leaving the panel.
Checking mode will work on a single issue at a time, allowing you to iterate over all issues found in the document.
This illustrates the most important parts of a panel shown in the checking mode.
Navigating Over Issues
Multiple ways to go through issues are available.
- Navigation Buttons
Use the Previous or Next buttons in the Accessibilty Checker panel to move between issues.
- Clicking a Selected Issue
Since issues are highlighted in the editor, you can click an issue with your mouse. It will focus the first issue within the selected element. The possibility to focus an issue is indicated by a highlight and a cursor change:
- Using the keyboard
You can also use the keyboard to move through issues. A few keyboard shortcuts were defined to make navigation easy and intuitive. See "Keyboard Shortcuts" section for a complete list of available keystrokes.
Using Quick Fixes
Quick Fix is a powerful feature designed to solve issues as quickly as possible, without leaving the Accessibility Checker panel. There are 2 types of Quick Fixes:
- Automatic - Does not require any user input at all to fix the problem. Just press the Quick Fix button in the Accessibility Checker panel.
- Semi-Automatic - Requires the user to provide some information before applying the Quick Fix. Typically this is requested by a form text input in the Accessibility Checker panel. Initially, this image has no alternative text, so Quick Fix asks the user to provide it as it is unable to determine this automatically.
User Input Validation
Quick Fixes are also smart enough to validate the user input data if needed.
For example, it is recommended that an alternative text image should be shorter than 100 characters. If the suer enters a text that is longer than 100 characters in to the "Alternative Text" field, and tries to apply it with a Quick Fix, the Accessibility Checker will raise an error warning the user the text is too long.
Adding Quick Fixes
Quick Fix feature was created with extensibility in mind, so it is very easy for a developer to add new, custom Quick Fixes to Accessibilty Checker.
Issues reported by Accessibility Checker can also be ignored. This can be done by clicking the "Ignore" button for each selected issue in the Accessibility Checker panel:
If an issue is ignored, it will gain a very subtle highlight which no longer indicates the initial issue type:
It is still possible to open Accessibility Checker on an ignored issue by clicking it, navigating to it with your keyboard or moving to it from the previous or next issue.
Once the issue is ignored, you can also unset it's ignore status by clicking the "Stop Ignoring" button.
Switching to Listening Mode
When you wish to introduce some manual changes to your content, Accessibility Checker will switch to listening mode, waiting for your changes to be completed.
There are 2 ways of switching Accessibility Checker to listening mode after it's initial activation:
- Clicking anywhere in the content area
- Pressing the listening mode keyboard shortcut
Listening Mode is enabled with you want to make a quick change to the document.
In listening mode, Accessibilty Checker minimizes itself and waits until you are finished editing your content. Listening mode will put the following indicator in the bottom right-hand corner of your browser:
When you have completed your changes, you can return to checking the content by clicking the "Check Again" button.
Accessibilty Checker comes with keyboard support. The following tables describe default keystrokes and actions assigned to them:
*Please note that the pre-defined shortcuts can be changed with the custom configuration.