beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Accessibility for modals

Browse source 
Added accessibility guidelines for modal dialogs, using role="dialog".
This commit is contained in:
Angelos Chalaris 2017-06-06 10:11:30 +03:00
parent 61ad457605
commit 6437ee56da
3 changed files with 14 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
docs/contextual.html
View file

@ -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>&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
&lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;
&lt;div class=&quot;modal&quot; role=&quot;dialog&quot; aria-labelledby=&quot;dialogTitle&quot;&gt;
&lt;div class=&quot;card&quot;&gt;
&lt;label for=&quot;modal-toggle&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
&lt;h3 class=&quot;section&quot; id=&quot;dialogTitle&quot;&gt;Bad Modal&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="do" style="text-align:justify"><mark class="tertiary">Do:</mark>&nbsp;You can use the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role">dialog</a>&quot;</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>&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
&lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;
&lt;div class=&quot;modal&quot;&gt;

1
docs/quick_reference.html
View file

@ -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>&lt;label&gt;</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">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role">dialog</a>&quot;</span></code> to add accessibility to modal dialogs</li>
</ul>
</div>
</div>

1
docs/v2/DEVLOG.md
View file

@ -1226,3 +1226,4 @@
- Fully documented `modal` component.
- Added navigation for `modal` component.
- Documented customization of `modal` component.
- Added accessibility guidelines for `modal` component.