region
A perceivable section containing content that is relevant to a specific purpose and that users will likely want to navigate to. Regions MUST have an accessible name. Use this for important content that doesn't have a more specific landmark role.
Purpose
Generic landmark for important content without a specific role
HTML Equivalent
<section> with aria-labelledby or aria-label
Screen Reader
Announced as "region" landmark with its label
Important Note
The region role MUST have an accessible name (aria-label or aria-labelledby). Without a label, use the <section> element instead. Use regions sparingly - too many landmarks make navigation difficult.
💻Code Examples
Basic Region Landmark
Creating a labeled region for important content
<!-- Region with aria-label -->
<section role="region" aria-label="Live chat support">
<h2>Need Help?</h2>
<div class="chat-widget">
<!-- Chat interface -->
</div>
</section>
<!-- Region with aria-labelledby -->
<div role="region" aria-labelledby="news-heading">
<h2 id="news-heading">Latest News</h2>
<article>
<h3>Breaking News</h3>
<p>Important announcement...</p>
</article>
</div>Interactive Widget Region
Using region for interactive components
<!-- Weather Widget -->
<section role="region" aria-label="Weather forecast">
<h2>Current Weather</h2>
<div class="weather-data">
<div class="temperature">72°F</div>
<div class="conditions">Partly Cloudy</div>
<div class="forecast">
<!-- 5-day forecast -->
</div>
</div>
</section>
<!-- Interactive Map -->
<div role="region" aria-label="Store locator map">
<h2>Find a Store</h2>
<div id="map" aria-describedby="map-instructions">
<!-- Map interface -->
</div>
<p id="map-instructions">
Use arrow keys to pan, +/- to zoom
</p>
</div>⭐Best Practices
Always Label Regions
Region MUST have an accessible name via aria-label or aria-labelledby. Without a label, use <section> instead.
Use Sparingly
Only use region for important content that users would want to navigate to. Too many regions reduce effectiveness.
When to Use
Use for significant content areas without specific roles: live widgets, portlets, interactive tools, or major content blocks.