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

Jump to bottom

Add heading and separator roles to feed's allowed accessibility children #2245

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

Add heading and separator roles to feed's allowed accessibility children #2245

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dbbda56
add heading and separator to allowed feed roles
smhigley Jun 13, 2024
a2817e9
add author guidance paragraph
smhigley Jun 13, 2024
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
9 changes: 8 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3120,6 +3120,7 @@ <h2>Definition of Roles</h2>
<p>For example, a <code>feed</code> could be used to present a stream of news stories where each <rref>article</rref> contains a story with text, links, images, and comments as well as widgets for sharing and commenting. As a screen reader user reads and interacts with each story and moves the screen reader reading cursor from story to story, each story scrolls into view and, as needed, new stories are loaded.</p>
<p>A <code>feed</code> is a container element whose children have role <rref>article</rref>. When <rref data-lt="article">articles</rref> are added or removed from either or both ends of a <code>feed</code>, authors SHOULD set <sref>aria-busy</sref> to <code>true</code> on the <code>feed</code> element before the changes are made and set it to <code>false</code> after the changes are complete. Authors SHOULD avoid inserting or removing <rref data-lt="article">articles</rref> in the middle of a <code>feed</code>. These requirements help <a>assistive technologies</a> gracefully respond to changes in the <code>feed</code> content that occur simultaneously with user commands to move the reading cursor within the <code>feed</code>.</p>
<p>Authors SHOULD make each <rref>article</rref> in a <code>feed</code> focusable and ensure that the application scrolls an <rref>article</rref> into view when <a>user agent</a> focus is set on the <rref>article</rref> or one of its descendant elements. For example, in HTML, each <rref>article</rref> element should have a <code>tabindex</code> value of either <code>-1</code> or <code>0</code>.</p>
<p>Authors MAY use <rref>heading</rref> and <rref>separator</rref> children in a <code>feed</code>. For example, in a feed of news stories there could be headings separating sets of articles into sequential dates. If a <code>feed</code> does have <rref>headings</rref> or <rref>separators</rref> as children, they SHOULD NOT be focusable or contain information necessary for understanding or navigating the <code>feed</code>'s <rref data-lt="article">articles</rref>.</p>
<p> When an <a>assistive technology</a> reading cursor moves from one <rref>article</rref> to another, <a>assistive technologies</a> SHOULD set user agent focus on the <rref>article</rref> that contains the reading cursor. If the reading cursor lands on a focusable element inside the <rref>article</rref>, the assistive technology MAY set focus on that element in lieu of setting focus on the containing <rref>article</rref>.</p>
<p>Because the ability to scroll to another <rref>article</rref> with an <a>assistive technology</a> reading cursor depends on the presence of another <rref>article</rref> in the page, authors SHOULD attempt to load additional <rref data-lt="article">articles</rref> before <a>user agent</a> focus reaches an <rref>article</rref> at either end of the set of <rref data-lt="article">articles</rref> that has been loaded. Alternatively, authors MAY include an <rref>article</rref> at either or both ends of the loaded set of <rref data-lt="article">articles</rref> that includes an element, such as a <rref>button</rref>, that lets the user request more <rref data-lt="article">articles</rref> to be loaded.</p>
<p>In addition to providing a brief label, authors MAY apply <pref>aria-describedby</pref> to <rref>article</rref> elements in a <code>feed</code> to suggest to screen readers which elements to speak after the label when users navigate by <rref>article</rref>. Screen readers MAY provide users with a way to quickly scan <code>feed</code> content by speaking both the label and <a class="informative">accessible description</a> when navigating by <rref>article</rref>, enabling the user to ignore repetitive or less important elements, such as embedded interaction widgets, that the author has left out of the description.</p>
Expand Down Expand Up @@ -3162,7 +3163,13 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th>
<td class="role-mustcontain"><rref>article</rref></td>
<td class="role-mustcontain">
<ul>
<li><rref>article</rref></li>
<li><rref>heading</rref></li>
<li><rref>separator</rref></li>
</ul>
</td>
</tr>
<tr>
<th class="role-required-properties-head">Required States and Properties:</th>
Expand Down
Loading