Drupal

At Rice, the website and most affiliated web pages are hosted and created through Drupal. Use the information below to become familiar with best practices for accessibility using Drupal. To learn about web accessibility best practices in general, visit the Web Content Accessibility Guidelines page.

Contact the Office of Public Affairs - Web Experience Innovation & Technical Operations team to learn more about Drupal 9 training opportunities.

Drupal 9 Content Editor


This guide demonstrates how to apply WCAG Basic Techniques when creating and remediating content in the Drupal 9 editor.

Title

Give all Drupal pages unique titles, even if they are closely related to other pages with similar titles.
Page titles should be concise and precise. They appear in the browser tab.

Title field with typed text that reads "Web Guides."

The "Title" field is required. Page titles are not the same as H1 tags, which are also required (one per page).
A simple rule is to make sure the Title and H1 are very similar, although they are not required to be identical.

Learn more about creating descriptive page titles [article, opens in new window].

Hero

The "Hero" is a large image that spans the width of the page at the top of the main region.

Hero images require alternative text, but we recommend marking them up as decorative.
To mark an image as decorative [article, opens in new window], simply type a pair of empty double quotes ("") in the "Alternative Text" field.

Important note: Avoid using the alternative text like “hero image,” as pictured in the following example.

Hero image alternative text field with typed text that reads "hero image."

The hero also includes a field labeled "Hero Title," which creates text that overlays the hero image.

Important Note: The "Hero Title" takes the role of the H1 on the page. Therefore, it should match the page title.
Avoid using the H1 tag in the body editor when using a hero title. If you do not use a Hero Title, then use one H1 in the body.

Body Editor

The Drupal 9 "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.
It also includes a "Source" editor if you prefer to work directly with the HTML markup.

Drupal 8 body editor with toolbar and sample text.

Headings

If the page has a hero image, then the "Hero Title" is formatted as H1.
Avoid using H1 again in the body as web pages should have only one H1.

Hero Title field with typed text that reads "Web Guides."

If the page has no hero image, don’t use "Hero Title."
Instead, use the paragraph format dropdown to select one H1 as the main heading at the top of the page.

Use headings 2 through 4 (h2-h4) in logical nested order.

It is important to not skip heading levels. For example, if you use a hero image and title, then start with h2 in the body.
Avoid starting with h3 or h4 simply because you prefer the font size and style.

Paragraph Format dropdown expanded with heading options.

Note that styles are managed with CSS by the site developers, so customizing is limited for content authors.

See also:

Access @ Rice, Basic Techniques for Headings.

Alternative Text

Alternative text is required when inserting images in the body. Simply type the description in the field labeled "Alternative text."

Alternative text field with typed text that reads "Pepperoni pizza."

Remember to follow key guidelines when creating your description.

  • Avoid starting with “image of,” and “picture of.”
  • Context is key. Why are you using the image?
  • Describe the concept not the image.
  • Keep it concise and equivalent (under 125 characters).

Learn more about Changing Alternative Text in the CK Editor [article].

See also:

Access @ Rice, Basic Techniques for Alt Text.

Lists

Use the list styles to format lists of information. Like headings, lists create semantic structure that improves readability and navigation for assistive technology.

Unordered and ordered list buttons.

Unordered List

If the list has no particular order or sequence, then use the "Insert/Remove bulleted list" button.

Ordered List

If the list does have an order or sequence, then use the "Insert/Removed number list" button.

See also:

Access @ Rice, Basic Techniques for Lists.

Format hyperlinks with descriptive text.

  1. Copy the URL you want to link to.
  2. Select the phrase or sentence in the body, then click the "Link" button.
    You can also press Control + K (Windows) or Command + K (Mac) to open the "Add Link" dialogue.
  3. Paste the URL into the "URL" field.

Important Note: The title is not required, but it can supplement your descriptive hyperlink text.
The title will appear in a tooltip on mouse hover, and it is announced by screen readers.
Do not type the exact same word or phrase in the "Title" field. Doing so creates redundancy for screen reader users.

Add Link modal with URL and Title fields.

See also:

Access @ Rice, Basic techniques for links.

Embed Video

To embed a video, select the "Video Embed" button, then paste the link into the field labeled "Video URL." Under the "Settings" section, choose the following:

  • Remove "Autoplay." Everyone hates autoplay video [article, opens in new window].
  • Select "Responsive Video" to improve reflow on different screen sizes and orientations.

Video Embed modal with Video URL field and Settings.

Important Note: All videos must include closed captions, even when sharing content you do not own.
If a video you do not own is not captioned, we recommend contacting the owner and requesting that they create captions.

See also:

Tables

Use the "Table" button to insert tables. Choose properties like the number of rows and columns, as well and the width and height. Reserve the first row for headers.

To format the top row as headers, simply select the combo box under the label "Headers," then select “First Row.”

Table properties modal with Headers options expanded.

Important notes:

  • Avoid using tables for layout/presentation purposes. Only use tables for data purposes.
  • Avoid using tables that consist of a single column. Use a list instead.

Learn more about working with tables in the CKEditor [article].

See also:

Access @ Rice, Basic Techniques for Tables.

Additional Tips

Show Blocks

Use the "Show Blocks" button while editing to activate visual blocks of content like P for paragraph and H1 for Heading 1.

"Show blocks" and "Source" buttons.

Paste Content from External Sources

Use one of the following keyboard combinations to paste from an external source.
Agree to let Drupal clean the formatting.

Windows keyboard

Control + V

Mac keyboard

Command + V

Remove Format

If necessary after pasting external content, select the pasted content, then select the "Removes Formats" button.
Note: It looks like an Italic, underlined capital letter “T” with an “X” subscript or TX.

Button for removing formatting.

After removing formats, apply styles headings, bold, italic, etc. to your text using the Drupal editor buttons. This will ensure clean HTML markup.

Learn more about Removing Text Formatting in the CK Editor [article].

More Resources

Accessibility Guide on Drupal [official guide].