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.

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

Modal Dialog Pattern: Clarify initial focus and aria-describedby guidance #1707

Merged
merged 5 commits into from
Dec 30, 2020
Merged
Changes from 3 commits
Commits
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
12 changes: 5 additions & 7 deletions aria-practices.html
Original file line number Diff line number Diff line change
Expand Up @@ -1128,13 +1128,11 @@ <h4>Keyboard Interaction</h4>
<li><kbd>Escape</kbd>: Closes the dialog.</li>
</ul>
<ol class="note">
<li> When a dialog opens, focus placement depends on the nature and size of the content.
<li>When a dialog opens, focus moves to an element contained in the dialog. Generally, focus is initially set on the first focusable element. However, the most appropriate focus placement will depend on the nature and size of the content. Examples include:
<ul>
<li>In all circumstances, focus moves to an element contained in the dialog.</li>
<li>Unless a condition where doing otherwise is advisable, focus is initially set on the first focusable element.</li>
<li>
If content is large enough that focusing the first interactive element could cause the beginning of content to scroll out of view,
it is advisable to add <code>tabindex=<q>-1</q></code> to a static element at the top of the dialog, such as the dialog title or first paragraph, and initially focus that element.
<li>If a dialog primarily serves to present structured content (including multiple paragraphs, lists, tables, etc.) which would not make sense when announced as a single unbroken string of content by assistive technologies, then it is advisable to omit <code>aria-describedby</code> on the dialog itself, add <code>tabindex="-1"</code> to a static element at the start of the content, and initially focus that element.</li>
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
<li>If content is large enough that focusing the first interactive element could cause the beginning of content to scroll out of view,
it is advisable to add <code>tabindex="-1"</code> to a static element at the top of the dialog, such as the dialog title or first paragraph, and initially focus that element.
</li>
<li>
If a dialog contains the final step in a process that is not easily reversible, such as deleting data or completing a financial transaction,
Expand Down Expand Up @@ -1183,7 +1181,7 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
<li>
Optionally, the <a href="#aria-describedby" class="property-reference">aria-describedby</a> property
is set on the element with the <code>dialog</code> role to indicate which element or elements in the dialog contain content that describes the primary purpose or message of the dialog.
Specifying descriptive elements enables screen readers to announce the description along with the dialog title and initially focused element when the dialog opens.
Specifying descriptive elements enables screen readers to announce the description along with the dialog title and initially focused element when the dialog opens. As noted previously, for dialogs that primarily serve to present large amounts of structured content, it is advisable <em>not</em> to use <code>aria-describedby</code> to point to the content of the dialog, as this would result in assistive technologies announcing the entirety of the structured content as a single unbroken message.
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
</li>
</ul>
<ul class="note">
Expand Down