How to add ARIA Labels for HTML SECTION and DIV Tags

Beacon Blog Article

By Zedric Myers | Published December 20, 2018 | Categories: Beacon News

This is an example of ARIA labels for screen readers that read ARIA labels. It ultimately helps the end user.

When you have a portion on the content in a section, it must contain a Head tag. If however is does not contain a head tag, and needs an aria-label to describe the section, simply add the region role.

This will allow the screen reader to detect it as a new region and then it will read out the ARIA label.

Examples: Using a SECTION Tag:

<section aria-label=”Brief description of this section”>
<h2>Heading Title</h2>
<p>Content area content</p>
</section>

Using a DIV Tag:

<div role=”region” aria-label=”Brief description of this area”>
<p>Content area content</p>
</div>

Recent Posts

Beaconville booth with Kent and Emily
Hello from Beaconville: High Ed Conference Wrap-Up View this Story
Confetti and Balloons
Cue the Confetti: Celebrating 2022's Higher Ed Wins So Far View this Story
Beach scene with Beacon logo
Beacon Technologies Opens Second Location in Carolina Beach, NC View this Story
outline of person sitting at computer and cheering
Why You Need Audience Personas For Your Website Content View this Story

Let's get to work!

Contact Us