static/scss/bootstrap-4.0.0-alpha.6/docs/getting-started/accessibility.md

   1 ---
   2 layout: docs
   3 title: Accessibility
   4 description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
   5 group: getting-started
   6 ---
   7
   8 Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.
   9
  10 ## Contents
  11
  12 * Will be replaced with the ToC, excluding the "Contents" header
  13 {:toc}
  14
  15 ## Component requirements
  16
  17 Some common HTML elements are always in need for basic accessibility enhancements through `role`s and Aria attributes. Below is a list of some of the most frequently used ones.
  18
  19 ### Button groups
  20
  21 In order for assistive technologies–such as screen readers–to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
  22
  23 In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
  24
  25 ## Skip navigation
  26
  27 If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
  28
  29 {% callout danger %}
  30 Due to long-standing shortcomings/bugs in Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
  31
  32 In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with `tabindex="-1"` when they are clicked with the mouse) with `#content:focus { outline: none; }`.
  33
  34 Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.
  35 {% endcallout %}
  36
  37 {% highlight html %}
  38 <body>
  39   <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  40   ...
  41   <div class="container" id="content" tabindex="-1">
  42     <!-- The main page content -->
  43   </div>
  44 </body>
  45 {% endhighlight %}
  46
  47 ## Nested headings
  48
  49 When nesting headings (`<h1>` - `<h6>`), your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2>` - `<h6>` such that screen readers can construct a table of contents for your pages.
  50
  51 Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings/).
  52
  53 ## Additional resources
  54
  55 - ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer)
  56 - [The A11Y Project](http://a11yproject.com/)
  57 - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)