WSUWP Gutenberg Accessibility

The WSUWP Gutenberg Accessibility plugin adds an accessibility and usability checker panel to the Gutenberg editor.

This panel checks for some accessibility and usability issues categorized as errors, alerts, and warnings. All errors must be fixed. Alerts should be fixed. Warnings need a manual check.

A link is provided to review your webpage through WAVE (Web Accessibility Evaluation Tools) so you can check for additional accessibility errors and alerts.

Accessibility Notation on All Pages and Posts

No Data

This webpage has not been checked with the plugin yet. Editing and saving the webpage will trigger the plugin to check the webpage and update the Accessibility column with the appropriate dots.

Red, Orange, and Yellow Dots

The Accessibility and Usability issues are indicated with a red dot (Errors), an orange dot (Alerts), and a yellow dot (Warnings) for the web page.

Green Dot

Accessibility and Usability issues checked by the plugin were not detected on the webpage.

Accessibility & Usability Panel

The panel shows the items checked by the plugin. It includes details about the errors, alerts, or warnings. Use the Review on WAVE link for additional accessibility errors and alerts.

Errors

These items MUST be fixed to meet the accessibility requirements of WCAG 2.0 Level AA.

• Missing page title
  A unique descriptive page title helps people understand the webpage’s topic or purpose, especially for those using assistive technology.
• Links with missing or invalid hrefs
  The link is invalid. Provide the correct URL for the link.
• Linked image missing alt text
  The linked image is missing alternative text that describes the image function or destination.

Alerts

These items SHOULD be fixed to improve accessibility.

• Links are set to open in a new tab
  Links opening in a new window causes accessibility, usability, and security problems. Consider removing open in a new window. Or adding additional information to the link that indicates the link opens into a new window.
• Links with generic text
  The link text doesn’t describe the destination or function of the link. The ambiguous link text does not make sense out of context.
• Incorrect heading order
  Use a hierarchical sequence of headings. Headings provide an outline of your content and facilitate people navigating through the webpage.

Warnings

These are items that may need to be fixed. A manual check is needed.

• Links with urldefense.com in the URL
  These are links copied from email before they are rendered in a browser. They still contain ITS’s email security measures.
  Fix: Open the link in the browser, copy the new link, and replace the urldefense.com link with this one.
• Link text containing the URL protocol
  Link text should not contain the URL protocol (http://, https://). Link text without the URL protocol should be relatively short, such as the website’s homepage. If you have a long URL consider using a text link instead of a URL.
  Fix: Change the link text to descriptive text that describes the destination or the function. A short link as the link text is acceptable, like wsu.edu, wsu.edu/admissions, or go.wsu.edu/link-desitination.
• Link text containing a long URL
  Link text containing a URL should be relatively short, such as the website’s homepage without the URL protocol (http://, https://). If you have a long URL consider using a text link instead of a URL.
  Fix: Change the link text to descriptive text that describes the destination or the function. A short link as the link text is acceptable, like wsu.edu, wsu.edu/admissions, or go.wsu.edu/link-desitination.
• Images missing alt text
  The image is missing alternative text that describes the image content or function. Use an empty alt text only if the image is decorative.
  Manual Check: Determine if the image is decorative or adds meaning to the webpage.
  Resource: An alt Decision Tree
• Images where alt text should be the destination
  The linked image should have an alternative text that describes the image function or destination.
  Manual Check: Make sure the alternative text describes the destination or function of the link.
• Paragraphs with only bolded text
  Avoid bold text used to define a section heading. Turn bold text “headings” into the appropriate heading level for the structure of the content.
  Manual Check: Does the bold text represent the topic of the text below? Change it to an appropriate heading level. Is the bold text more than 6 words? Reconsider only bolding a few important words rather than the whole sentence.

Sample Webpage

This sample webpage has all the errors, alerts, and warnings checked by the plugin.

Sample Accessibility & Usability Panel

Review on WAVE

This webpage could still have accessibility issues.

Review your webpage in WAVE for other accessibility errors and alerts not caught by our Accessibility & Usability Panel.

WAVE Resources

• Introduction to WAVE (video)
• WAVE Help (article)
• How to use the WAVE extension and start manual accessibility testing (article)
• How to Test Web Accessibility Using the WAVE Tool: A Beginner’s Guide (article)