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

image of balancing stones on river
Tired of Open-Source Chaos? Find Balance With a Proprietary CMS View this Story
Image of hourglass
Just One Month Before Google "Speeds Up The Internet": Don't Get Left Behind! View this Story
image of hands holding a plant
Cultivating Content: Making Your Website Blossom With Content Governance View this Story
block letters spelling "time for change"
Embrace Change: Rethinking Gift-giving at Beacon View this Story

Let's get to work!

Contact Us