Menu acessibilidade

by Wendell Mosquini

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/uikit.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css">
<body>
  <p>
    teste
  </p>

  <a class="acessibilidade uk-text-center" accesskey="0" title="Acessibilidade">
    <i class="uk-icon-wheelchair uk-margin-bottom"></i>
    <br> ACESSIBILIDADE
    <br> AL+0
  </a>

  <div class="menuacessibilidade uk-text-left">
    <div>
      <div class="uk-flex">
        <div>
          <div class="uk-align-left">
            <a class="via-close"><i class="uk-icon-close"></i></a>
          </div>
          <div class="uk-align-right">
            <h4>ACESSIBILIDADE</h4>
          </div>
        </div>
      </div>
      <hr class="uk-margin-large-bottom uk-margin-top-remove">
      <p>Para navegação via teclado, utilize a combinação de teclas conforme o modelo abaixo:
        <br>ALT + [Nº de atalho]</p>
      <p>Atalhos de navegação: </p>
      <ul class="uk-list">
        <li>
          <div class="uk-flex">
            <div class="uk-margin-right">
              <div class="via-list-number">1</div>
            </div>
            <div>
              <a href="#body" accesskey="1" title="Menu">Menu</a>
            </div>
          </div>
        </li>
        <li>
          <div class="uk-flex">
            <div class="uk-margin-right">
              <div class="via-list-number">2</div>
            </div>
            <div>
              <a href="#tm-top-b" accesskey="2" title="">Top b</a>
            </div>
          </div>
        </li>
        <li>
          <div class="uk-flex">
            <div class="uk-margin-right">
              <div class="via-list-number">3</div>
            </div>
            <div>
              <a href="#tm-top-c" accesskey="3" title="">Top c</a>
            </div>
          </div>
        </li>
        <li>
          <div class="uk-flex">
            <div class="uk-margin-right">
       ...

CSS

html {
  font: normal 16px / 25px 'Montserrat';
}

.acessibilidade {
  z-index: 100;
  margin-left: 0px;
  position: fixed;
  right: 0;
  top: 50px;
  background: #fff;
  border: #ccc 1px solid;
  box-shadow: #ccc 0 0 2px;
  border-left: 0;
  font-size: 12px;
  line-height: 15px;
  -webkit-border-bottom-left-radius: 0.8em;
  -webkit-border-top-left-radius: 0.8em;
  -moz-border-radius-bottomleft: 0.8em;
  -moz-border-radius-topleft: 0.8em;
  border-bottom-left-radius: 0.8em;
  border-top-left-radius: 0.8em;
  padding: 10px 16px 10px 14px;
  cursor: pointer;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
}

.acessibilidade.execute {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

.menuacessibilidade {
  position: fixed;
  top: 50px;
  right: 0;
  width: 220px;
  border-radius: 0;
  height: 100%;
  background-color: #FFF;
  text-align: center;
  overflow: auto;
  padding: 16px;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.2);
  box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.2);
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
}

.menuacessibilidade.execute {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.acessibilidade [class*=uk-icon-] {
  font-size: 20px;
}

.active-contrast {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: gray;
}

JavaScript

jQuery(document).ready(function($) {
  $('.acessibilidade').on('click', function() {
    $('.acessibilidade').toggleClass('execute');
    $('.menuacessibilidade').toggleClass('execute');
  });
});

jQuery(document).ready(function($) {
  $('.via-close').on('click', function() {
    $('.menuacessibilidade').toggleClass('execute');
    $('.acessibilidade').toggleClass('execute');
  });
});

jQuery(document).ready(function($) {
  $('input').click(function() {
    var acess = $(this).attr("value");
    if (acess == 'contrast') {
      $("body").addClass('active-contrast');
    } else {
      $("body").removeClass('active-contrast');
    }
  });
});

jQuery(document).ready(function($) {
  $("#aumentarfonte").click(function() {
    tamanhoFonte = $('html').css('font-size');
    tamanhoFonte = tamanhoFonte.replace(/[a-z]/gi, "");
    tamanhoFonte = tamanhoFonte ? parseInt(tamanhoFonte) : 0
    tamanhoFonte++;
    $('html').css('font-size', tamanhoFonte);
  });
});
jQuery(document).ready(function($) {
  $("#reduzirfonte").click(function() {
    tamanhoFonte = $('html').css('font-size');
    tamanhoFonte = tamanhoFonte.replace(/[a-z]/gi, "");
    tamanhoFonte = tamanhoFonte ? parseInt(tamanhoFonte) : 0
    if (tamanhoFonte >= 14) {
      tamanhoFonte--;
      $('html').css('font-size', tamanhoFonte);
    }
  });
});
jQuery(document).ready(function($) {
  $("#originalfonte").click(function() {
    $('html').css('font-size', 16);
  });
});