term/definition should use aria-details instead of aria-labelledby (#1147)

aleventhal · scottaohara · carmacleod · web-flow · commit e496a4d91b84 · 2020-12-16T11:58:50.000-08:00
* term/defnition should use aria-details instead of aria-labelledby
* Name is prohibited on a term
* Prohibit name on a definition, require that a definition MUST have a term, require that a term with a matching definition MUST use aria-details to point to it
* Suggested change to alleviate confusion where there is no definition, that should provide a good screen reader experience in that case.
Co-authored-by: Scott O'Hara &lt;scottaohara@users.noreply.github.com&gt;
Co-authored-by: Carolyn MacLeod &lt;Carolyn_MacLeod@ca.ibm.com&gt;
Co-authored-by: James Nurthen &lt;james@nurthen.com&gt;
diff --git a/index.html b/index.html
@@ -2668,11 +2668,12 @@ <h2>Definition of Roles</h2>
 			</table>
 		</div>
 		<div class="role" id="definition">
-			<rdef>definition</rdef>
-			<div class="role-description">
-				<p>A definition of a term or concept. See related <rref>term</rref>.</p>
-				<p>Authors SHOULD identify the <a>element</a> being defined by giving that element a role of <rref>term</rref> and referencing it with the <pref>aria-labelledby</pref> <a>attribute</a> or by making the element with role <rref>term</rref> a descendant of the element with role <code>definition</code>.</p>
-			</div>
+      		<rdef>definition</rdef>
+      		<div class="role-description">
+        		<p>A definition of a term or concept. See related <rref>term</rref>.</p>
+        		<p>Authors MUST identify the <a>element</a> being defined and assign that element a role of <rref>term</rref>.</p>
+        		<p>Authors SHOULD NOT use the <code>definition</code> role on interactive elements such as form controls because doing so could prevent users of assistive technologies from interacting with those elements.</p>
+      		</div>
 			<table class="role-features">
 				<caption>Characteristics:</caption>
 				<thead>
@@ -2718,9 +2719,18 @@ <h2>Definition of Roles</h2>
 						<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
 						<td class="role-inherited">Placeholder</td>
 					</tr>
+					<tr>
+						<th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th>
+						<td class="role-disallowed">
+							<ul>
+								<li><pref>aria-label</pref></li>
+								<li><pref>aria-labelledby</pref></li>
+							</ul>
+					 </td>
+					</tr>
 					<tr>
 						<th class="role-namefrom-head" scope="row">Name From:</th>
-						<td class="role-namefrom">author</td>
+						<td class="role-namefrom">prohibited</td>
 					</tr>
 					<tr>
 						<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
@@ -9072,8 +9082,8 @@ <h5>Presentational Roles Conflict Resolution</h5>
 		<div class="role" id="term">
 			<rdef>term</rdef>
 			<div class="role-description">
-				<p>A word or phrase with a corresponding definition. See related <rref>definition</rref>.</p>
-				<p>The <code>term</code> role is used to explicitly identify a word or phrase for which a <rref>definition</rref> has been provided by the author or is expected to be provided by the user.</p>
+				<p>A word or phrase with an optional corresponding definition. See related <rref>definition</rref>.</p>
+				<p>The <code>term</code> role is used to explicitly identify a word or phrase for which a <rref>definition</rref> has been provided by the author or is expected to be provided by the user. If there is an existing <rref>definition</rref>, or a form or form control to enter a definition, authors SHOULD set <pref>aria-details</pref> to point to the related element.</p>
 				<p>Authors SHOULD NOT use the <code>term</code> role on interactive elements such as links because doing so could prevent users of <a>assistive technologies</a> from interacting with those elements.</p>
 			</div>
 			<table class="role-features">
@@ -9125,9 +9135,18 @@ <h5>Presentational Roles Conflict Resolution</h5>
 						<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
 						<td class="role-inherited">Placeholder</td>
 					</tr>
+					<tr>
+						<th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th>
+						<td class="role-disallowed">
+							<ul>
+								<li><pref>aria-label</pref></li>
+								<li><pref>aria-labelledby</pref></li>
+							</ul>
+						</td>
+					</tr>
 					<tr>
 						<th class="role-namefrom-head" scope="row">Name From:</th>
-						<td class="role-namefrom">author</td>
+						<td class="role-namefrom">prohibited</td>
 					</tr>
 					<tr>
 						<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
