Containers for Emphasis

Examples of using HTML containers to emphasize content.

These HTML containers help assistive technology distinguish which parts of your content is additional information and which parts are the main body of text.

On their own, they look no different than a regular paragraph. However, you can design these containers to visually stand out from your main body of text.

<aside> or <section> Containers

Most Accessible

For general announcements, highlighting ideas, giving  more information, suggesting related content, creating side-bars, boxes, etc.

In the following example from the Web Accessibility Initiative (WAI) website, the box titled “More Info on Evaluating Accessibility” is an <aside> container. Asides are a good for choice emphasizing content that is directly related to the main content on your webpage. Also, the <aside> is not randomly placed. It is included under the “Evaluating Accessibility” heading, this structure relates the emphasized content to a specific topic.

Example of an html aside for emphasis on the WAI website. Image description precedes this image.

 

In the following example from Deque Systems, the boxes located in the right column, containing “Learn Web Accessibility” and “Sign up for the axe newsletter,” are both in <section> containers. Sections are a good choice for emphasizing content not directly related to the main content of your page.

Example of an aside for emphasis on the Deque Systems website. Text description is in the preceding paragraph.

 

<alert> Containers

Most Accessible

Only for urgent announcements, error messages, and successful completion messages. Alerts often have a close button so they can be turned off.

In the following example from the DC HealthLink website, the “Individuals and Families” message at the top of the website is an <alert>. Alerts are only for emergency messaging and error/success messages because the screen reader will announce them automatically when they appear, regardless of where the user is focused on the page. Because of their interactivity, alert boxes are usually coded for you by a developer or part of your web publishing software. However, you may need to author content that goes inside of the box. For that, you should incorporate Text Formatting for Emphasis  and Content Cues for Emphasis techniques.

Example of an html alert for emphasis on the DC HealthLink website. Image description precedes this image.

 

<div> Containers

Less Accessible to Accessible

Not all CMS’s, LMS’s, blogging platforms, and document editors have the latest web accessible technologies so you’ll need to make do with what you have to work with. The <div> container is an old standard HTML tag that can help out in a pinch. It’s really best to stop using generic <div> tags.

  • <div> is the last resort alternative to <aside>, <section>, and <alert> containers.
  • Assign the role=”group”  attribute, if you can.

In the following example from WebAim.org, the box containing the “Important” message is in a <div> container. It is included under the introduction heading; this placement relates the emphasized information specifically to the Introduction.

Example of an html div for emphasis on the WebAim website. Image description precedes this image.

 

In the following example from Deque Systems, the “Note” message is a <div> container. It is included under the “How to fix the problem” heading; this helps relate the note to that specific topic.

Example of an html div for emphasis on the Deque Systems website. Image description precedes this image.

<p> as a Container

Accessible

For content that is actually part of your main body text but you just want to flag it for emphasis.

  • Combine with Text Emphasis and Content Cues techniques to make the <p> as accessible as possible.

In the following example from Blackboard, an icon is placed to the left of the sentence to show emphasis. The sentence could actually be part of the main body of the text. If the icon was removed, the text would seamlessly fit into the reading order of the surrounding content.

Example of an html paragraph for emphasis on the Blackboard website. Image description precedes this image.

 

In the following example from tenon.io, emphasis is shown by adding the word “Note:,” in bold, to the beginning of the sentence.  The sentence could actually be part of the main body of the text. If the word “Note:” was removed, the sentence would seamlessly fit into the reading order of the surrounding content.

Example of an html paragraph as emphasis on the Tenon.io website. Image description precedes this image.

Leave a Reply

Your email address will not be published. Required fields are marked *