Drupal Accessibility Features
There are digital accessibility features built-in to Drupal for creating and/or editing webpages. These features make accessibility easier to achieve. In layout builder the accessibility for color contrast and font selection have been taken care. Adding alternative (alt) text, using proper heading and paragraph structure and using Editora11y (the built-in accessibility checker) are quick ways to ensure digital content is accessible to all.
- Check out the Alternative Text Guide
- Alternative, or Alt, Text is text added to any images, graphs, charts, or non-text content that is read by screen readers.
- When adding an image in Drupal, there is a required, built-in option to add alt text. Adding alt text is necessary to save and insert the image.
- Using the "Title" attribute when adding an image, icon, button, etc. The title attribute is especially helpful for buttons and icons. For example, when adding a "Read More" button, add a title attribute that says "Read More about Digital Accessibility." This attribute will be read to screen reader users and will be shown to sighted users when they hover over it.
- Heading structure and semantics are key to having an accessible webpage.
- Screen reader users can search pages by heading structure (H1, H2, H3, etc.) to help them navigate a webpage. Having correct heading structure is critical to content layout.
- Drupal allows the ability to select heading and paragraph structure in the “Paragraph Format” dropdown. The page title will always be a Heading 1, any headings thereafter should follow Heading 2, Heading 3, etc.
There are six heading levels and they should always be used in the proper order.
- Heading 1 (H1) is always the page title.
- Heading 2 (H2) should be headings for the main sections on a page.
- Heading 3 (H3) should be headings for subsections within an H2 section.
- Heading 4 (H4) should be headings for subsections within an H3 section.
- Heading 5 (H5) should be headings for subsections within an H4 section.
- Heading 6 (H6) should be headings for subsections within an H5 section.
You should never skip levels (e.g. starting your content with a Heading 3) or create your own headings using text sizes, bolding, text color, etc. However, you can apply text styles to properly marked up headings.
- Paragraph/Body text should be formatted as “normal.”
- Editora11y is an accessibility checker specific to Drupal, created by Princeton that ETS has built-in to the backend of all ETS maintained sites.
- When creating a new page or editing an existing page, look for the editora11y panel in the lower right-hand corner.
What does Editora11y check for?
- Alternative Text
- Do all images have alt text?
- Redundant alt text
- Images in links with alt text that appears to be describing the image instead of the link destination
- Meaningful Links
- Links with no text
- Links titled with a filename
- Links with generic text: “click here,” “learn more,” “download,” etc.
- Links that open in a new window without warning
- Document Outline and Structure
- Skipped heading levels
- Empty headings
- Table structure
- Suspicious content structure that may need to be a list
- General QA
- Text in ALL CAPS
- Embedded content (videos, audio, etc.)
- Links to PDFs and other documents, reminding the user to test the download for accessibility or provide an alternate, accessible format
- Editora11y accessibility icons
If a page passes accessibility, the circular person will appear by itself. No further action is needed.
If a page requires manual checks, the question mark icon will be visible with the number of manual checks required.
If a page has likely issues, the exclamation point icon will be visible with the number of issues that need addressed.
It is possible to have both the manual check and likely issues icons appear together.
- To address accessibility issues, click on the checks or issues icon and follow the prompts to correct any issues.
- While editora11y can catch some accessibility issues, it is not perfect and doesn’t catch everything, but it’s a great start to creating accessible content.