bootstrap-hacks

Tweaks (with a security and accessibility focus) to the Bootstrap framework.

Usage no npm install needed!

<script type="module">
  import bootstrapHacks from 'https://cdn.skypack.dev/bootstrap-hacks';
</script>

README

Bootstrap Hacks

Build Status npm version Bower version Maven Central dependencies Status devDependencies Status Dependency Status

Tweaks (with a security and accessibility focus) for Bootstrap version 3.

Installation

  • Install with npm: npm install bootstrap-hacks
  • Install with Bower: bower install bootstrap-hacks
  • Add a WebJar dependency to build.sbt: libraryDependencies += "org.webjars.npm" % "bootstrap-hacks" % "0.4.0"

Usage

LESS

  // Import Bootstrap itself.
  @import ".../bootstrap/less/bootstrap.less";
  
  // Then import bootstrap-hacks.
  @import ".../bootstrap-hacks/less/bootstrap-hacks.less";

CSS

You can find pre-compiled CSS in dist/css/bootstrap-hacks.css. It includes all hacks except accessible varibles.

Included Hacks

Accessible links

Bootstrap removes underline styles for links. This is a failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision. Include accessible-links.less to restore the default underline styles.

Accessible variables

Bootstrap's default placeholder color (#999) doesn't meet WCAG 2.0 AA's color contrast requirement. Include accessible-variables.less to override @input-color-placeholder with a darker shade of gray (#767676).

Bootstrap's default colors for @brand-primary, @brand-success, @brand-danger, @state-info-text and @state-danger-text do not meet WCAG 2.0 AA's color contrast requirement. They are replaced with accessible alternatives.

Progress bar

Enables use of Bootstrap's progress bar component without requiring inline styles, in turn allowing CSP headers to exclude the 'unsafe-inline' style-src.

Usage

  1. Include progressbar.less in your project however you like.

  2. Remove the inline style attribute from your progress bars; progressbar.less will style them appropriately.

    Before:

    <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

    After:

    <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Caveats

  • Only works for integral values of aria-valuenow (e.g. aria-valuenow="60" will work, aria-valuenow="60.1" won't).
  • Only works when the progress bar displays values between 0 and 100 (i.e. aria-valuemin="0" and aria-valuemax="100").

Prevent zoom on focus on iOS

iOS can automatically zoom in when a form input element receives focus. Developers often disable this behaviour by setting restrictive values for the viewport meta element. This can negatively affect accessibility:

Ensure that the browser pinch zoom is not blocked by the page's viewport meta element so that it can be used to zoom the page to 200%. Restrictive values for user-scalable and maximum-scale attributes of this meta element should be avoided.

Instead, include prevent-ios-zoom-on-focus.less to set the font size of form inputs to 16px when in the extra small responsive breakpoint. This will prevent iOS from zooming automatically when an input receives focus but continue to allow users to pinch to zoom.