ARIA: contentinfo role - Accessibility 编辑
The contentinfo landmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements. This section is commonly called a footer.
<div role="contentinfo">
<h2>Footer</h2>
<!-- footer content -->
</div>
This is a website footer. Using the <footer> element instead is recommended:
<footer>
<h2>Footer</h2>
<!-- footer content -->
</footer>
Description
The contentinfo role is a landmark used to identify a page footer. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. Pages should only include one top-level contentinfo landmark role per page.
Each page should only include one contentinfo landmark, created by either using the <footer> element or by declaring role="contentinfo". contentinfo landmarks present in content embedded via <iframe> elements do not count towards this limit.
Using the <footer> element will automatically communicate a section has a role of contentinfo. Developers should always prefer using the correct semantic HTML element over using ARIA, making sure to test for known issues in VoiceOver.
Examples
<body>
<!-- other page content -->
<div role="contentinfo">
<h2>MDN Web Docs</h2>
<ul>
<li><a href="#">Web Technologies</a></li>
<li><a href="#">Learn Web Development</a></li>
<li><a href="#">About MDN</a></li>
<li><a href="#">Feedback</a></li>
</ul>
<p>© 2005-2018 Mozilla and individual contributors. Content is available under <a href="#">these licenses</a>.</p>
</div>
</body>
Accessibility concerns
Use sparingly
Landmark roles are intended to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.
One contentinfo landmark per page
The <body> element
There should be only one contentinfo landmark per document, used as the immediate descendant of the <body> element.
Mega-footers
Do not nest additional <footer> elements or contentinfo landmarks inside of the document's footer. Use other content sectioning elements instead.
Labeling landmarks
Multiple landmarks
If there is more than one contentinfo landmark role or <footer> element in a document, provide a label with the aria-label attribute for each landmark. This label will allow assitive technology users to quickly understand the purpose of each landmark.
<body>
...
<article>
<h2>Everyday Pad Thai</h2>
<!-- article content -->
<footer aria-label="Everyday Pad Thai metadata">
<p>Posted on <time datetime="2018-09-23 12:17">May 16</time> by <a href="#">Lisa</a>.</p>
</footer>
</article>
...
<footer aria-label="Footer">
<!-- footer content -->
</footer>
</body>Redundant descriptions
Screen readers will announce the type of role the landmark is. Because of this, you do not need to describe what the landmark is in its label. For example, a declaration of role="contentinfo" with an of aria-label="Footer" may be announced redundantly as, "contentinfo footer".
Best practices
Prefer HTML
When it is an immediate descendant of the <body> element, using the <footer> element will automatically communicate a section has a role of contentinfo (save for a known issue in VoiceOver). If at all possible, prefer using <footer> instead. Note that a footer element nested within an article, aside, main, nav, or section is not considered contentinfo.
Added benefits
Certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
Specifications
Screen reader support
See also
- <footer>: The Footer element
- contentinfo (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
- Using HTML sections and outlines
- Landmark roles: Using ARIA: Roles, States, and Properties
- Using WAI-ARIA Landmarks – 2013 | The Paciello Group
- Accessible Landmarks | scottohara.me
- The Footer Element Update | HTML5 Doctor
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论