Skip to content
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

Issue899 accname from heading #1018

Closed
wants to merge 25 commits into from
Closed

Issue899 accname from heading #1018

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
ec71e9c
initial proposal for accessible name from heading
jongund Jul 21, 2019
f73203e
added dialog and alertdialog
jongund Jul 21, 2019
7e1aa61
Merge branch 'master' into issue899-accname-from-heading
jongund Jul 31, 2019
8547f5e
added nesting restrictions for naming and added region as a potential…
jongund Jul 31, 2019
5cc0b84
updated defintion of region role authoring practices
jongund Aug 1, 2019
ddf5ee3
updated defintion of region role authoring practices
jongund Aug 1, 2019
dfe9ff9
updated defintion of region role authoring practices
jongund Aug 1, 2019
75c7b5d
updated definition of name from heading definition
jongund Aug 1, 2019
1c5da0e
removed main element from list and restricted heading ro be first child
jongund Aug 1, 2019
f5206e6
made the heading naming technique adpatable to requirements of naming…
jongund Aug 2, 2019
aea75f6
added restructoin to only naming nearest ancestor
jongund Aug 2, 2019
487fb4f
clarified first descentant element with role heading using depth firs…
jongund Aug 2, 2019
5ceb223
Apply suggestions from code review
cookiecrook Sep 16, 2022
10b90f5
testing whitespace cruft correction in the GH interface
cookiecrook Sep 16, 2022
cd7cc12
m. test whitespace diff correction
cookiecrook Sep 16, 2022
c03c01d
Apply suggestions from code review
cookiecrook Sep 16, 2022
6d88243
m. missed one errant whitespace diff
cookiecrook Sep 16, 2022
932765b
Apply suggestions from code review
cookiecrook Oct 8, 2022
14c1f8e
pulling inessentials out of the diff before re-requesting reviews
cookiecrook Oct 8, 2022
fca0262
extra whitespace included in new line
cookiecrook Oct 8, 2022
0b6697b
deleting excess
cookiecrook Oct 8, 2022
455274f
m. ed nit
cookiecrook Jan 25, 2023
6fd2836
m. ed
cookiecrook Jan 25, 2023
c852c8f
remove namefrom: encapsulation
cookiecrook Jan 25, 2023
51af51b
remove namefrom: legend
cookiecrook Jan 25, 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
16 changes: 15 additions & 1 deletion common/script/aria.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,7 @@ require(["core/pubsubhub"], function( respecEvents ) {
var fromContent = "";
var fromEncapsulation = "";
var fromLegend = "";
var fromHeading = "";
var fromProhibited = "";

$.each(document.querySelectorAll("rdef"), function(i,item) {
Expand Down Expand Up @@ -363,7 +364,10 @@ require(["core/pubsubhub"], function( respecEvents ) {
}
if (node.textContent.indexOf("legend") !== -1) {
fromLegend += "<li><a href=\"#" + pnID + "\" class=\"role-reference\"><code>" + content + "</code></a>" + req + "</li>";
}
}
if (node.textContent.indexOf("heading") !== -1) {
fromHeading += "<li><a href=\"#" + pnID + "\" class=\"role-reference\"><code>" + content + "</code></a>" + req + "</li>";
}
});
}
if (container.nodeName.toLowerCase() == "div") {
Expand Down Expand Up @@ -562,6 +566,16 @@ require(["core/pubsubhub"], function( respecEvents ) {
parentNode.replaceChild(list, node);
}

node = document.getElementById("index_fromheading");
if (node) {
parentNode = node.parentNode;
list = document.createElement("ul");
list.id = "index_fromheading";
list.className = "compact";
list.innerHTML = fromHeading;
parentNode.replaceChild(list, node);
}

node = document.getElementById("index_fromprohibited");
if (node) {
parentNode = node.parentNode;
Expand Down
53 changes: 45 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,6 +533,7 @@ <h3>Accessible Name Calculation</h3>
<li>author: name comes from values provided by the author in explicit markup features such as the <pref>aria-label</pref> attribute, the <pref>aria-labelledby</pref> attribute, or the host language labeling mechanism, such as the <code>alt</code> or <code>title</code> attributes in <abbr title="Hypertext Markup Language">HTML</abbr>, with HTML <code>title</code> attribute having the lowest precedence for specifying a text alternative.</li>
<li>contents: name comes from the text value of the <a>element</a> node. Although this may be allowed in addition to "author" in some <a>roles</a>, this is used in content only if higher priority "author" features are not provided. Priority is defined by the <a href="https://www.w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te">accessible name and description computation</a> algorithm. [[ACCNAME-1.1]]</li>
<li>encapsulation: name comes from the text value of the <a>element</a> node with role <code>label</code> that is the closest ancestor. Although "encapsulation" may be allowed in addition to "author" and "contents" in some <a>roles</a>, "encapsulation" is used only if higher priority "author" features are not provided. Priority is defined by the <a href="https://www.w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te">accessible name and description computation</a> algorithm. [[ACCNAME-1.1]]</li>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved
<li>heading: name comes from the text value of the first descendant (i.e. depth first) <a>element</a> node with the role of <code>heading</code>. Although "heading" may be allowed in addition to "author" in some <a>roles</a>, "heading" is used in content only if higher priority "author" features are not provided. Priority is defined by the <a href="https://www.w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te">accessible name and description computation</a> algorithm. [[ACCNAME-1.1]]</li>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved
<li>legend: name comes from the text value of the first descendant <a>element</a> node with the role of <code>legend</code>. Although "legend" may be allowed in addition to "author" in some <a>roles</a>, "legend" is used in content only if higher priority "author" features are not provided. Priority is defined by the <a href="https://www.w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te">accessible name and description computation</a> algorithm. [[ACCNAME-1.1]]</li>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved
<li>prohibited: the element has no name. Authors MUST NOT use the <pref>aria-label</pref> or <pref>aria-labelledby</pref> attributes to name the element.</li>
</ol>
Expand Down Expand Up @@ -564,6 +565,11 @@ <h4>Roles Supporting Name from Encapsulation</h4>
<div id="index_fromencapsulation">
</div>
</section>
<section id="namefromheading">
<h4>Roles Supporting Name from Heading</h4>
<div id="index_fromheading">
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
</div>
</section>
<section id="namefromlegend">
<h4>Roles Supporting Name from Legend</h4>
<div id="index_fromlegend">
Expand Down Expand Up @@ -857,6 +863,7 @@ <h2>Definition of Roles</h2>
<p>A type of dialog that contains an alert message, where initial focus goes to an <a>element</a> within the dialog. See related <rref>alert</rref> and <rref>dialog</rref>.</p>
<p>Alert dialogs are used to convey messages to alert the user. The <code>alertdialog</code> <a>role</a> goes on the node containing both the alert message and the rest of the dialog. Content authors SHOULD make alert dialogs modal by ensuring that, while the <code>alertdialog</code> is shown, keyboard and mouse interactions only operate within the dialog. See <pref>aria-modal</pref>.</p>
<p>Unlike <rref>alert</rref>, <code>alertdialog</code> can receive a response from the user. For example, to confirm that the user understands the alert being generated. When the alert dialog is displayed, authors SHOULD set focus to an active element within the alert dialog, such as a form edit field or an OK button. The <a>user agent</a> SHOULD fire a system alert <a>event</a> through the accessibility API when the alert is created, provided one is specified by the intended <a>accessibility <abbr title="Application Programing Interfaces">API</abbr></a>.</p>
<p>Authors MUST give each element with role <rref>alertdialog</rref> a brief label that describes the purpose of the content in the alert dialog. Authors SHOULD use the first visible element of the dialog with an explicit or implicit role of <rref>heading</rref> to provide a label. If a visible label is present, but not contained in the first element with a role of <rref>heading</rref>, authors SHOULD reference the visible label with <pref>aria-labelledby</pref>.</p>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved
<p>Authors SHOULD use <pref>aria-describedby</pref> on an <code>alertdialog</code> to reference the alert message element in the dialog. If they do not, an <a>assistive technology</a> can resort to its internal recovery mechanism to determine the contents of the alert message.</p>
</div>
<table class="role-features">
Expand Down Expand Up @@ -915,7 +922,12 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>author</li>
<li>heading</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down Expand Up @@ -1091,7 +1103,12 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>author</li>
<li>heading</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down Expand Up @@ -2308,6 +2325,7 @@ <h2>Definition of Roles</h2>
<div class="role-description">
<p>A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.</p>
<p>There are various types of content that would appropriately have this <a>role</a>. For example, in the case of a portal, this may include but not be limited to show times, current weather, related articles, or stocks to watch. The complementary role indicates that contained content is relevant to the main content. If the complementary content is completely separable from the main content, it may be appropriate to use a more general role.</p>
<p>If authors provide more than one element with the role complementary on a page, authors SHOULD give each complementary region a brief label that describes the purpose of the content in the region. Authors SHOULD use a visible heading as the first child element of the region to provide a label whenever possible. The heading MAY be an instance of the standard host language heading element or an instance of an element with role <rref>heading</rref>. If a visible label is present, but not contained in the first child element with a role of heading, authors SHOULD reference the visible label with <pref>aria-labelledby</pref> .</p>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved
<p>User agents SHOULD treat elements with the role of <code>complementary</code> as navigational <a>landmarks</a>.</p>
</div>
<table class="role-features">
Expand Down Expand Up @@ -2361,7 +2379,12 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>author</li>
<li>heading</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down Expand Up @@ -2697,7 +2720,6 @@ <h2>Definition of Roles</h2>
<div class="role-description">
<p>A dialog is a descendant window of the primary window of a web application. For <abbr title="Hypertext Markup Language">HTML</abbr> pages, the primary application window is the entire web document, i.e., the <code>body</code> element.</p>
<p>Dialogs are most often used to prompt the user to enter or respond to information. A dialog that is designed to interrupt workflow is usually modal. See related <rref>alertdialog</rref>.</p>
<p>Authors SHOULD provide a dialog label, which can be done with the <pref>aria-label</pref> or <pref>aria-labelledby</pref> attribute.</p>
<p>Authors SHOULD ensure that all dialogs (both modal and non-modal) have at least one focusable descendant element. Authors SHOULD focus an element in the modal dialog when it is displayed, and authors SHOULD manage focus of modal dialogs.</p>
<p class="note">In the description of this role, the term "web application" does not refer to the <rref>application</rref> role, which specifies specific assistive technology behaviors.</p>
</div>
Expand Down Expand Up @@ -2752,7 +2774,12 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>author</li>
<li>heading</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down Expand Up @@ -5644,7 +5671,12 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>author</li>
<li>heading</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down Expand Up @@ -6549,7 +6581,7 @@ <h5>Presentational Roles Conflict Resolution</h5>
<div class="role-description">
<p>A perceivable <rref>section</rref> containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.</p>
<p>Authors SHOULD limit use of the region role to sections containing content with a purpose that is not accurately described by one of the other <rref>landmark</rref> roles, such as <rref>main</rref>, <rref>complementary</rref>, or <rref>navigation</rref>.</p>
<p>Authors MUST give each element with role region a brief label that describes the purpose of the content in the region. Authors SHOULD reference a visible label with <pref>aria-labelledby</pref> if a visible label is present. Authors SHOULD include the label inside of a heading whenever possible. The heading MAY be an instance of the standard host language heading element or an instance of an element with role <rref>heading</rref>.</p>
<p>Authors MUST give each element with role region a brief label that describes the purpose of the content in the region. For host languages that support elments with the default role of region (e.g. HTML <code>section</code>), an explict region role must be defined (e.g. <code>role="region"</code>) to enable the nameFrom: heading technique.</p>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved
<p><a>Assistive technologies</a> SHOULD enable users to quickly navigate to elements with role region. Mainstream <a>user agents</a> MAY enable users to quickly navigate to elements with role region.</p>
</div>
<table class="role-features">
Expand Down Expand Up @@ -6605,7 +6637,12 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>author</li>
<li>heading</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down