Labeling Regions • Page Structure • WAI Web Accessibility Tutorials

Tutorials home »

Page Structure »
Current: Labeling Regions

Labeling Regions

Provide labels to distinguish two page regions of the same type, such as “main navigation” and “sub-navigation” menus using a <nav> element on the same page. Labels are also used to change the default identification of page regions, for example, to identify a <aside> region as “advertisement”. Regions that are unique, such as <main>, do not need additional labels.

Using aria-labelledby

Use aria-labelledby to point to an existing element by its (unique) id. The label of the region is the content of the referenced element. Every element can be a label this way. Labels should be short and descriptive. If a heading is present in the region, consider using it as the label:

Code snippet:

<nav aria-labelledby=“regionheading”>
<h3 id=“regionheading”>On this Page</h3>

</nav>

Explore other WAI-ARIA resources:

  • WAI-ARIA Overview
  • Notes on Using ARIA in HTML

Note: This approach using headings is also backward compatible for older web browsers and assistive technologies do not process HTML5 and WAI-ARIA.

Read article at w3.org

Article Taxonomies

Categories: , ,
Fatal error: Uncaught Error: Object of class WP_Error could not be converted to string in /home/webable/www/www/wp-content/themes/webable/content-mcm.php:65 Stack trace: #0 /home/webable/www/www/wp-includes/template.php(792): require() #1 /home/webable/www/www/wp-includes/template.php(725): load_template('/home/webable/w...', false, Array) #2 /home/webable/www/www/wp-includes/general-template.php(206): locate_template(Array, true, false, Array) #3 /home/webable/www/www/wp-content/themes/webable/single-mcm_article.php(15): get_template_part('content-mcm') #4 /home/webable/www/www/wp-includes/template-loader.php(106): include('/home/webable/w...') #5 /home/webable/www/www/wp-blog-header.php(19): require_once('/home/webable/w...') #6 /home/webable/www/www/index.php(17): require('/home/webable/w...') #7 {main} thrown in /home/webable/www/www/wp-content/themes/webable/content-mcm.php on line 65