Accessible Content Creation – Content Structure

Feature Image

Hey, this is Nick again with the Accessible Content Creation series. Previously, I talked about accessibility as it relates to headings. If you haven’t been through that part of the accessible content series, it’s a good idea to learn about semantic headings before getting into the rest of the content structure.

The important thing to understand is that good content structure is easy for all users to consume.

This means long blocks of text should be avoided when possible. Instead, use:

  • Shorter paragraphs
  • Headings
  • Lists
  • Blockquotes
  • Other elements to break up the text.

These are all very easy to use in WordPress. Let’s look at this section in the block editor. 

Paragraphs

Paragraphs are the starting point for content in the block editor. When you add a block without selecting which block to use, it defaults to a paragraph. These are great for putting together sentences. 

The issue is, long paragraphs can be difficult to read. Low vision users as well as users with certain reading disabilities and even ADD/ADHD can be lost in a long paragraph.

 Let’s break up the long introduction paragraph. I click just before “This means long…” to set my cursor position. Now I press the enter key to create a new paragraph at that point. 

The two new paragraphs are shorter and easier to read.

Lists

We’ve already discussed how to use headings, but another tip for  breaking up content is to use lists.

Lists can be ordered and unordered. An ordered list starts with numbers, letters, or roman numerals. These are generally used for information where the order matters. A good example would be recipe instructions. 

Unordered lists start with a bullet, circle, dash, or another  generic icon. These are great where the order isn’t as important. 

I can convert the introduction paragraph to use a list instead of a long text string.

Watch as I click the paragraph and put the cursor right after “Instead use.” I’m going to put a colon there because this will be the start of a list. Then I press enter. Now I’m going to put the cursor right before the text “These are all very easy to use…” and press enter to create a new paragraph.

Next, I can go back to the paragraph that starts with “shorter paragraphs” and use the “change block” control to switch this to a list. I’ll capitalize the first word of each element and remove punctuation. Then  press enter at the start of each item and presto listo, there’s a list.

Blockquotes

Now I’ll be adding a blockquote. Sometimes these are referred to as “pull quotes” or “long quotes”. They are  used in magazines to quote text that is elsewhere in the article and can be used with or without a citation. Let’s insert one right after this paragraph.

Blockquotes or pull quotes are a great way to break up content and draw the reader to important ideas. They can be used for long quotes as well. When used for a long quote, it is possible to provide a citation.

Remember to use blockquote blocks for actual blockquotes. It’s ok to use a pull quote to draw attention to some text, but do not just use them for design changes. They have a meaning. Specifically, the markup used when you make a blockquote indicates this is a kind of “quote” so there should be quoted content. A pull quote “pulls” content from elsewhere in a document and quotes it. A long quote is text that is a direct quote or paraphrase from a source that is cited. If the goal is to just markup some text, use the text controls to set color, background, font size, and weight.

This covers the most common content items you will use. While there are many other blocks, most blocks use some combination of these controls, do not have accessible content structure meaning, or will be covered in a later tutorial for specific details, like when I talk about alternate text and media.

One important content control that is often misused and abused is the table element. I’ll be covering that next time.

Get the latest from Reaktiv