region
Et generisk vartegn for indhold, der ikke passer til banner, main, navigation, complementary eller contentinfo — men stadig er vigtigt nok at navigere til. Et <section>-element bliver et region-vartegn kun når det har et tilgængeligt navn.
Hvornår bruges det
Til et meningsfuldt sideafsnit, der ikke matcher et andet vartegn, og som skærmlæserbrugere skal kunne hoppe til: en “Udvalgte produkter”-sektion, det aktuelle trin i en flertrinsformular, en chatudskrift-region inde i en større app.
<section> eksponeres som et region-vartegn KUN når det har et tilgængeligt navn (aria-label eller aria-labelledby). Et <section> uden navn er blot en generisk gruppe — ingen vartegnseksponering. Det er bevidst: for mange vartegn gør vartegnsmenuen ubrugelig.
role="region" på et <div> fungerer på samme måde — navn er påkrævet.
Region kontra group
Brug role="region" (eller <section aria-label>) | Brug role="group" |
|---|---|
| Større sideafsnit der fortjener vartegnsnavigation | Samling af relaterede kontroller uden vartegnsstatus |
| Én eller to per side | Kan forekomme mange gange per side |
| Har altid et tilgængeligt navn | Navn valgfrit |
Er du i tvivl: spørg »Vil jeg have, at en skærmlæserbruger kan hoppe direkte hertil?« Ja → region. Nej → group.
Typiske fejl
<section>udenaria-labelelleraria-labelledby. Det er ikke et vartegn; indpakningen gør intet for tilgængelighed.- At markere hvert
<section>som en region. Oversvømmer vartegnsmenuen og udvander værdien af hvert vartegn. aria-label="Section"— meningsløst. Etiketten bør beskrive hvad der gør dette afsnit særligt.- At bruge
role="region"til en sidebar — det ercomplementary. Vælg det mest specifikke vartegn. role="region"på det omsluttende<div>OG på et indre<section>— duplikerede vartegn for det samme indhold.
Eksempel
<section aria-labelledby="recent">
<h2 id="recent">Recently published</h2>
<ul>
<li><a href="/articles/aria-roles">ARIA roles overview</a></li>
<li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
</ul>
</section>