Tips for Building Accessible Drupal Pages
When building pages in Drupal, here are some basic tips to ensure accessible content.
Font Size
Use pre-set font styles for headings, paragraphs, lists, etc. Avoid writing custom CSS to change font size—this can create accessibility issues. Stick with the default styles to ensure consistency and readability for all users.
Tables
Tables are used to organize and present tabular data such as financial results, calendars, etc. and should not be used for layout purposes only.
Build tables accessibly using provided tools:
- Describe complex data tables by providing summary text below the table.
- Avoid merged or split cells.
- Use the caption element to describe the content of data tables.
- Use appropriate toggle to indicate required column and/or row header(s).
- Add a markup to make them responsive.
Creating Links
When creating hyperlinks, use accessible practices to ensure clarity for all users. See the examples below for accessible link formatting. For more guidance, visit the Accessibility section.
- Use descriptive link text that clearly indicates the link’s purpose or destination.
- If linking to a downloadable file, include the file type and size. Ex: "Download the Annual Report [PDF, 1.2MB]"
- If the link opens in a new tab, let users know in the link text. Ex: "View application form [opens in new tab]"
Check Accessibility in Drupal
The built-in accessibility checker scans content as you edit, alerting you to issues with tooltips and suggestions. This checker is only visible in edit mode and is not shown to site visitors. Learn more about the Drupal Accessibility Checker in this article [opens in new tab].
Before publishing, make sure to review and resolve all flagged issues related to content you are the author for.
To open the editor, when you’re in the admin facing side of the page, click the list icon on the right side of the bottom of the page.
Click on the yellow circles with question marks to do a manual check on an element and mark as checked if okay. Most icons include expanded tooltips with guidance on how to resolve the issue.
As a content editor, you should prioritize reviewing and improving accessibility within your page content areas (e.g., main body text, images, and links). As this tool rolls out, some alerts may appear in areas outside of your editable content (like the navigation menu, footer, or sidebar). These are being addressed by the Web Development Team. Please do not attempt to fix these elements or select “ignore” on these alerts, as this may prevent proper resolution.
Accessibility Support
Accessibility is a shared responsibility and a core value at Seattle Colleges. To help you meet accessibility expectations, training and support resources are available.
If you need support with accessibility in Drupal, you can:
- Review the tooltips in the built-in Drupal Accessibility Checker
- Review the Drupal A11Y Accessibility Checklist [opens in new tab]
- Visit the Digital Accessibility Training Hub (internal resource) [opens in new tab]
- Contact the Digital Accessibility Team at dist.accessibility@seattlecolleges.edu
- Contact the Web Development Team at web@seattlecolleges.edu