4.9: Accessibility Checker in the Editor
- Page ID
Are you an instructor charged with putting together a textbook? You have resources available to help, especially with the LibreTexts remixer, but you’re reminded that it has to be accessible. You may not be familiar with accessibility integrations and inquire “What resources are available within LibreTexts to help with accessibility?”
That’s where the LibreTexts Accessibility Checker comes to help! The Accessibility Checker is available to authors while editing or remixing textbooks. Select the tool from within the toolbar to fix issues that it finds.
The LibreTexts libraries are housed within the Nice CXOne platform, a CMS, and uses CKEditor 4 to import or create content. Within the editor, we have made a Davinci Vitruvian man available as the Accessibility Checker icon. This feature has both automated and manual fixes which authors interact with. Many of the automation features have manual overrides available so author’s have more control of how content is presented.
Once you have activated the Accessibility Checker, a popup appears allowing authors to select checks to perform, or to perform them all, which is the default setting. Abbreviations are excluded from the default at this time
The tool will locate bold and italic content and suggest heading levels based on the page layout. H1 is always available at the top of the page, so LibreTexts may suggest H2, H3, and H4 to layout their textbooks. Containers (i.e. Learning Objectives, Examples, etc.) start with H5 and have H6, and H7 to help users navigate using headings. We’re using ARIA labels to create headings with a level of 7.
In the following screenshot, the Accessibility Checker identified bold text from a caption and suggested a heading 2. In the “Issue” notification of the checker, which shows the author is on 4 out of 9 issues, there are left and right buttons to allow authors to ignore suggested fixes. Once the “Quick fix” has been submitted, the issue will disappear from the list of issues.
Graphics and Alt Tags
For all graphics and images, the Accessibility Checker will require user interaction. The pop-up requesting alternative text for images give users the following options:
- Decorative (select if image is already discussed on page)
- Change alt text to caption
“Non-decorative” will require text within the Alternative text field. “Decorative” will make an empty alt tag to mark it as decorative to screenreaders. “Change alt text to caption” will convert alt text with 150 characters and suggest changing to a caption so learning disabled students benefit. The quick fix button will implement the accessibility fix on the users behalf.
The tool will also check if the filename is used as alt text and request the author to submit text to replace the filename with an accessible description.
Table accessibility is addressed by the Accessibility Checker and only requires user input for captions and summaries. You don’t need to know code for column or row headers, or simplified groups of column or row headers. It’s all automagically fixed in the background. Note, there may be complex table(s) which the tool doesn’t properly fix.
Complex tables which combine multiple tables into one may need to be separated into multiple tables. While it may be visually appealing to combine the tables, it’s impossible to create accessible headings for content after heading columns or rows have been established.
Links and URL’s
To address the inaccessibility of links and URL’s, the team worked on a number of updates. Non-unique links (click here, more, etc.) and URL’s can be difficult for screenreaders or magnifiers to interact with.
The tool locates non-unique links or posted URL’s and request user interaction to enter in text and replace the URL. Once entered, the tool will then detect if it’s a LibreTexts link or if it links to another site. If it’s a LibreTexts link, nothing else is done. If it’s a link outside of LibreTexts, the tool will wrap the base of the site in brackets and place it after the link.
The tool will also locate emails within content and request user interaction for typing in the name. The tool will automatically place “eMail:” before the name to make it clear what it’s linking to.
This portion of the tool is still being worked on and is not currently active in the Accessibility Checker. The color contrast will address contrast issues of text content, to ensure all text is accessible and authors aren’t use contrasting colors. This is turned off at the moment due to interfering with links.
The labels section is also still being worked on and is not currently active in the Accessibility Checker. This section will fix form fields and links to ensure they’re properly labeled and interact with assistive technologies. This is turned off at the moment as we work on some reported issues.
Abbreviations and Acronyms
The acronyms section is currently in Beta, and is separate from the rest of the scripts and must be selected from the menu to run.
If you have content in ALL CAPS, such as abbreviations or acronyms, the Accessibility Checker will find unique instances and require user input. Once an element has been located, the following choices will be available:
- Label acronym
- Reformat text to lowercase (recommended for non-acronyms)
- Ignore text
Choosing “Label acronym” will allow the user to enter a definition to be added which are accessible to mouse and keyboard as a tooltip. We have altered tooltips to be accessible to keyboard users, which allows users to select and enlarge fonts.
This will add a tooltip to all acronyms which users can use their mouse or keyboard to review the acronym definition. Previously this was presented as small, inaccessible, text.
Choosing “Reformat text to lowercase” will alter the text so that it’s no longer ALL CAP, which will force the tool to ignore it. Choosing “Ignore text” will keep the text in ALL CAP and ignore additional attempts to update it.
Because of these labels, a tooltip will be made available to inform users of the meaning. Tooltips were already accessible to screenreaders, but we’ve worked to make it more accessible to mouse and keyboard users! Users can now enlarge and select the text within tooltips!
Every once in a while, form fields the user interacts with will not display in the tool. Please refresh the page to fix this issue. If you run into further issues, please reach out to firstname.lastname@example.org with the link of the page and error(s) occurring.