Skip to content

Commit

Permalink
address feedback
Browse files Browse the repository at this point in the history
@mcking65 just trying to get this PR wrapped up, but I added a note about aria-description and made a wording changes to 'manage focus' (though that is existing text, and not added by this PR - so kinda out of scope, but i think an easy change worth making.
  • Loading branch information
scottaohara authored Dec 14, 2023
1 parent cdba2eb commit 9f945a7
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3058,9 +3058,12 @@ <h2>Definition of Roles</h2>
<p>A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the content the user interacts with, within the <code>body</code> element.</p>
<p>Dialogs are often used to prompt the user to enter or respond to information, or can represent content related to understanding or modifying the content of the primary application window. A dialog that is designed to interrupt workflow and prevent users from interacting with the primary web application is usually modal. See related <rref>alertdialog</rref>. A dialog that allows for the user to switch between interacting with the content of the primary web application and the content the dialog is usually modeless (i.e., non-modal). In lieu of using robust host language features for marking content of the primary web application as <code>inert</code>, authors SHOULD use the <pref>aria-modal</pref> attribute, and constrain focus to dialogs. See the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/">WAI-ARIA Authoring Practices: Dialog (modal) pattern</a> for additional details on implementing modal dialog design patterns.</p>
<p>Authors MUST provide an accessible name for a dialog, which can be done with the <pref>aria-label</pref> or <pref>aria-labelledby</pref> attribute.</p>
<p>Authors SHOULD ensure that all dialogs (both modal and non-modal) have at least one focusable descendant element. Authors SHOULD focus an element in the modal dialog when it is displayed, and authors SHOULD manage focus of modal dialogs.</p>
<p>Authors SHOULD provide a dialog an accessible description, with the <pref>aria-description</pref> or <pref>aria-describedby</pref> attribute, for instances where authors have set initial keyboard focus on an element that follows content that outlines the purpose of the dialog. Assistive technology SHOULD give precedence to exposing author defined dialog accessible descriptions when a dialog is invoked and user focus is moved to a descendant of the dialog element.</p>
<aside class="example">precedence
<p>Authors SHOULD ensure that all dialogs (both modal and non-modal) have at least one focusable descendant element. Authors SHOULD focus an element in the modal dialog when it is displayed, and authors SHOULD constrain keyboard focus to focusable elemenets within a modal dialog, until dismissed.</p>
<p>Authors SHOULD provide a dialog an accessible description, with the <pref>aria-describedby</pref> attribute, for instances where authors have set initial keyboard focus on an element that follows content that outlines the purpose of the dialog. Assistive technology SHOULD give precedence to exposing author defined dialog accessible descriptions when a dialog is invoked and user focus is moved to a descendant of the dialog element.</p>
<div class="note">
<p>Authors are strongly encouraged to use <pref>aria-describedby</pref>, rather than <pref>aria-description</pref>, to provide descriptions to dialogs. While <code>aria-description</code> could be used to provide an accessible description for a dialog, it will provide a better and more consistent user experience to reference visible content that can also be independently read by all users. Doing so will help ensure important descriptive information is less likely to be missed.</p>
</div>
<aside class="example">
<p>In the following example, the first text field will receive initial focus when the dialog is rendered. As this means focus will be set "after" the preceding content that provides instructions for the form fields, an <code>aria-describedby</code> attribute is used to expose this content as a description for the <code>dialog</code>.
<pre>&lt;div role="dialog" aria-labelledby="h" aria-describedby="d" aria-modal="true" ...>
&lt;h2 id="h">Add Shipping Address&lt;/h2>
Expand Down

0 comments on commit 9f945a7

Please sign in to comment.