no-mouse.html

---
permalink: /no-mouse/
title: No Mouse
layout: default
---

<div class="container">
  <h1 class="h-alpha">Try using this page with no mouse</h1>

  <div class="post-content narrow no-mouse">

    <p class="h-bravo">To learn the secret slack channel, you must navigate this page without a mouse and answer the questions correctly.</p>

    <fieldset>
      <legend>To be accessible, a checkbox must have:</legend>
    
      <input type="checkbox" id="alphaCheckbox" correct>
      <label for="alphaCheckbox">Label that names the input's purpose</label>
    
      <input type="checkbox" id="bravoCheckbox" correct>
      <label for="bravoCheckbox">Role of checkbox</label>
    
      <input type="checkbox" id="charlieCheckbox" correct>
      <label for="charlieCheckbox">State of checked or unchecked</label>
    </fieldset>
  
    <fieldset>
      <legend>
        To navigate between radio inputs, use the keyboard:
      </legend>
    
      <input type="radio" name="nato" id="alphaRadio">
      <label for="alphaRadio">Tab key</label>
    
      <input type="radio" name="nato" id="bravoRadio" correct>
      <label for="bravoRadio">Arrow key</label>
    
      <input type="radio" name="nato" id="charlieRadio">
      <label for="charlieRadio">Spacebar</label>
    </fieldset>
  
    <div class="range-group">
      <input readonly tabindex="-1" class="range-value" id="cowbellValue" value="5" aria-hidden="true">
      <div>
        <label for="cowbell">
          The number of letters between the a and y in the word accessibility?
        </label>
        <input type="range"
               id="cowbell"
               name="cowbell"
               min="0"
               max="11"
               value="5"
               step="1">
      </div>
    </div>
    
    <fieldset>
      <legend>Which screenreader is available for free on Apple iOS and MacOS?</legend>
      <input type="checkbox" role="switch" id="alphaSwitch">
      <label for="alphaSwitch">NVDA</label>
  
      <input type="checkbox" role="switch" id="bravoSwitch" correct>
      <label for="bravoSwitch">VoiceOver</label>
  
      <input type="checkbox" role="switch" id="charlieSwitch">
      <label for="charlieSwitch">JAWS</label>
    </fieldset>
    
    <fieldset>
      <legend>
        Pop quiz:
      </legend>
      <label for="best-letter">
        A common abbreviation for accessibility is:
      </label>
      <input type="text" 
             id="best-letter"
             maxlength="4"
             aria-describedby="best-letter-hint">
      
      <div class="hint" id="best-letter-hint">
        Hint: It uses the number of letters between the a and y.
      </div>
    
    </fieldset>
  
    <details>
      <summary>
        What's the difference between a link and a button?
      </summary>
  
      <p>Buttons make something happen, like submitting a form or showing a popup message. Try it out.</p>
      <div role="alert" class="alert inert">
        <div id="favorite-error">
          <!--- Use JS to inject the alert here -->
        </div>     
      </div>
      <button id="show-alert">If it does something, it's a button</button>
      <hr>
      <p>Links take the user to another place, be it a skip link to another element in the same page or to another page entirely. Try it out.</p>
      <a class="button" href="#showModal">If it goes somewhere, it's a link</a>
    </details>

    <button id="showModal" disabled>
      Get the secret slack channel
    </button>
    
    
    <dialog role="dialog"
            id="modal"
            tabindex="-1"
            aria-modal="true"
            aria-labelledby="modal-title">
      <button type="reset"
              id="closeModal">
        <span class="hidden">Close</span>
      </button>
      <section>
        <h2 id="modal-title" class="h-bravo">
          The secret slack channel
        </h2>
        
        <p>Join the secret slack channel to be entered to win fabulous prizes.</p>
  
        <a class="button" href="https://tmus-cx.slack.com/archives/C039SQUULG7">
          Join #A11yFirst
        </a>
        </section>
    </dialog>
  </div>
</div>