Make web accessibility (a11y) easier for Bootstrap Developers
CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
a11y.less
a11ytheme.css
a11ytheme.less
a11ytheme.min.css

README.md

Bootstrap a11y theme

How to Compile your CSS

Recompile Bootstrap:

  • copy a11y.less to your Bootstrap's LESS folder
  • add @import "a11y.less"; at the end of booststrap.less
  • recompile Bootstrap

Compile the theme:

  • copy a11y.less and a11ytheme.less to your Bootstrap's LESS folder
  • recompile your theme: lessc a11ytheme.less > a11ytheme.css

You can also download a11ytheme.css or a11ytheme.min.css from this site.

How to use the theme's CSS

You can't use the theme without Bootstrap's CSS, so use:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="a11ytheme.min.css" rel="stylesheet">

NB if you recompiled Bootstrap, you only will need the recompiled CSS.

Also try the Bootstrap Accessibility Plugin, This plugin adds accessibility mark-up to the default components of Bootstrap 3 to make them accessible for keyboard and screen reader users.

HTML

Add a <a class="sr-only" href="#content">Skip to content</a> link to your navbar:

<nav class="navbar navbar-default" role="navigation">
	<a class="sr-only" href="#content">Skip to content</a>	
	  <div class="container-fluid">
		<div class="navbar-header">
		  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		  </button>
		</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			  <form class="navbar-form navbar-left" role="search">
				<div class="form-group">
				  <input type="text" class="form-control" placeholder="Search">
				</div>
				<button type="submit" class="btn btn-default">Submit</button>
			  </form>
			</div> 
		
	  </div>
</nav>

Demo

You can visit Bootstrap a11y theme's style guide.

What does Bootstrap a11y theme's fix?

  • replace the screen readers only CSS
  • adds 'skip to content' link
  • match color contrasts
  • font sizes to match color contrasts

JBST

This theme is initial written for JBST. JBST is a powerful theme framework for WordPress that can be used as a standalone website builder or as a framework to create child themes for WordPress. JBST build on the top of Twitter's Bootstrap 3 and is full customizable with LESS. Integrated customizer for easy responsive website building. Right-To-Left (RTL) support. It also has built in support for BuddyPress, BBpress and eCommerce (WooCommerce, JigoShop and WPeCommerce). Without this theme JBST didn't meet [Wordpress.org's guidelines for accessibility] (http://make.wordpress.org/themes/guidelines/guidelines-accessibility/).

About Bootstrap

Bootstrap is the most popular front-end framework for developing responsive, mobile first projects on the web.

About a11y (web accessibility)

Tools: