Tweaks (with a security and accessibility focus) for Bootstrap version 3.
- 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"
// Import Bootstrap itself. @import ".../bootstrap/less/bootstrap.less"; // Then import bootstrap-hacks. @import ".../bootstrap-hacks/less/bootstrap-hacks.less";
You can find pre-compiled CSS in
dist/css/bootstrap-hacks.css. It includes all hacks except accessible varibles.
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.
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 (
Bootstrap's default colors for
@state-danger-text do not meet WCAG 2.0 AA's color contrast requirement. They are replaced with accessible alternatives.
Include progressbar.less in your project however you like.
Remove the inline style attribute from your progress bars; progressbar.less will style them appropriately.
- Only works for integral values of
- Only works when the progress bar displays values between 0 and 100 (i.e.
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.
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.