Mura Accessibility

  • Accessibility
accessibility icon

All MSU websites have to conform to the WCAG2 standard for accessibility (see for more information about this). We created this plugin to check and fix sites easily. From the admin interface, it is possible to check all pages automatically and get a complete report. From the front-end, the plugin adds a badge with the number of violations.

It is based on Deque Labs's aXe, a Javascript library able to check for WCAG2AA violations.

To use it, make sure you are logged on the front-end side (use esc-L on any page to display the login form). Then go to the admin side (/admin) and select the plugin (you will only see it if you have the permissions needed for that). Start checking the site. It takes a while to check everything, but violations will get listed progressively. If you click on a page link, you will get to that page.

The plugin adds a badge on top right of a page when a user is logged in. It reports the number of violations in the page. Clicking on it will display the list of violations, and clicking on a node will scroll the document to it and highlight it, making a fix easy with inline edit.

AXe is configured to use the WCAG2AA and WCAG2A rules. It will not report potential false positives.

A custom rule has been added to check for empty alt attributes. Normally, empty alt attributes are meant for purely decorative purposes. Since aXe is not reporting possible false positives, it does not consider this a violation. Unfortunately, CKEditor (the default Mura content editor) saves an empty alt attribute when a user inserts an image without specifying anything for alt, instead of not saving an alt attribute at all (which would be considered a violation).

The custom rule will report a violation if an empty alt attribute is used for an image with a width larger than 30 px, which is unlikely to be used purely for decorative purposes.

Note that CKEditor's Accessibility Checker can also be used in Mura to check accessibility, and it is complementary to this plugin. Accessibility Checker's implementation is based on Quail, a different library, so it might report different violations. It will also report potential violations and warnings, while this plugin does not.

The Mura Accessibility plugin source is available on github here.

Known Issues

  • If you happen to use the search element on your website (such as for your Directory), the Mura Accessibility plugin, when run on the back-end, falsely reports that there is no label for the input box. This error is not reported when you look at the page on the front-end.


Post a Comment

Required Field