mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-07-31 02:50:26 +02:00
Accessibility for modals
Added accessibility guidelines for modal dialogs, using role="dialog".
This commit is contained in:
@@ -271,7 +271,18 @@
|
||||
<li>You can place your modal dialog anywhere on your page, as long as the structure is not altered. You can also toggle it from anywhere on a page.</li>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><input id="modal-toggle" type="checkbox"/>
|
||||
<label for="modal-toggle">Show modal</label>
|
||||
<div class="modal" role="dialog" aria-labelledby="dialogTitle">
|
||||
<div class="card">
|
||||
<label for="modal-toggle" class="close"></label>
|
||||
<h3 class="section" id="dialogTitle">Bad Modal</h3>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do" style="text-align:justify"><mark class="tertiary">Do:</mark> You can use the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role">dialog</a>"</span></code> to add accessibility to your modal dialogs. Remember to properly label it and manage keyboard focus, as required.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><input id="modal-toggle" type="checkbox"/>
|
||||
<label for="modal-toggle">Show modal</label>
|
||||
<div class="modal">
|
||||
|
@@ -1046,6 +1046,7 @@
|
||||
<li>Use a <code>.card</code> inside the <code>.modal</code> to display contents</li>
|
||||
<li>Remember to use a <code><label></code> or some Javascript to allow users to close the dialog</li>
|
||||
<li>Modal dialogs can be placed and toggled from anywhere, although the structure must be kept intact</li>
|
||||
<li>Use <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role">dialog</a>"</span></code> to add accessibility to modal dialogs</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -1226,3 +1226,4 @@
|
||||
- Fully documented `modal` component.
|
||||
- Added navigation for `modal` component.
|
||||
- Documented customization of `modal` component.
|
||||
- Added accessibility guidelines for `modal` component.
|
||||
|
Reference in New Issue
Block a user