[html-aam PR 451] clarify img mappings

html-aam/index.html

@@ -3125,8 +3125,14 @@ <h4 id="el-img">`img`</h4>
             <tr>
               <th>[[wai-aria-1.2]]</th>
               <td>
-                <a class="core-mapping" href="#role-map-image">`image`</a>
-                or <a class="core-mapping" href="#role-map-img">`img`</a> role
+                <div>
+                  If element has a non-empty `src` or `srcset` attribute, an <a data-cite="accname-1.2/#dfn-accessible-name">accessible name</a>, or both, then map to the
+                  <a class="core-mapping" href="#role-map-image">`img`</a> or <a class="core-mapping" href="#role-map-img">`image`</a> role.
+                </div>
+                <div>
+                  Otherwise, if the element has no `src` or `srcset` attribute, or if the attribute(s) are set to the empty string, and the `img` has no `alt` attribute or accessible name, then map to
+                  the <a class="core-mapping" href="#role-map-none">`none`</a> or <a class="core-mapping" href="#role-map-presentation">`presentation`</a> role.
+                </div>
               </td>
             </tr>
             <tr>
@@ -3135,7 +3141,8 @@ <h4 id="el-img">`img`</h4>
             </tr>
             <tr>
               <th>
-                <a href="https://msdn.microsoft.com/en-us/library/dd373608%28v=VS.85%29.aspx">MSAA</a> + <a href="http://accessibility.linuxfoundation.org/a11yspecs/ia2/docs/html/">IAccessible2</a>
+                <a href="https://msdn.microsoft.com/en-us/library/dd373608%28v=VS.85%29.aspx">MSAA</a> +
+                <a href="http://accessibility.linuxfoundation.org/a11yspecs/ia2/docs/html/">IAccessible2</a>
               </th>
               <td>
                 <div class="general">Use WAI-ARIA mapping</div>
@@ -3163,6 +3170,10 @@ <h4 id="el-img">`img`</h4>
             <tr>
               <th>Comments</th>
               <td>
+                <p>
+                  An `img` with a non-empty `src`, `srcset`, or both and no `alt` attribute or <a data-cite="accname-1.2/#dfn-accessible-name">accessible name</a> will still map to the `image` role,
+                  unless another role has been explicitly provided by an author.
+                </p>
                 <p class="note">ARIA 1.3 adds the `image` role as the preferred synonym to the ARIA 1.0 `img` role. The expected computed role for named `img` elements is now "image".</p>
               </td>
             </tr>
@@ -3175,9 +3186,7 @@ <h4 id="el-img-empty-alt">`img` <span class="el-context">(`alt` attribute value
               <th>HTML Specification</th>
               <td>
                 <a data-cite="html">`img`</a>
-                <span class="el-context"
-                  >(<a data-cite="html/embedded-content.html#attr-img-alt">`alt`</a> attribute value is the empty string, i.e., `alt=""` or `alt` with no value in the markup)</span
-                >
+                <span class="el-context">(<a data-cite="html/embedded-content.html#attr-img-alt">`alt`</a> attribute value is the empty string.)</span>
               </td>
             </tr>
             <tr>

index.html

@@ -13681,9 +13681,15 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
           <sdef>aria-expanded</sdef>
           <div class="state-description">
             <p><a>Indicates</a> whether a related element is expanded (shown) or collapsed (hidden).</p>
-            <p>The <sref>aria-expanded</sref> attribute is applied to a focusable, interactive element that toggles visibility of content of a different element. If the element with <sref>aria-expanded</sref> is also a <rref>treeitem</rref> in a <rref>tree</rref> or a <rref>row</rref> in a <rref>treegrid</rref>, then it SHOULD also be the <a>accessibility parent</a> of the content it expands and collapses. Otherwise, the element with <sref>aria-expanded</sref> SHOULD NOT be the <a>accessibility parent</a> of the content that is expanding or collapsing. Rather, identify that relationship between the interactive element and the element being controlled using <pref>aria-controls</pref>.</p>
+            <p>
+              The <sref>aria-expanded</sref> attribute is applied to a focusable, interactive element that toggles visibility of content of a different element. If the element with
+              <sref>aria-expanded</sref> is also a <rref>treeitem</rref> in a <rref>tree</rref> or a <rref>row</rref> in a <rref>treegrid</rref>, then it SHOULD also be the
+              <a>accessibility parent</a> of the content it expands and collapses. Otherwise, the element with <sref>aria-expanded</sref> SHOULD NOT be the <a>accessibility parent</a> of the content
+              that is expanding or collapsing. Rather, identify that relationship between the interactive element and the element being controlled using <pref>aria-controls</pref>.
+            </p>
             <p>For example, <sref>aria-expanded</sref> is applied to a parent <rref>treeitem</rref> to indicate whether its child branch of the tree is shown.</p>
-            <pre class="example highlight">&lt;ul role="tree"&gt;
+            <pre class="example highlight">
+&lt;ul role="tree"&gt;
   &lt;li role="treeitem" aria-expanded="false" aria-selected="false"&gt;
     &lt;span&gt;Fruits&lt;/span&gt;
     &lt;ul role="group" hidden&gt;
@@ -13692,12 +13698,15 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
       &lt;li role="treeitem" aria-selected="false"&gt;Yuzu&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/li&gt;
-&lt;/ul&gt;</pre>
+&lt;/ul&gt;</pre
+            >
             <p>Similarly, it can be applied to a <rref>button</rref> to control the visibility of another element and its content on the current page.</p>
-            <pre class="example highlight">&lt;button type="button" aria-controls="mangosteen" aria-expanded="false"&gt;Mangosteen&lt;/button&gt;
+            <pre class="example highlight">
+&lt;button type="button" aria-controls="mangosteen" aria-expanded="false"&gt;Mangosteen&lt;/button&gt;
 &lt;div id="mangosteen" hidden&gt;
   An edible fruit native to tropical lands surrounding the Indian Ocean.
-&lt;/div&gt;</pre>
+&lt;/div&gt;</pre
+            >
           </div>
           <table class="def">
             <caption>