Presentation Role Examples
PLEASE IGNORE THIS PAGE FOR NOW: This page is WIP that is just a mixed up pile of copy/pasted content, a few forward looking paragraphs/notes, etc. It is not worth reading for any purpose at this time. Issue 182 describes the purpose of and tracks the work associated with completing this page.
The following examples explain the various effects of the rules for using role
by illustrating how they change a browser's accessibility tree.
presentation is applied to an image, the image is completely hidden from assistive technologies.
In fact, in the case of image,
role="presentation" is equivalent to
On the other hand, when a heading is presentational, the heading semantic is removed and the inner text of the heading is exposed as plain text.
Illustrating these affects in terms of how they alter the accessibility tree reveals how these two results are entirely consistent.
… <h2>Other Histories of Architecture</h1> <p> <a href="www.somewhere.com">Ancient Roman Architecture</a> <img src="spacer.png" role="presentation"> <a href="somewhere.else.com">19th Century Italian Architecture</a> <img src="spacer.png" role="presentation"> <a href="www.elsewhere.com">Modern Buildings more than 100 Years Old</a> </p> <h2>Modern Building Design</h1> …
The resulting accessible tree is shown below. Note that none of the spacer
elements are present.
- [text] Other Histories of Architecture
- [text] Ancient Roman Architecture
- [text] 19th Century Italian Architecture
- [text] Modern Buildings more than 100 Years Old
- [text] Modern Building Design
role="presentation" hides the image from the accessibility API and does not publish the alt attribute contents.
<!-- 1. [role="presentation"] negates the implicit 'heading' role semantics but does not affect the contents. --> <h1 role="presentation">Presentation role overrides Header role</h1> <h1>Another header</h1> <!-- 2. [role="presentation"] hides the image from the accessibility API and does not publish the alt attribute contents. --> <img role="presentation" alt="This text will not appear in the Accessibility API" src="…">
The first header element is absent from the accessible tree for the above example, but its
text appears. The second header element is present as a
img element is not exposed at all:
- [text] Presentation role overrides Header role
- [text] Another header
Be aware that the markup
<img role="presentation" alt="non-empty alt
text"…> is in fact contradictory: Declaring a role of presentation says that the
image is for layout, is decorative and meaningless, whereas the non-empty alt text implies
that the image is meaningful. It is recommended that authors instead use empty
alt="") where they use
<!-- Layout table marked with [role="presentation"]. --> <table role="presentation"> <tbody> <tr> <td>Some text</td> <td><p>Paragraph</p></td> </tr> <tr> <td><a href="www.somewhere.com">Link text</a></td> <td><img src="meaningful.jpg" alt="meaningful image"></td> </tr> </tbody> </table>
All table specific elements (table, tr, td, etc.) are eliminated from the tree by inheriting the presentation role, but other elements and textual content in the table cells are exposed:
- [text] Some text
- [text] Paragraph
- Link text
- [name] meaningful image