How to fix common web accessibility issues in Drupal

Owned by Jonathan Woolson
Last updated: Jan 16, 2024 by Jonathan Woolson

Assess your webpage with the WebAIM WAVE tool:

To find accessibility issues with a web page, please see How to test web site accessibility using WebAIM WAVE tool for Non-Drupal websites

Fix Issues

ISSUE #1: Provide accurate, descriptive alternative text (alt text) on all images

Alt text describes the content of images used in the page body, page sidebar, slideshows, etc. 

  1. Edit your page by clicking New Draft (or View Draft if a page edit has been started).
  2. First review the "Page Image/Carousel" section. Each image listed in this section must have a descriptive text description under it. You will get a warning if there is no text in the Alternative Text field for each image.
    Page Image dialog

  3. Review the "Page Sidebar" section for any images. Double-click on the image to view Image Properties dialog and enter relevant, descriptive text about the image.

    Page Sidebar image properties in Drupal

  4. Review the "Body" section for any images. Double-click on the image to view Image Properties dialog and enter relevant, descriptive text about the image. (see step 3, above).
  5. Click the "Save and Preview" button. If any images are missing alternative text, the page cannot be saved. Review each field, above for missing alternative (alt) text.
  6. If all edits are OK, click "Apply" button with the Published pop-up menu selected under "Set moderation state" in the yellow square.

    Set moderation state in Drupal

ISSUE #2.A: Headings order

Use Heading 2, Heading 3, and Heading 4 tags in a logical, consistent manner in the page body, so that the order or nesting of the headings used on the page does not skip from Heading 2 to a Heading 4, without a Heading 3 in between them, for example.

  1. Edit your page by clicking New Draft (or View Draft if a page edit has been started).
  2. Review the "Page Sidebar" section to ensure that all Headings used are in order from Heading 2, Heading 3, etc.
  3. Review the "Body" section to ensure that all Headings used are in order from Heading 2, Heading 3, etc.
  4. Click the "Save and Preview" button. If any images are missing alternative text, the page cannot be saved. See ISSUE #1, above.
  5. If all edits are OK, click "Apply" button with the Published pop-up menu selected under "Set moderation state" in the yellow square.

    Set moderation state in Drupal

ISSUE #2.B: Empty Headings

If a heading is just an empty line, commonly a result of an extra paragraph return, just delete the extra heading line.

ISSUE #3: Tagging PDFs with machine-readable text

Tagging PDFs with machine-readable text to make their content accessible to visually impaired users. Adam Hino’s Disability Support Services (DSS) site offers a free converter for PDFs, Word Docs, and other files, to convert it into an accessible PDF. The free document converter tool is called Sensus ApS: https://www.fredonia.edu/academics/disability-support-services/alternative-media

  1. Locate the link to a PDF on your site.
  2. Download the PDF to your local computer.
  3. Open the free PDF tagging service in a second web browser that is NOT logged into Drupal, https://www.fredonia.edu/academics/disability-support-services/alternative-media
  4. Submit the PDF to the service with your email. 
  5. The tagged, accessible PDF will be emailed back to you, with a new file name. This step can take up to 30 minutes.
  6. Check the tagged PDF next to the original PDF from your website to ensure that the content is accurate and consistent.
  7. Rename the PDF back to match the original name that you sent.
  8. Log into Drupal.
  9. Click on My Workbench > My Files to view all the files in your site.
    Choose My Workbench then My Files
  10. The File Manager appears:
    File Manager Dialog

  11. Click Upload tab at the top of the file manager,
    Upload files in File Manager

  12. Drag the tagged, renamed PDF into the Upload window or click Add files to select the tagged PDF.
  13. Click the Upload button under the Add Files list,Upload Button
  14. If the new filename matches the existing PDF filename exactly, then the new tagged PDF will replace the older PDF.

ISSUE #4: Enable closed captions on all YouTube videos

Enable closed captions on YouTube videos in the owner’s YouTube account.

  1. Follow these steps to add closed captions to your video: https://support.google.com/youtube/answer/2734796?hl=en 
  2. Your Drupal page which host(s) the embedded YouTube video(s) do not need to be updated.