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.
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 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].
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.
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.
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.
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 simply because you prefer the font size and style.
Note that styles are managed with CSS by the site developers, so customizing is limited for content authors.
Access @ Rice, Basic Techniques for Headings.
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 [article].
Access @ Rice, Basic Techniques for Alt Text.
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.
Access @ Rice, Basic Techniques for Lists.
Format hyperlinks with descriptive text.
- Copy the URL you want to link to.
- 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.
- 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.
Access @ Rice, Basic techniques for links.
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.
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 [article].
Access @ Rice, Basic Techniques for Tables.
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.
Note: 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 in the CKEditor [article].
Accessibility Guide on Drupal [official guide].