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
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.
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.
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.
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.
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.
<p> as a Container
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.
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.