Drupal CKEditor Content Accessibility Auditor

CKEditor Accessibility Auditor Drupal Module

The Drupal CKEditor Accessibility Auditor(HTML_CodeSniffer) module allows writers to check content for website accessibility issues without additional browser extensions. The Drupal accessibility module can switch between auditing WCAG2A, WCAG2AA, WCAG2AAA, and Section 508 compliance.

Setup the Drupal CKEditor Accessibility Auditor Module

Install CKEditor Accessibility Auditor

This is the easiest way to install the Drupal accessibility module.

  1. Log into Drupal.
  2. Install the Drupal module using the CKEditor Accessibility Auditor download link for your Drupal version. Drupal 7 users will also need to install the CKEditor – WYSIWYG HTML editor module.
  3. Click Enable newly added modules.
  4. Under User Interface, select CKEditor Accessibility Auditor (HTML_CodeSniffer).
  5. At the bottom, select Install.

Configure the CKEditor Accessibility Auditor Module in Drupal 8

  1. Go to the Configuration page.
  2. Select Text formats and editors.
  3. Beside the text format you use most (basic, restricted, full), select Configure.
  4. In the Toolbar Configuration section, drag the Accessibility Auditor (HTML_CodeSniffer) button – a black checkbox – at the end to the Active toolbar.
  5. Afterwards, a new tab will show in the CKEditor plugin settings. Change the default accessibility standard if needed between WCAG2A, WCAG2AA, WCAG2AAA, and Section 508. You’ll be able to switch between other standards directly within the editor.
  6. At the bottom, select Save configuration.
  7. Repeat the steps above for other text formats as necessary.
Drupal CKEditor toolbar configuration

Configure the CKEditor Accessibility Auditor Module in Drupal 7

  1. Go to the Configuration page.
  2. Select CKEditor.
  3. Beside the text format you use most (advanced or full), select Edit.
  4. Under Editor Appearance, drag the Accessibility Auditor (HTML_CodeSniffer) button – a black checkbox – from Available buttons to Current toolbar.
  5. Under Plugins, check the box for Accessibility Auditor (HTML_CodeSniffer).
  6. At the bottom, select Save.
  7. Repeat the steps above for other text formats as necessary.
  8. Go to Configuration > CKEditor Accessibility Auditor.
  9. Change the default accessibility standard if needed between WCAG2A, WCAG2AA, WCAG2AAA, and Section 508. You’ll be able to switch between other standards directly within the editor.
  10. At the bottom, select Save configuration.
HTML Codesniffer by Squiz in Drupal

Use the Drupal Accessibility Module

When you edit a Drupal page or article in the recently modified HTML modes, you’ll be able to select the accessibility checker button from the toolbar. A pop-up window will show the number of errors, warnings, and notices found in accordance with the default standard in the upper-right corner. For detailed information, select View Report. To change the standard, select one from the drop-down menu.

You can cross-check your Drupal 508 compliance reports with online tools like Tenon.io.

Learn more from our Drupal Education Channel.

Get the power and performance you need without additional configurations with our Drupal VPS Hosting.

J
Jacqueem Content Writer I

Technical writer focused on cybersecurity and musicianship.

More Articles by Jacqueem

Was this article helpful? Let us know!