Accessibility Checker

In this example below you will see how to do a Accessibility Checker with some HTML / CSS and Javascript

Front end tool to help users that have accessible needs.

Thumbnail
This awesome code was written by mcallaro88, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mcallaro88 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Accessibility Checker</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="https://use.fontawesome.com/5a93ba4da5.js"></script>
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h1>Heading One</h1>
      <h2>Heading Two</h2>
      <h3>Heading Three</h3>
      <h4>Heading Four</h4>
      <h5>Heading Five</h5>
      <h6>Heading Six</h6>
    </div>
    <div class="col-sm-6">
      <h2>Jon Snow</h2>
      <img src="http://ll-c.ooyala.com/e1/c3dDh1YjE6VMrguz-8XGz-4eD_LkTHbw/promo323718229" alt="">
    </div>
  </div>
  
  <h3>Our story begins...</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into <a href="#">electronic typesetting</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with <a href="#">desktop publishing software</a> like Aldus PageMaker including versions of Lorem Ipsum.</p>

  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, <a href="#">consectetur</a>, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>

  <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line
    of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in <a href="#">section 1.10.32</a>.</p>

  <div id="accessibility-btn">
    <a href="#" class="inactive">
      <i class="fa fa-universal-access" aria-hidden="true"></i>
      <span class="sr-only">Accessibility menu</span>
    </a>
  </div>
  <div class="access-card hidden">
    <div class="fluid-container">
      <header>
        <h1>Accessibility Menu</h1>
      </header>
      <div class="access-card-body">
        <div class="row">
          <div class="col-sm-6 card-option left">
            <a href="#" class="bigger-cursor">
              <i class="fa fa-mouse-pointer" aria-hidden="true"></i> Big Cursor
            </a>
          </div>
          <div class="col-sm-6 card-option right">
            <a href="#" class="contrast">
              <i class="fa fa-desktop" aria-hidden="true"></i> Contrast
            </a>
          </div>
          <div class="col-sm-6 card-option left">
            <a href="#">
              <i class="fa fa-text-height" aria-hidden="true"></i> Bigger Text
            </a>
          </div>
          <div class="col-sm-6 card-option right">
            <a href="#" class="desaturate">
              <i class="fa fa-adjust" aria-hidden="true"></i> Desaturate
            </a>
          </div>
          <div class="col-sm-6 card-option left">
            <a href="#" class="highlight-links">
              <i class="fa fa-underline" aria-hidden="true"></i> Highlight Links
            </a>
          </div>
          <div class="col-sm-6 card-option right">
            <a href="#" class="legible-font">
              <i class="fa fa-font" aria-hidden="true"></i> Legible Font
            </a>
          </div>
        </div>
      </div>
      <footer>
        <div class="row">
          <div class="col-sm-6">
            <a href="#" class="btn btn-success reset">
              <i class="fa fa-repeat fa-flip-horizontal" aria-hidden="true"></i>
              <span>Reset All</span>
            </a>
          </div>
          <div class="col-sm-6">
            <a href="#" class="btn btn-warning btn-block menu-close">
              <i class="fa fa-times" aria-hidden="true"></i>
              <span>Close menu</span>
            </a>
          </div>
        </div>
      </footer>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='js/mmxwgq.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mcallaro88/accessibility-checker-bRzKqK */
body {
  font-size: 16px;
  font-family: "Raleway", sans-serif;
}
body p a:link,
body p a:visited {
  border-bottom: 1px solid #ccc;
  padding: 2px;
  outline: 0;
  -webkit-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear;
}
body p a:active,
body p a:focus,
body p a:hover {
  background-color: #ffffcc !important;
  color: #BF1722;
  border-bottom: 1px solid #ccc;
  outline: none;
  text-decoration: none;
}
.container img {
  width: 100%;
}
.desaturate-active {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}
.contrast-active {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
.legible-active {
  font-family: Arial, Verdana, sans-serif;
}
.cursor-active {
  cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyOS4xODhweCIgaGVpZ2h0PSI0My42MjVweCIgdmlld0JveD0iMCAwIDI5LjE4OCA0My42MjUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI5LjE4OCA0My42MjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iI0Q5REFEOSIgc3Ryb2tlLXdpZHRoPSIxLjE0MDYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIyLjgsNC41NDkgMjYuODQ3LDE5LjkwMiAxNi45NjQsMjIuNzAxIDI0LjIzOSwzNy43NDkgMTguMjc4LDQyLjAxNyA5Ljc0MSwzMC43MjQgMS4xMzgsMzUuODA5ICIvPjxnPjxnPjxnPjxwYXRoIGZpbGw9IiMyMTI2MjciIGQ9Ik0yOS4xNzUsMjEuMTU1YzAuMDcxLTAuNjEzLTAuMTY1LTEuMjUzLTAuNjM1LTEuNTczTDIuMTY1LDAuMjU4Yy0wLjQyNC0wLjMyLTAuOTg4LTAuMzQ2LTEuNDM1LTAuMDUzQzAuMjgyLDAuNDk3LDAsMS4wMywwLDEuNjE3djM0LjE3MWMwLDAuNjEzLDAuMzA2LDEuMTQ2LDAuNzc2LDEuNDM5YzAuNDcxLDAuMjY3LDEuMDU5LDAuMjEzLDEuNDgyLTAuMTZsNy40ODItNi4zNDRsNi44NDcsMTIuMTU1YzAuMjU5LDAuNDgsMC43MjksMC43NDYsMS4yLDAuNzQ2YzAuMjM1LDAsMC40OTQtMC4wOCwwLjcwNi0wLjIxM2w2Ljk4OC00LjU4NWMwLjMyOS0wLjIxMywwLjU2NS0wLjU4NiwwLjY1OS0xLjAxM2MwLjA5NC0wLjQyNiwwLjAyNC0wLjg4LTAuMTg4LTEuMjI2bC02LjM3Ni0xMS4zODJsOC42MTEtMi43NDVDMjguNzA1LDIyLjI3NCwyOS4xMDUsMjEuNzY4LDI5LjE3NSwyMS4xNTV6IE0xNi45NjQsMjIuNzAxYy0wLjQyNCwwLjEzMy0wLjc3NiwwLjUwNi0wLjk0MSwwLjk2Yy0wLjE2NSwwLjQ4LTAuMTE4LDEuMDEzLDAuMTE4LDEuNDM5bDYuNTg4LDExLjc4MWwtNC41NDEsMi45ODVsLTYuODk0LTEyLjMxNWMtMC4yMTItMC4zNzMtMC41NDEtMC42NC0wLjk0MS0wLjcyYy0wLjA5NC0wLjAyNy0wLjE2NS0wLjAyNy0wLjI1OS0wLjAyN2MtMC4zMDYsMC0wLjU4OCwwLjEwNy0wLjg0NywwLjMyTDIuOCwzMi41OVY0LjU0OWwyMS41OTksMTUuODA2TDE2Ljk2NCwyMi43MDF6Ii8+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg=='), auto;
}
.highlight-active p a {
  background-color: #ffffcc !important;
  color: #BF1722;
  border-bottom: 1px solid #ccc;
  padding: 2px;
  outline: none;
  text-decoration: none;
}
#accessibility-btn {
  background: #fff;
  border-radius: 50%;
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  text-align: center;
}
#accessibility-btn a {
  color: #003d68;
  display: block;
}
#accessibility-btn a.active {
  color: #007dd5;
}
#accessibility-btn i {
  font-size: 50px;
}
.access-card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: absolute;
  left: 80px;
  bottom: 80px;
}
.access-card.hidden {
  display: none;
}
.access-card.visible {
  display: block;
}
.access-card header {
  background: #003d68;
  color: #fff;
  font-size: 18px;
  padding: 15px;
}
.access-card header h1 {
  font-size: 16px;
  margin: 0;
}
.access-card header i {
  line-height: inherit;
}
.access-card .access-card-body {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin: 15px;
  text-align: center;
}
.access-card .access-card-body .card-option a {
  color: #000;
  display: block;
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
  text-transform: uppercase;
}
.access-card .access-card-body .card-option a:hover,
.access-card .access-card-body .card-option a:focus {
  background: #ecfbff;
}
.access-card .access-card-body .card-option a i {
  display: block;
  font-size: 24px;
  margin-bottom: 15px;
  text-decoration: none;
}
.access-card .access-card-body .card-option.left {
  padding-right: 0;
}
.access-card .access-card-body .card-option.right {
  padding-left: 0;
}
.access-card .access-card-body .card-option.right a {
  border-left: 1px solid #ccc;
}
.access-card footer {
  padding: 10px;
  text-align: center;
}
.access-card footer a {
  display: block;
}


/*Downloaded from https://www.codeseek.co/mcallaro88/accessibility-checker-bRzKqK */
  $(document).ready(function() {
  var btn_icon = $("#accessibility-btn a"),
    card_menu = $(".access-card"),
    cancel_btn = $(".menu-close");

  // close menu
  function closeMenu() {
    if (btn_icon.hasClass("active") && card_menu.hasClass("visible")) {
      // removes the active class and adds inactive
      btn_icon.removeClass("active");
      btn_icon.addClass("inactive");
      // removes the visible class and adds hidden
      card_menu.removeClass("visible");
      card_menu.addClass("hidden");
      // brings focus back to the btn when you close the menu
      btn_icon.focus();
    }
  }

  // reset selections
  function reset() {
    $("body").removeClass();
  }

  // onclick function for the close menu btn
  if (
    cancel_btn.on("click", function(e) {
      closeMenu();
      e.preventDefault();
    })
  );

  // press esc key within the menu and it closes the menu
  card_menu.keydown(function(e) {
    if (e.keyCode == 27) {
      closeMenu();
    }
  });

  // swaps classes for the btn and menu
  $(btn_icon).on("click", function() {
    if (btn_icon.hasClass("inactive")) {
      btn_icon.removeClass("inactive");
      btn_icon.addClass("active");
    } else {
      btn_icon.removeClass("active");
      btn_icon.addClass("inactive");
    }

    if (card_menu.hasClass("hidden")) {
      card_menu.removeClass("hidden");
      card_menu.addClass("visible");
      $(".bigger-cursor       ").focus();
    } else {
      card_menu.removeClass("visible");
      card_menu.addClass("hidden");
    }
  });

  // Click events for the menu items
  $(".reset").click(function() {
    reset();
  });

  $(".desaturate").on("click", function() {
    if ($("body").hasClass("contrast-active")) {
      $("body").removeClass("contrast-active");
      $("body").addClass("desaturate-active");
    } else {
      $("body").addClass("desaturate-active");
    }
  });

  $(".contrast").on("click", function() {
    if ($("body").hasClass("desaturate-active")) {
      $("body").removeClass("desaturate-active");
      $("body").addClass("contrast-active");
    } else {
      $("body").addClass("contrast-active");
    }
  });

  $(".legible-font").on("click", function() {
    $("body").addClass("legible-active");
  });

  $(".bigger-cursor").on("click", function() {
    $("body").addClass("cursor-active");
  });

  $(".highlight-links").on("click", function() {
    $("body").addClass("highlight-active");
  });
});

Comments