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.
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.
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.
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.
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.
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.
Learn more about the End-user Features of the CKE Editor.
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.
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.
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.
Alternative text is required when inserting images in the body. Simply type the description in the field labeled ‘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.
Use the list styles to format lists of information. Like headings, lists create semantic structure that improves readability and navigation for assistive technology.
If the list has no particular order or sequence, then use the ‘Insert/Remove bulleted list’ button.
If the list does have an order or sequence, then use the ‘Insert/Removed number list’ button.
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.
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.
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.
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.”
- 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.
Use the ‘Show Blocks’ button while editing to activate visual blocks of content like P for paragraph and H1 for Heading 1.
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.
Control + V
Command + V
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.
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.