11 12, 2018

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: , , |

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>