Accessible Themes and Organization in Pressbooks

What Are Themes and Organization?

Themes and organization are the clear signposts that make any trail easier to follow. Organizing content with logical flow through chapters, headings, and subheadings creates essential infrastructure that helps all students navigate and understand how main concepts relate to one another, whether they’re reading visually or using assistive technology.

For Whom Are You Doing This?

Everyone benefits from having content that’s clearly organized. Well-organized content supports students who:

• Have a learning disability, allowing them to easily find important points.
• Are blind or have low vision, allowing them to skip to relevant sections instead of having to listen to the screen reader read everything on the page.
• Efficiently want to find information, allowing them to easily scan content by headings and locate the content they want to read.

Why Is This Important?

Headings help to identify the hierarchical structure of a document (e.g., sections, sub-sections). They provide a visual cue that helps sighted readers quickly navigate through sections of a document, skimming until they find the section they are looking for. Similarly, headings create logical divisions in the content and allow a non-sighted user to navigate a page or document easily using a screen reader.

When it comes to using visual references to indicate the hierarchy and structure of a document, you might be accustomed to changing the font style, enlarging the type size, or highlighting the text with bold, underline, or italics to create the impression of a heading. This approach presents problems when creating material with accessibility in mind because screen readers won’t identify the text as a heading. Instead, the screen reader will just “read” through the text of a heading as if it were regular content, missing your intended cues about structure and organization.

What Do You Need To Do?

Set Accessible Themes and Organization

View the Video

View the video or read the steps below the video to learn how to make your OER Pressbook’s headings and organization accessible.

How to Set Accessible Themes and Organization in Pressbooks by Theresa Huff (OER for Social Justice)

Read the steps

Select the arrow next to each item to view the steps.

Themes

Start by choosing an accessible Theme in Pressbooks. Themes control the font, font size, and heading styles for your content’s text. The two themes that are most accessible are Jacobs and Malala. These two Themes are easily read by screen readers and those with a learning disability.

To choose a Theme, in Edit mode, select Appearance from the side menu [1]. Pressbooks Themes will display to the right, with the name of each Theme at the bottom [2]. To look more closely at a Theme, select Theme Details [3]. To choose a Theme, select Activate [4]. Your entire Pressbook will now appear with your chosen Theme.

Headings

In Pressbooks, use the visual editor to tag sections with Heading 2, sub-sections with Heading 3, sub-sections of sub-sections with Heading 4, and so on, following a hierarchy. Note: by default, the Chapter headings are Heading 1. Therefore, the first heading level on a page would be Heading 2.

Although Pressbooks provides up to six heading levels, that many levels might be difficult for your readers to keep track of. If you find yourself getting to four to six heading levels, consider breaking up your chapter into multiple chapters.

Textboxes With Titles

If you are creating your OER with Pressbooks, you might use some of the educational textboxes: Examples, Exercises, Key Takeaways, and Learning Objectives. Here is an example:

Examples [set at Heading level 3]

Type your examples here. [set as Paragraph]

• First
• Second

These textboxes have two sections that are different colors. The section on the top is for the textbox title and the section underneath is for the textbox content. For people who can see the textbox, the different colors used in the textbox title communicate that the text is a title. However, this is not communicated to people using screen readers. As such, the textbox title needs to be marked as a heading.

Which heading level you use will depend on where the textbox appears in the chapter. The heading level should be one level below the section heading level it appears under. So, in this chapter, “Textboxes with titles” is a heading level 2, so I have assigned the “Examples” textbox title heading level 3.

Inspect for Accessibility

If you are making existing chapters in your Pressbooks accessible, you’ll want to inspect it to see if it already is using accessible themes and organization. Your Pressbooks (and all web pages) have a hidden, back-end made up of code. Don’t worry – you don’t have to learn to code to use this option of checking accessibility. By right-clicking on parts of your Pressbook and inspecting the code, you can see if your Pressbook is set up for accessibility.

Select the arrow to view the video and written guidance.

Guidance for Inspecting headings

View the Video

View the Video [from 0:00 to 2:47] to learn how to inspect your Pressbooks for accessible headings and organization. .

How to Inspect the HTML Code for Accessibility by Theresa Huff (OER for Social Justice)

Read the Steps

Inspecting Headings and Organization

You can easily check your Pressbook or any digital page (including websites) to see if the Headings style is being used rather than just a larger font or bold formatting.

First, hover over the text that should be a Heading and right-click [1]. Then select Inspect [2].

An inspection panel will appear on the right side of your screen [1]. This panel shows the HTML or code side of the interface. Find the shaded portion, which corresponds to the text on which you right-clicked [2]. Notice the h1 at the beginning and ending of this shaded portion. h1 means that this portion of text is using Heading 1. Therefore, you can confirm that this text is using the Headings setting rather than just a large and bold font.

If you continue to look down the inspection panel, you will see another Heading being used, h2 [3]. h2 stands for Heading 2. Because it falls below the Heading 1 (h1) on the page, you can confirm that it is following the correct heading hierarchy.