Skip to content

role=note fleshed out a little. #1639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Mar 3, 2023
Merged

role=note fleshed out a little. #1639

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e0ece3b
role=note fleshed out a little.
brennanyoung Nov 5, 2021
b2a9afc
Role=note further refinement
brennanyoung Nov 5, 2021
d9fea75
Added period at end of sentence
brennanyoung Nov 9, 2021
1d3cfd7
additional changes
scottaohara Dec 22, 2021
707608a
minor typos and rewordings
scottaohara Dec 22, 2021
274a2c7
adjusting unintended extra whitespace in second example
scottaohara Dec 22, 2021
daf9536
update example
scottaohara Dec 22, 2021
380f02f
Update index.html
scottaohara Dec 23, 2021
1591365
Update index.html
scottaohara Jan 20, 2023
18427ad
Update index.html
scottaohara Jan 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5931,7 +5931,32 @@ <h5>Note regarding the ARIA 1.1 <code>none</code> role.</h5>
<div class="role" id="note">
<rdef>note</rdef>
<div class="role-description">
<p>A section whose content is parenthetic or ancillary to the main content of the resource.</p>
<p>A <rref>section</rref> whose content represents additional information or parenthetical context to the primary content it supplements.</p>
<p>A <code>note</code> is content provided by the author of the page or document, it is not to be used for providing reactions or suggestions. For these purposes, please review <rref>comment</rref> and <rref>suggestion</rref>.</p>
<p>When used within the normal flow of a page's content, a <code>note</code> has an implicit association with the content that it supplements. The following example demonstrates using a <code>note</code> to call out additional information in the natural reading order of a page:</p>
<pre class="example highlight">
&lt;p>... the following results outline support for the tested features.&lt;/p>
&lt;div role="note">
&lt;p>Please keep in mind that at the time of publishing this page all results were accurate.&lt;/p>
&lt;p>If you find any variations in results, please let us know!&lt;/p>
&lt;/div>
&lt;p>...&lt;/p>
</pre>
<p>In cases where an element with role <rref>note</rref> has been determined to need a programmatic association with the content it supplements, authors can use one of the following mechanisms to associate the elements:</p>
<ul>
<li>If the <code>note</code> contains structured or interactive content (for example, a link, button, list, table, etc.) use <pref>aria-details</pref>.</li>
<li>If the <code>note</code> is brief and consists of static text, use <pref>aria-describedby</pref>.</li>
</ul>
<pre class="example highlight">
&lt;!-- using aria-details to reference a note containing a link -->
...
&lt;button aria-details="info-note">Get Started&lt;/button>
...
&lt;div role="note" id="info-note">
&lt;p>Need more information before you get started?&lt;/p>
&lt;p>Visit our &lt;a href="...">product description page&lt;/a> to get all the information you need.&lt;/p>
&lt;/div>
</pre>
</div>
<table class="role-features">
<caption>Characteristics:</caption>
Expand Down