3.7 KiB
| layout | title | description | group |
|---|---|---|---|
| docs | Accessibility | Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology. | getting-started |
Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT.
Contents
- Will be replaced with the ToC, excluding the "Contents" header {:toc}
Component requirements
Some common HTML elements are always in need for basic accessibility enhancements through roles and Aria attributes. Below is a list of some of the most frequently used ones.
{% callout info %} Heads up! As we go through the alphas, we'll be moving more accessibility notes here with links to specific sections from other areas of the docs. {% endcallout %}
Button groups
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".
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.
Skip navigation
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). Using the .sr-only class will visually hide the skip link, and the .sr-only-focusable class will ensure that the link becomes visible once focused (for sighted keyboard users).
{% callout danger %}
Due to long-standing shortcomings/bugs in Internet Explorer (see this article on in-page links and focus order), you will need to make sure that the target of your skip link is at least programmatically focusable by adding tabindex="-1".
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; }.
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. {% endcallout %}
{% highlight html %}
Skip to main content ...Nested headings
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.
Learn more at HTML CodeSniffer and Penn State's Accessability.