Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
accessibility.md 3.48 KB
Newer Older
Mark Otto's avatar
Move accessibility to markdown  
Mark Otto committed
1 
---
Mark Otto's avatar
Massive cleanup    
Mark Otto committed
2 
layout: docs
Mark Otto's avatar
Move accessibility to markdown  
Mark Otto committed
3 
title: Accessibility
Mark Otto's avatar
v4: Social meta tags (#20825)    
Mark Otto committed
4 
description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
Mark Otto's avatar
restore page headers, use partial and page frontmatter to organize it    
Mark Otto committed
5 
group: getting-started
Mark Otto's avatar
Move accessibility to markdown  
Mark Otto committed
6
7
8
9 
---

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>.
Mark Otto's avatar
Fixes #21195: Add more table of contents to pages with longer contents    
Mark Otto committed
10
11
12
13
14 
## Contents

* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
Mark Otto's avatar
rewrite some button group docs    
Mark Otto committed
15
16
17
18
19
20
21
22
23
24 
## Component requirements

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.

### 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.
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
25 
## Skip navigation
Mark Otto's avatar
Move accessibility to markdown  
Mark Otto committed
26
Bardi Harborow's avatar
Fix broken and redirected links.    
Bardi Harborow committed
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).
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
28
Mark Otto's avatar
Redo all our callouts with the custom callout plugin    
Mark Otto committed
29 
{% callout danger %}
Chris Rebert's avatar
Remove reference to fixed Chrome bug in accessibility docs (#20145)    
Chris Rebert committed
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"`.
Mark Otto's avatar
Redo all our callouts with the custom callout plugin    
Mark Otto committed
31
32
33
34
35 

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 %}
Mark Otto's avatar
Move accessibility to markdown  
Mark Otto committed
36
37
38
39 

{% highlight html %}
<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
40
41
42 
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
Mark Otto's avatar
Move accessibility to markdown  
Mark Otto committed
43
44
45
46 
  </div>
</body>
{% endhighlight %}
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
47 
## Nested headings
Mark Otto's avatar
Move accessibility to markdown  
Mark Otto committed
48
49
50 

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.
Marios Zindilis's avatar
Fixed minor typo    
Marios Zindilis committed
51 
Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessibility](http://accessibility.psu.edu/headings/).
Mark Otto's avatar
Move accessibility to markdown  
Mark Otto committed
52
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
53 
## Additional resources
Mark Otto's avatar
Move accessibility to markdown  
Mark Otto committed
54
55
56 

- ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer)
- [The A11Y Project](http://a11yproject.com/)
Bardi Harborow's avatar
Fix broken and redirected links.    
Bardi Harborow committed
57 
- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)