Skip to main content

Accessibility

Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT.

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.

    						
	Correct Heading Structure

	├── H1 Page Title
	│  
	├── H2 Subtitle
	│   │
	│   ├── H3 Subtitle
	│   │
	│   └── H3 Subtitle
	│
	└── H2 Subtitle
	    │
	    ├── H3 Subtitle
	    │
	    └── H3 Subtitle

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

Title Tags

For screen reader users the content included inside of the title attribute is typically unnecessary, redundant, and possibly not even used. Conversely, content being put in the title attribute is being hidden from the (probable) majority of your users. If information is being hidden from the majority of your users, then it’s probably not necessary.

There are a few times when using a title attribute is appropriate:

  • For <frame> and <iframe> elements
  • For providing a label when a text label would be redundant
Useful title tag 
<iframe title="Desciption of iframe" src="..." ></iframe >

Not useful title tag
<a title="Click here for information" href="..." >Click Here</a >

Data Tables

The semantic purpose of a data table is to present tabular data. Sighted users can quickly scan the table but a screen reader goes through line by line. Proper markup must be added to help the screen reader make the correct associations that a sighted user would.

Table Purpose...
Column Heading Column Heading
Table Cell Data... Table Cell Data...
Table Cell Data... Table Cell Data... 
<div class="table table-responsive">
  <table class="table">
  	<caption>Table Purpose...</caption>
  	<thead>
  	   <tr>
  	      <th scope="col">Column Heading</th>
              <th scope="col">Column Heading</th>
           </tr>
  	</thead>
  	<tbody>
  	   <tr>
  	     <td>Table Cell Data...</td>
  	     <td>Table Cell Data...</td>
  	   </tr>
  	   <tr>
  	     <td>Table Cell Data...</td>
  	     <td>Table Cell Data...</td>
  	   </tr>
  	</tbody>
  </table>
</div>

Color contrast

Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks, the .bg-primary contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.

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).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Additional resources

Accessibility Checklists