Rice Web Content


Drupal 8 Training


As of fall 2020, the migration from Drupal 7 is complete. All web pages on the rice.edu domain are now managed in the Drupal 8 content management system (CMS). Please contact the Office of Public Affairs Marketing and Digital Communications team to learn more about basic Drupal 8 training.


Drupal 8 Content Editor


Creating and updating accessible web content using the Drupal 8 editor is easy. This guide is designed to show you how to apply the WCAG Basic Techniques using the Drupal 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 Text Screenshot

The ‘Title’ field is required. Page titles are not the same as H1 tags, which are also required (one per page). A simple rule of thumb is to make sure the Title and H1 match. They don’t have to be identical, but should be very similar.

Learn more about creating descriptive page titles.


Hero

The ‘Hero’ is a large image that spans the width of the page. It appears at the beginning of the main landmark (top of page).

Hero images require alternative text. Keep this alt text as basic as possible.

Important note: Avoid inputting the words “hero image,” as pictured in the following example. It might be simpler to put an empty pair of double quotes ("") to indicate that the image is decorative.

Hero Image Field Screenshot

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. You should also avoid using the H1 tag in the body editor when using a hero title. If you do not use a Hero Image/Title, then use one H1 in the body.


Body Editor

The Drupal 8 Body editor (CKEditor) is a rich WYSIWYG editor with graphical buttons for embedding and applying styles and formats to the content you create. It also includes a ‘Source’ editor if you prefer to work directly with the HTML markup.

Body Editor Screenshot

Learn more about the End-user Features of the CKE Editor.


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 Screenshot

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 for reasons related to font size.

Screenshot of the Variations of Heading sizes in Drupal

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

Learn more about Applying Block-Level Text Formats.

See also:

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.’

Screenshot in Drupal 8 of the Place holder for Alternative text

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 CKEditor.

See also:

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.

Screenshot in Drupal 8 of the lists functionality in the text editor

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:

Basic Techniques for Lists.


Format hyperlinks with descriptive text. Copy the URL you want to link to, then select the phrase or sentence in the body and click the ‘Link’ button. You can also press Control + K (Windows) or Command + K (Mac) to open the ‘Add Link’ dialogue. Paste the URL into the ‘URL’ field.

Important Note: The title is not required. If you choose to use the title, type text that supplements 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.

Screenshot in Drupal 8 of the link functionality in the text editor

See also:

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.
  • Select ‘Responsive Video’ to improve reflow on different screen sizes and orientations.

Screenshot in Drupal 8 of the video functionality in the page editor

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:

Basic Techniques for Captions.


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.”

Screenshot in Drupal 8 of the table functionality in the text editor

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.

See also:

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.

Screenshot in Drupal 8 of the "show blocks" functionality in the text editor


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. It looks like an Italic, underlined capital letter “T” with an “X” subscript or TX.

Screenshot in Drupal 8 of the functionality for removing formatting in the text editor

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.


Resources

Accessibility Guide on Drupal