Changes to heading styles and images for Drupal editors

This bulletin applies directly to content editors in the Drupal CMS, but the concepts are also relevant to any web author.

The webteam has recently refocused our efforts to make the website accessible to everyone, regardless of disability. (We’ll be telling you more about this throughout the spring semester.) While a lot of these improvements are being made on the technical side, we've also found some key ways all web content editors can help: using headings as an outline and describing what’s in a picture.

Use Headings as an Outline

The first way you can help has to do with heading levels. Long story short: As you add and revise content on the website, it’s important to use headings as a structured outline of the content, without skipping heading levels. This will help anyone using screen reader software (a program for blind and low vision people) to better understand what’s on the page so they can decide which parts to read.

For an example, look at the headings on this page. There is a title followed by 3 main sections, and one of the sections has 2 secondary headings. Here’s how the outline looks:

Title: Changes to Heading Styles and Images for Drupal Editors (level 1)

1. Use Headings as an Outline (level 2)
   1. The Problem with Inconsistent Headings (level 3)
   2. How We’re Using Headings Now (level 3)
2. Tell People What’s in the Picture (level 2)
3. Questions? (level 2)

The Problem with Inconsistent Headings

In HTML, heading tags (H2, H3, etc.) are used to label sections of a page, or in the case of H1, the title of the page. Each heading level typically has a distinct font style, usually varying the size and weight, to help readers differentiate between them.

Our recent accessibility audit found that on hundreds of pages on our site, the headings in the page body (the part of the page with the main content) were organized inconsistently. The reason most of us did this was to control how the text looks (to sighted people). In the original design on our new site, the level 2 heading looked huge on a basic page, and many page authors (including us!) compensated by using a level 3 or level 4 heading to avoid taking up so much space.

As it turns out, those heading levels carry extremely important meaning, beyond just how they look. When headings are organized inconsistently, people using a screen reader have difficulty figuring out the structure of the page. This is because the software uses the headings as an outline for navigating page content.

When headings don’t follow an outline, there can be unintended consequences. For example, if you use a level 3 heading after the page title, skipping level 2, it might look fine. But someone using a screen reader might only browse to a depth of level 2 to get a sense of the page content, never encountering the level 3 section – therefore missing out on a main part of the page.

How We’re Using Headings Now

The webteam has made a few changes in Drupal to help page authors choose the right heading level. First of all, we’ve scaled down the fonts so that level 2 now looks more appropriate as a section heading. In addition, we’ve renamed the headings in the editing toolbar to make their structural purpose more evident:

• Main Heading (H2)
• Secondary Heading (H3)
• Subsection Heading (H4)
• Sub-subsection Heading (H5)

You’ll also notice that in the editor, the fonts now look more like they do on the site. This should help you keep track of the heading levels in your page while you’re making edits.

As you add and revise content on the website, please remember to use the headings as a structured outline and never skip a heading level. If you notice in the coming days that the headings on your existing pages suddenly look too small, it probably means a level was skipped when the page was first created. When you edit the page, you’ll need to make sure the first heading used is set as a Main Heading (H2) and that any subsequent headings are using the right level.

Tell People What’s in the Picture

A second change you’ll notice when editing pages is that images now require “alt text,” which is a description of the image for people who can’t see it. This is another change to improve the user experience of people using screen readers. The alt text is hidden from view in a visual web browser, but to a screen reader user, it’s a valuable part of the page content.

A few tips for writing useful alt text:

• Describe aspects of the picture that are relevant to the page content.
• If the picture has a caption below it, don’t duplicate the caption in the alt text. The caption usually provides context or an explanation, whereas the alt text is just a description of what’s visible in the photo.
• If the image has text (such as a graphic, or a picture of a sign) you must transcribe it in the alt text.

For more guidance on using alt text, see the Oberlin College Drupal User Guide.

Questions?

Please contact the webteam (webteam@oberlin.edu) with any questions.