How to add ARIA Labels for HTML SECTION and DIV Tags

By | 2018-12-11T08:32:27+00:00 December 11th, 2018|Categories: Web Development|Tags: , , |

Est. Reading Time: 2 minute

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>

About the Author:

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.