Accessibility Tool

The accessibility is a tool designed for people with visual disabilities that would normally have trouble seeing a website. This tool will allow the user to adjust a variety of options including: adjusting grayscale, changing contrast, inverting the page color, changing the website font size, and even increasing the size of the cursor! The accessibility tool will work across the whole entire site. This will benefit our clients because it will allow their clients to access and view their sites without any visual issues.

To add this tool to a site, you will need to complete the following steps:

1. Add the CSS and JS files to your template:

• CSS: <link type="text/css" rel="stylesheet" media="screen" href="/common/resources/designportfolio/televox/CommonLib/scripts/accessibilityTool/accessibilityTool.css" />
• JavaScript: <script src="/common/resources/designportfolio/televox/CommonLib/scripts/accessibilityTool/accessibilityTool.js" type="text/javascript"></script>

2. Copy the HTML snippet below and paste it in your template. (Preferably just before the closing header tag):

<div id="accessibilityTool"><a class="toggle" href="#" onclick="return false;"><span class="offScreen">Accessibility Tool</span></a>
  <div class="menu">
    <div class="overlay show">
      <div class="message">
        <p>This tool uses cookies, click confirm below to use this tool</p>
        <a class="cookies" href="#" onclick="return false;" data-confirm="no">Confirm</a>
      </div>
    </div>
<div class="row help">
    <p>Press<strong>Shift</strong> + <strong>a</strong> to open/close this menu</p>
</div>     
 <div class="row">
        <div class="top"><input type="range" min="1" max="100" value="0" id="grayscale" data-num="0" />
   <label for="grayscale" class="offScreen">Grayscale</label></div>
        <!--top-->
        <div class="bottom"><span>Grayscale</span></div>
        <!--bottom-->
      </div>
      <div class="row">
        <div class="top">
          <ul class="contrast">
            <li><a href="#" onclick="return false;" data-num="1"><span class="offScreen">Contrast Level 1</span></a></li>
            <li><a href="#" onclick="return false;" data-num="2"><span class="offScreen">Contrast Level 2</span></a></li>
            <li><a href="#" onclick="return false;" data-num="3"><span class="offScreen">Contrast Level 3</span></a></li>
          </ul>
        </div>
        <div class="bottom"><span>Contrast</span></div>
      </div>
      <div class="row twoCol">
        <div class="left">
          <div class="top"><a href="#" onclick="return false;" class="invert" data-num="0"><span class="offScreen">Invert Colors</span></a></div>
          <div class="bottom"><span>Invert</span></div>
        </div>
        <div class="right">
          <div class="top"><a href="#" onclick="return false;" class="cursor"><img alt="Cursor Size" src="/common/resources/designportfolio/televox/CommonLib/scripts/accessibilityTool/cursor.png" /></a></div>
          <div class="bottom"><span>Cursor</span></div>
        </div>
      </div>
      <div class="row">
        <div class="top">
          <ul class="font">
            <li><a href="#" onclick="return false;" data-num="1">a<span class="offScreen">Font Size Level 1</span></a></li>
            <li><a href="#" onclick="return false;" data-num="2">a<span class="offScreen">Font Size Level 2</span></a></li>
            <li><a href="#" onclick="return false;" data-num="3">a<span class="offScreen">Font Size Level 3</span></a></li>
          </ul>
        </div>
        <!--top-->
        <div class="bottom"><span>Font Size</span></div>
        <!--bottom-->
      </div>
      <div class="row reset">
        <a href="#" onclick="return false;" class="reset option"><span></span><span class="offScreen">Reset Accessibility Options</span></a>
      </div>

  </div>
  <!--menu-->
</div>