Skip to content

Commit

Permalink
Modal Dialog Example: Document Small Screen Sizing and Escape Key Beh…
Browse files Browse the repository at this point in the history 
…avior

For issue #321, made the following changes to examples/dialog-modal/dialog.html.

Added the following item to the list of accessibility features:

> To make the content easier to read when displayed on small screens, the dialog fills 100% of the screen.
> Completely covering the background window also hides background movement that occurs on some mobile devices when scrolling content inside the dialog.

Added a row to the keyboard table to document Escape key behavior.
  • Loading branch information
@mcking65
mcking65 committed Jun 21, 2017
1 parent 2446dfc commit b7c349f
Showing 1 changed file with 50 additions and 39 deletions.
89 changes: 50 additions & 39 deletions examples/dialog-modal/dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,47 +44,54 @@ <h2 id="ex_label">Example</h2>

<section>
<h2>Accessibility Features</h2>
<p>Focus and accessible descriptions are set based on the content of each dialog.</p>
<ol>
<li><q>Add Delivery Address</q> dialog (id=dialog1):
<ul>
<li>Initial focus is set on the first input, which is the first focusable element.</li>
<li>The dialog does not need <code>aria-describedby</code> since there is no static text that describes it.</li>
<li>When the dialog closes as a result of the <q>Cancel</q> action, the user's point of regard is maintained by returning focus to the <q>Add Delivery Address</q> button.
<li>
When the dialog closes as a result of the <q>Add</q> action and the <q>Address Added</q> dialog replaces the <q>Add Delivery Address</q> dialog,
the <q>Add Delivery Address</q> dialog passes a reference to the <q>Add Delivery Address</q> button to the the <q>Address Added</q> dialog
so that it can maintain the user's point of regard when it closes.
</li>
</ul>
</li>
<li><q>Verification Result</q> dialog (id=dialog2):
<ul>
<li>Initial focus is set on the first paragraph because the first interactive element is at the bottom, which is out of view due to the length of the text.</li>
<li>To support screen reader user awareness of the dialog text, the dialog text is wrapped in a <code>div</code> that is referenced by <code>aria-describedby</code>.</li>
<li>When the dialog closes, to maintain the user's point of regard, focus returns to the <q>Verify Address</q> button.</li>
<li>The text of this dialog describes design considerations for initial focus and accessible descriptions in dialogs with large amounts of text.</li>
</ul>
</li>
<li><q>Address Added</q> dialog (id=dialog3):
<ul>
<li>
Initial focus is set on the <q>OK</q> button, which is the last focusable element.
This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.
Users can press <kbd>Tab</kbd> to focus on the <q>My Profile</q> link.
</li>
<li>The element containing the dialog message is referenced by <code>aria-describedby</code> to hint to screen readers that it should be announced when the dialog opens.</li>
<li>When the dialog closes, the user's point of regard is maintained by setting focus on the <q>Add Delivery Address</q> button.</li>
</ul>
</li>
<li><q>End of the Road!</q> dialog (id=dialog4):
<ul>
<li>This dialog has only one focusable element, which receives focus when the dialog opens.</li>
<li>Like dialog3, <code>aria-describedby</code> is used to facilitate message announcement for screen reader users.</li>
<li>Like all other dialogs in this example except for the <q>Address Added</q> confirmation dialog, when it closes, the user's point of regard is maintained by returning focus to the element that triggered display of the dialog.</li>
</ul>
<li>
To make the content easier to read when displayed on small screens, the dialog fills 100% of the screen.
Completely covering the background window also hides background movement that occurs on some mobile devices when scrolling content inside the dialog.
</li>
</ol>
<li>Focus and accessible descriptions are set based on the content of each dialog.
<ol>
<li><q>Add Delivery Address</q> dialog (id=dialog1):
<ul>
<li>Initial focus is set on the first input, which is the first focusable element.</li>
<li>The dialog does not need <code>aria-describedby</code> since there is no static text that describes it.</li>
<li>When the dialog closes as a result of the <q>Cancel</q> action, the user's point of regard is maintained by returning focus to the <q>Add Delivery Address</q> button.
<li>
When the dialog closes as a result of the <q>Add</q> action and the <q>Address Added</q> dialog replaces the <q>Add Delivery Address</q> dialog,
the <q>Add Delivery Address</q> dialog passes a reference to the <q>Add Delivery Address</q> button to the the <q>Address Added</q> dialog
so that it can maintain the user's point of regard when it closes.
</li>
</ul>
</li>
<li><q>Verification Result</q> dialog (id=dialog2):
<ul>
<li>Initial focus is set on the first paragraph because the first interactive element is at the bottom, which is out of view due to the length of the text.</li>
<li>To support screen reader user awareness of the dialog text, the dialog text is wrapped in a <code>div</code> that is referenced by <code>aria-describedby</code>.</li>
<li>When the dialog closes, to maintain the user's point of regard, focus returns to the <q>Verify Address</q> button.</li>
<li>The text of this dialog describes design considerations for initial focus and accessible descriptions in dialogs with large amounts of text.</li>
</ul>
</li>
<li><q>Address Added</q> dialog (id=dialog3):
<ul>
<li>
Initial focus is set on the <q>OK</q> button, which is the last focusable element.
This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.
Users can press <kbd>Tab</kbd> to focus on the <q>My Profile</q> link.
</li>
<li>The element containing the dialog message is referenced by <code>aria-describedby</code> to hint to screen readers that it should be announced when the dialog opens.</li>
<li>When the dialog closes, the user's point of regard is maintained by setting focus on the <q>Add Delivery Address</q> button.</li>
</ul>
</li>
<li><q>End of the Road!</q> dialog (id=dialog4):
<ul>
<li>This dialog has only one focusable element, which receives focus when the dialog opens.</li>
<li>Like dialog3, <code>aria-describedby</code> is used to facilitate message announcement for screen reader users.</li>
<li>Like all other dialogs in this example except for the <q>Address Added</q> confirmation dialog, when it closes, the user's point of regard is maintained by returning focus to the element that triggered display of the dialog.</li>
</ul>
</li>
</ol>
</li>
</ol>
</section>

<section>
Expand Down Expand Up @@ -115,6 +122,10 @@ <h2 id="kbd_label">Keyboard Support</h2>
</ul>
</td>
</tr>
<tr>
<th><kbd>Escape</kbd></th>
<td>Closes the dialog.</td>
</tr>
</tbody>
</table>
</section>
Expand Down

0 comments on commit b7c349f

Please sign in to comment.