Rice Web Content


Drupal 8 Training


All web pages on the rice.edu domain are managed in the Drupal 8 content management system (CMS).

Contact the Office of Public Affairs Marketing and Digital Communications to learn more about Drupal 8 training opportunities.


Drupal 8 Content Editor


This guide demonstrates how to apply WCAG Basic Techniques when creating and remediating content in the Drupal 8 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 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 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.
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 8 "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.

Body Editor Screenshot


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 simply because you prefer the font size and style.

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.

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

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

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:

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.

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

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.

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:


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

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.
Note: 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 in the CKEditor [article].


Resources

Accessibility Guide on Drupal [official guide].