Skip to content

Commit

Permalink
Modal Dialog Example: Add aria-modal and aria-hidden notes
Browse files Browse the repository at this point in the history
For issue #480, per input from @DavidMacDonald,
modified examples/dialog-modal/dialog.html.
Following the roles, states, and properties table, added a subsection with 3 notes regarding aria-modal and aria-hidden.
  • Loading branch information
mcking65 committed Oct 28, 2017
1 parent 0528dee commit c99876a
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions examples/dialog-modal/dialog.html
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,24 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</tr>
</tbody>
</table>
<h3>Notes on <code>aria-modal</code>and <code>aria-hidden</code></h3>
<ol>
<li>
The <code>aria-modal</code> property was introduced in ARIA 1.1.
As a new property, screen reader users may experience varying degrees of support for it.
</li>
<li>
Applying the <code>aria-modal</code> property to the <code>dialog</code> element
replaces the technique of using <code>aria-hidden</code> on the background for informing assistive technologies that content outside a dialog is inert.
</li>
<li>
In legacy dialog implementations where <code>aria-hidden</code> is used to make content outside a dialog inert for assistive technology users, it is important that:
<ol>
<li><code>aria-hidden</code> is set to <code>true</code> on each element containing a portion of the inert layer.</li>
<li>The dialog element is not a descendant of any element that has <code>aria-hidden</code> set to <code>true</code>.</li>
</ol>
</li>
</ol>
</section>

<section>
Expand Down

0 comments on commit c99876a

Please sign in to comment.