Skip to content

[html-aam] Add img w/controls attr mapping #2815

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

Open
rahimabdi wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[html-aam] Add img w/controls attr mapping #2815

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f70193a
Add img w/controls attr mapping
Jun 5, 2026
8f4e69f
Make table updates
Jul 6, 2026
08bd77f
Fix img with controls element mapping table
Jul 6, 2026
4d46734
Update mapping tables
Jul 6, 2026
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
134 changes: 133 additions & 1 deletion html-aam/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3243,6 +3243,87 @@ <h4 id="el-img-empty-alt">
</tr>
</tbody>
</table>
<h4 id="el-img-with-controls-attr">
`img`
<span class="el-context">(with `controls` attribute)</span>
</h4>
<table class="data" aria-labelledby="el-img-with-controls-attr">
<tbody>
<tr>
<th>HTML Specification</th>
<td>
<a data-cite="HTML">`img`</a>
</td>
</tr>
<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
</td>
</tr>
<tr>
<th><a data-cite="core-aam-1.2/#roleMappingComputedRole">Computed Role</a></th>
<td class="role-computed"><div class="general">Use WAI-ARIA mapping</div></td>
</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>
</th>
<td>
<div class="role"><span class="type">Role:</span> `ROLE_SYSTEM_GROUPING`</div>
</td>
</tr>
<tr>
<th><a href="https://msdn.microsoft.com/en-us/library/ms726297%28v=VS.85%29.aspx">UIA</a></th>
<td>
<div class="ctrltype"><span class="type">Control Type:</span> `Group`</div>
<div class="ctrltype"><span class="type">Localized Control Type:</span> `"group"`</div>
<div class="general">
<b>Note:</b> If the <a data-cite="html/embedded-content.html#attr-img-controls">`controls`</a> attribute is present, UI controls (e.g., play, volume) are exposed as children of the
parent `role="group"` element in the <a class="termref">accessibility tree</a>, and mapped as appropriate for the type of control (e.g.,
<a class="core-mapping" href="#role-map-button">`button`</a> or <a class="core-mapping" href="#role-map-slider">`slider`</a>).
</div>
<div class="general">
User agents MAY include the following in the <a class="termref">accessibility tree</a> and mark them as hidden or off-screen:
<ul>
<li>Loading messages or error messages</li>
<li>UI controls that are not currently displayed</li>
</ul>
</div>
</td>
</tr>
<tr>
<th><span class="informative">[[ATK]]</span></th>
<td>
<div class="role"><span class="type">Role:</span> `ATK_ROLE_VIDEO`</div>
</td>
</tr>
<tr>
<th><a href="https://developer.apple.com/reference/appkit/nsaccessibility">AX</a></th>
<td>
<div class="role"><span class="type">AXRole:</span> `AXGroup`</div>
<div class="subrole"><span class="type">AXSubrole:</span> `AXVideo`</div>
<div class="roledesc"><span class="type">AXRoleDescription:</span> `"video playback"`</div>

@HaTheo HaTheo Jul 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is video playback correct or copy/paste bug?

<div class="general">
<b>Note:</b> If the <a data-cite="html/embedded-content.html#attr-img-controls">`controls`</a> attribute is present, UI controls (e.g., play, volume) are exposed as descendants of an
<a class="termref">accessible object</a> with a role of <a class="core-mapping" href="#role-map-toolbar">`toolbar`</a>, and mapped as appropriate for the type of control (e.g.,
<a class="core-mapping" href="#role-map-button">`button`</a> or <a class="core-mapping" href="#role-map-slider">`slider`</a>).
</div>
</td>
</tr>
<!-- <th><a href="#accessible-name-and-description-computation">Naming Algorithm</a></th> -->
<tr>
<th>Comments</th>
<td>
<p>See the <a href="att-controls-img">`controls` (for `img`)</a> attribute mapping.</p>

@HaTheo HaTheo Jul 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing # in <a href="att-controls-img">?

<p class="note">
<strong>Note:</strong> The mappings for an `img` (with `controls` attribute) are the same as `img`. However, when used on an `img` element, the `controls` attribute should produce a parent container with `role="group"` that contains both the image and associated controls.
</p>
</td>
</tr>
</tbody>
</table>
<h4 id="el-input-button">`input` <span class="el-context">(`type` attribute in the Button state)</span></h4>
<table class="data" aria-labelledby="el-input-button">
<tbody>
Expand Down Expand Up @@ -9651,7 +9732,7 @@ <h4 id="att-contenteditable">`contenteditable`</h4>
</tr>
</tbody>
</table>
<h4 id="att-controls">`controls`</h4>
<h4 id="att-controls">`controls` (for `audio` and `video`)</h4>
<table class="data" aria-labelledby="att-controls">
<tbody>
<tr>
Expand Down Expand Up @@ -9700,6 +9781,57 @@ <h4 id="att-controls">`controls`</h4>
</tr>
</tbody>
</table>
<h4 id="att-controls-img">`controls` (for `img`)</h4>
<table class="data" aria-labelledby="att-controls-img">
<tbody>
<tr>
<th>HTML Specification</th>
<td>`controls`</td>
</tr>
<tr>
<th>Element(s)</th>
<td>
<a data-cite="html/embedded-content.html#attr-img-controls">`img`</a>
</td>
</tr>
<tr>
<th>[[WAI-ARIA-1.2]]</th>
<td>
<div class="general">Not mapped</div>
</td>
</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>
</th>
<td>
<div class="general">Not mapped</div>
</td>
</tr>
<tr>
<th><a href="https://msdn.microsoft.com/en-us/library/ms726297%28v=VS.85%29.aspx">UIA</a></th>
<td>
<div class="general">Not mapped</div>
</td>
</tr>
<tr>
<th><span class="informative">[[ATK]]</span></th>
<td>
<div class="general">Not mapped</div>
</td>
</tr>
<tr>
<th><a href="https://developer.apple.com/reference/appkit/nsaccessibility">AX</a></th>
<td>Controls exposed as `AXToolbar`</td>
</tr>
<tr>
<th>Comments</th>
<td>
<p>See the <a href="el-img-with-controls-attr">`img` (with `controls`)</a> element mapping.</p>
</td>
</tr>
</tbody>
</table>
<h4 id="att-coords">`coords`</h4>
<table class="data" aria-labelledby="att-coords">
<tbody>
Expand Down