How to fix common web accessibility issues in Drupal
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.
- Edit your page by clicking New Draft (or View Draft if a page edit has been started).
- 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.
- 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.
- 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).
- 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.
- If all edits are OK, click "Apply" button with the Published pop-up menu selected under "Set moderation state" in the yellow square.
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.
- Edit your page by clicking New Draft (or View Draft if a page edit has been started).
- Review the "Page Sidebar" section to ensure that all Headings used are in order from Heading 2, Heading 3, etc.
- Review the "Body" section to ensure that all Headings used are in order from Heading 2, Heading 3, etc.
- Click the "Save and Preview" button. If any images are missing alternative text, the page cannot be saved. See ISSUE #1, above.
- If all edits are OK, click "Apply" button with the Published pop-up menu selected under "Set moderation state" in the yellow square.
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
- Locate the link to a PDF on your site.
- Download the PDF to your local computer.
- 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
- Submit the PDF to the service with your email.
- The tagged, accessible PDF will be emailed back to you, with a new file name. This step can take up to 30 minutes.
- Check the tagged PDF next to the original PDF from your website to ensure that the content is accurate and consistent.
- Rename the PDF back to match the original name that you sent.
- Log into Drupal.
- Click on My Workbench > My Files to view all the files in your site.
- The File Manager appears:
- Click Upload tab at the top of the file manager,
- Drag the tagged, renamed PDF into the Upload window or click Add files to select the tagged PDF.
- Click the Upload button under the Add Files list,
- 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.
- Follow these steps to add closed captions to your video: https://support.google.com/youtube/answer/2734796?hl=en
- Your Drupal page which host(s) the embedded YouTube video(s) do not need to be updated.
Related articles