Rice Web Platforms

Creating Accessible Content in Drupal

Many Rice websites are built with Drupal. This guide shows how to follow WCAG accessibility best practices when creating and editing content in Drupal.

For help with training, contact the Web Development & Digital Strategy team in the Office of Public Affairs.

Drupal Content Editor Overview

The Drupal editor lets you create accessible content using headings, lists, links, alt text, and more. The Editor "Body" includes a rich WYSIWYG (what you see is what you get) editor. Use the button icons for embedding and applying styles and formats to your content. You can edit visually or in HTML source mode.

Drupal 8 body editor with toolbar and sample text.

Titles and Headings

  • Use a unique, descriptive page title — this shows in the browser tab.
  • The Hero Title acts as the page's H1. Use only one H1 per page.
  • Start with H2s in the body content using the Format dropdown in the Editor.
  • Use logical nested order for headings (H2 > H3 > H4). Do not skip heading levels.

Images and Alternative Text

  • Alt text is required for images unless they are decorative/hold no meaning. If decorative, then use "" in the description field labeled "alternative text" or in the source code as alt="".
  • Alt text should describe purpose and context, not appearance. Avoid “image of...”
  • Keep it concise and equivalent (under 125 characters).

Lists and Links

  • Use bulleted or numbered lists to organize related items.
  • Lists help maintain clarity and readability with steps or options.
  • Format hyperlinks with text that clearly and descriptively informs the user what the link will do or go to (e.g., “Read the WCAG Guide” instead of "go here to read more").

Videos

  • Captions and transcripts are required for all videos used on Rice webpages.
  • Disable autoplay in the "video embed" button and enable responsive layout for mobile access.

Tables

  • Use tables only for data, not text layout.
  • Use the "Table" button to insert tables. Choose properties like the number of rows and columns and width and height.
  • Always use and format the first row as a header row. Select the combo box under the label "Headers," then select “First Row.”

Table properties modal with Headers options expanded.

Using CampusPress to Create Accessible Content

Rice University’s blogs.rice.edu Service blogs.rice.edu is hosted in the cloud by CampusPress, part of EduBlogs’ “WordPress for Education” platform.

CampusPress is designed specifically for education using the WordPress content management system. It offers easy-to-use tools to create student group websites, sites for specific course use, and more.

Faculty, staff, and students can create a website using the blogs.rice.edu site by logging in with their Rice NetID and password. Making the decision to create a website gives the content owner/creator the responsibility of ensuring that everyone can access it equally.

Visit the Complete Guide to WordPress Accessibility to read about accessibility in the CampusPress system.

General CampusPress Accessibility Tips

Select an accessibility-ready theme for the site. Blogs.rice.edu is limited to CampusPress-approved themes, which you can browse by going to Dashboard > Appearance > Themes and filtering by “Accessibility Ready.”

Be very careful of using add-ons, if you aren't sure they are accessible, ask us for help

Follow the essential practices of accessible design

Run an Accessibility Check

CampusPress includes a built-in Accessibility Review tool that scans your site for potential accessibility issues.

  • To enable it, go into your site's Dashboard and click on Plugins.
  • Locate the Accessible Content plugin and activate it (if it is not already activated).
  • To use it, click the Accessibility Review link in the black admin bar at the top right of each page.
  • If any issues appear, resolve them so that each page passes the check.
  • Some themes, such as the older Rice University themes, may not display the Accessibility Review link on the homepage. If you don’t see it there, open one of your pages or posts, and you’ll see the link appear at the top.

Running this review regularly helps ensure your site remains accessible as you add new content.

You can also use accessibility automatic review tools WebAIM WAVE and WebAIM Color Contrast Checker to review the site for any issues prior to publishing and any time edits are made.

Improve Link Accessibility with ARIA Labels

Short or generic link text can cause accessibility issues because it doesn’t provide enough context for screen readers. For example, links labeled simply as “Bio” or “Manuscript” may be confusing when read aloud.

To fix this without altering the appearance of your link on the page, use ARIA labels. These labels describe the link’s purpose for screen readers while keeping the visible text short and clean.

Example:

<a href="bio.html" aria-label="Dr. Smith’s bio">Bio</a>
<a href="manuscript.html" aria-label="View the full manuscript">Manuscript</a>

This approach preserves the concise link text while ensuring that accessibility tools can convey the full meaning to users.

Make PDF Links Descriptive

You can upload PDF files (like syllabi or CVs) to your CampusPress site. If the Accessibility Review flags links to these files, it’s usually because the link text isn’t descriptive enough, not because of the file format itself.

Add descriptive ARIA labels to clarify what each link points to:

Example:

<a href="smith_syllabus.pdf" aria-label="Dr. Smith’s Spring 2025 syllabus PDF">Syllabus</a>
<a href="smith_cv.pdf" aria-label="Dr. Smith’s CV PDF">CV</a>

This helps screen reader users understand exactly what each PDF contains before clicking the link.

Additional Accessibility Tips

  • Use proper heading structure: Arrange headings (<h1>, <h2>, <h3>) in order to organize content logically.

  • Add alt text for images: Always include descriptive alt attributes for images.

  • Avoid color-only indicators: Don’t rely on color alone to convey meaning (e.g., “items in red are required”).

  • Check contrast: Ensure that text contrasts sufficiently with the background colors for optimal readability.

  • Use descriptive link text: Instead of “click here,” write meaningful links like “Download the full report.”

More Resources

For detailed guidance on these best practices, visit: