Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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="//" 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.


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>
			<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">
				<button type="submit" class="btn btn-default">Submit</button>


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


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 ['s guidelines for accessibility] (

About Bootstrap

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

About a11y (web accessibility)



Make web accessibility (a11y) easier for Bootstrap Developers






No releases published


No packages published