diff options
Diffstat (limited to 'javascript.html')
| -rw-r--r-- | javascript.html | 22 |
1 files changed, 19 insertions, 3 deletions
diff --git a/javascript.html b/javascript.html index 3dafc4ff1..2d48e26e0 100644 --- a/javascript.html +++ b/javascript.html @@ -196,7 +196,7 @@ $('#myModal').on('show.bs.modal', function (e) { <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> <!-- Modal --> - <div class="modal fade" id="myModal"> + <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> @@ -215,6 +215,17 @@ $('#myModal').on('show.bs.modal', function (e) { </div><!-- /.modal --> {% endhighlight %} + + <div class="bs-callout bs-callout-warning"> + <h4>Make modals accessible</h4> + <p> + Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br> + Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br> + Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br> + Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code><div></code> to point to this description (this is not shown in the above example). + </p> + </div> + <h2 id="modals-usage">Usage</h2> <h3>Via data attributes</h3> @@ -344,10 +355,11 @@ $('#myModal').on('hidden.bs.modal', function () { <h3>Within a navbar</h3> <div class="bs-example"> - <div id="navbar-example" class="navbar navbar-static"> + <div id="navbar-example" class="navbar navbar-static" role="navigation"> <div class="container" style="width: auto;"> <a class="navbar-brand" href="#">Project Name</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse"> + <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -481,7 +493,7 @@ $('.dropdown-toggle').dropdown() <h2 id="scrollspy-examples">Example in navbar</h2> <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p> <div class="bs-example"> - <div id="navbar-example2" class="navbar navbar-static"> + <div id="navbar-example2" class="navbar navbar-static" role="navigation"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="navbar-brand" href="#">Project Name</a> @@ -1671,6 +1683,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { </div> {% endhighlight %} +<div class="bs-callout bs-callout-danger"> + <h4>Accessibility issue</h4> + <p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p> +</div> <h2 id="carousel-usage">Usage</h2> |