TOC
- Checking your Drupal page for accessibility
- Common types of WAVE errors that can be fixed in the editable area of a Drupal page
Checking your Drupal page for accessibility:
- To test your Drupal 10 page for accessibility, first get the WAVE extension for your browser. It’s available for: Chrome, Firefox, and Edge. WAVE powers Ohio State’s PopeTech accessibility report generator. With the browser extension you’ll be able to test a page with one-click.
- To start checking a page with WAVE, go to URL of the page in a browser where you’re not logged. If you use WAVE while you’re logged into Drupal, you may get false positives related to the administrative interface. You might choose to edit the page in one browser while testing it with WAVE in another.
- Press the WAVE button and start reviewing the results.
- Press the Details tab to see what errors and alerts were found. Errors tend to be more serious, objective problems, while alerts may be more subjective. WAVE will also let you know if your page has Contrast Errors.
- Click on an error icon and the click ‘Reference’ to learn more about the error and how to fix it. WAVE will tell you why the error matters and about the algorithm it used to find it. Occasionally you may notice an alert is actually a false positive.
- To actually fix an error, determine if the error in an editable area of your Drupal page. Content coming after the page’s primary heading H1 may be in the editable area. If the error isn’t in the editable area, but is in the frame around it (the website theme), contact your web developer or your helpdesk for web update requests.
- Log into to Drupal in another browser to begin fixing the error. Note the location where the error is happening.
Common types of WAVE errors that can be fixed in the editable area of a Drupal page:
- Skipped heading level alerts – to fix the heading structure you’ll need to select the headings in the Drupal editor where a level is skipped and change them to the appropriate level to nest directly under the next highest level. WAVE has a Structure tab that can show you the next highest level in the headings structure so you’ll know which to change the skipped ones to.
- Images missing alt text – click on the image and enter alt text description related for the purpose of the image.
- Empty headings – empty headings (with no text in them) sometimes are accidentally used as a spacer between paragraphs. To fix, backspace and delete where the empty heading is or select and delete it. If you still want the space you could select the empty heading and change it to a normal paragraph in the Drupal editor.
- Empty links – Sometimes a graphic or icon will be used as a link but have no accessible name (no actual link text or alt tag). When that happens, it’s known as an ‘empty link’. To fix an empty link, give it’s image some alt text related to the purpose of the link or include link text. You may need to switch to the source code view in the Drupal editor to find where to insert the link text in the <a> tag. Insert it between the opening and closing parts of the <a> tag.
If you have questions about WAVE, check their frequently asked questions help page.