Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT.
If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content
link immediately after your opening <body>
tag. (read why)
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.
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.