TinyMCE Accessibility Checker + PowerPaste (for v2 Text+Problem Editors)
Summary
While these are two separate plugins, each meets a distinct and important need for our partners and helps ensure greater parity with other LMSs. Moreover, by integrating them as plugins with our existing TinyMCE editor, we feel like adoption of them within existing workflows will be easy for our course authors. We think these will offer a strong win with partners – both internally and externally.
The TinyMCE accessibility checker would enable partners to increase the speed of QA reviews and thus there would be more new courses on the edX platform more quickly, while lowering the legal risk that partners face due to potentially not meeting WCAG 2.0 guidelines, and the likelihood that learners experience inconsistencies in delivery of course materials due to content not meeting WCAG 2.0 guidelines.
The Power Paste similarly increases course authoring speed for many of our partners. Many course authoring teams receive content in the form of a Google or Microsoft Word document and then copy/paste that content into the text editor in Studio (we see this today internally as well with our Exec Ed product line). The content appears to be formatted correctly in the text editor, but there are various formatting issues when viewing either in Studio or the LMS. The Power Paste plugin solves this issue. Having to fix the formatting issues creates significant authoring inefficiencies. Partners would be able to author much more quickly with this plugin.
Accessibility Checker
This plugin would allow our partners to check the HTML in the editor for various WCAG and Section 508 accessibility problems. It has an auto-repair feature that lets the user fix identified problems.
The TinyMCE Accessibility Checker focuses on exceeding WCAG "A", "AA", and "AAA" levels.
The tinyMCE Accessibility Checker plugin enables content authors to check for accessibility problems using an in-editor dialog, complete with a repair feature that corrects the errors on their behalf.
TinyMCE Accessibility Checker Usecase
When using the TinyMCE Accessibility Checker, begin by looking for the accessibility icon (person in a circle). As you enter content into the Rich Content Editor, the TinyMCE Accessibility Checker will automatically start looking for any potential accessibility issues and notify you with an alert next to the Accessibility Checker icon with the number of issues found. Click on it to learn more.
The Accessibility Checker will open in the sidebar menu with details on each issue found. Navigate between the items to learn about each issue and apply the fixes (see images below).
TinyMCE Accessibility Checker Review
Adjacent links: Adjacent links with the same URL should be a single link. This rule verifies link errors where the link text may include spaces and break the link into multiple links.
Heading paragraphs: Headings should not contain more than 120 characters.
Image alt text: Images should include an alt attribute describing the image content.
Image alt filename: Image filenames should not be used as the alt attribute describing the image content. Currently, files uploaded directly to Canvas create a redirect that does not properly verify image filenames.
Image alt length: Alt attribute text should contain fewer than 120 characters.
Large text contrast: Text larger than 18pt (or bold 14pt) should display a minimum contrast ratio of 3:1.
Lists: Lists should be formatted as lists.
Sequential headings: Heading levels should not be skipped (e.g. H2 to H4). However, the tool does not check if the first header starts with H2 or whether the headings are sequential with the rest of the content in the page. Tables do not begin with H1, which is designated for the page title.
Small text contrast: Text smaller than 18pt (or bold 14pt) should display a minimum contrast ratio of 4.5:1.
Table captions: Tables should include a caption describing the contents of the table.
Table header scope: Table headers should specify scope and the appropriate structure.
Table header: Tables should include at least one header.
Advantage of TinyMCE Accessibility Checker
The Accessibility Checker plugin for TinyMCE has the primary advantage of being very low effort and having intelligible warnings and solutions for content creators, who are most likely not accessibility experts. We have a general goal of minimizing instances of asking content creators to edit the HTML view of course content in order to make it WCAG-conformant, and this helps with that significantly. If we don't use this plugin, edX accessibility expert Jett Witt suggests we create some custom plugins that do the same thing, for the same reasons.
Immediate Benefits
edX will have more WCAG 2.0 conformant content, thus reducing WCAG 2.0 conformance risks.
edX will have more consistent and predictable content provided on its interactive platform, thus improving user experience.
New course launches will have a faster build-to-launch timeline
Improved relationship with UC Berkeley and University of Washington
Course content will be more accessible, consistent, and predictable because the TINYMCE accessibility checker reviews for the following content:
Heading levels
Lists
Contrast ratios on text
Image alt text
Tables
Captions
Headers
Scopes
Power Paste
PowerPaste is a plugin that allows users to copy and paste content from third party apps such as Microsoft Word, Excel and Google Docs.
The current functionality appears to have no formatting issues in the text editor, but does have formatting errors in Studio and the LMS. This requires a significant time effort to fix for users who author in this manner.
Benefits
This authoring efficiency enhancement would lead to new courses being created more quickly
Improved satisfaction level when using the platform for those who author in this manner
Less time to create, or edit, a course
Lowered cost to create a course