Tech Talk ARIA

      
  <!-- simple button -->
  <button onclick="alert('Hallo!')">HTML 5 Standard Button</button>
      

              
  
  <!-- simple div screenreader will initially read this but that's all -->
  <div onclick="alert('Hallo!')">DIV mit Klick Event</div>
  
              
            

              
  <style>
  div[role="button"] {
    border: 1px solid black;
    border-radius: 5px;
    padding: 0.5rem;
    margin: 1rem;
    cursor: pointer;
  
    &:hover {
      background-color: #eee;
    }
  }
  </style>
  <!-- screenreader will know its clickable -->
  <div role="button" onclick="alert('Hallo!')">
    DIV mit Role Button
  </div>
  
              
            

              
  
  <!-- keyboard kann button fokussieren 
    wenn ein Screenreader läuft, löst Return und Space das onclick Event
    aus, wenn nicht dann nicht -->
  <div tabindex="0" role="button" onclick="alert('Hallo!')">
    DIV mit Tab Index
  </div>
  
              
            

              
  
  <!-- alert wird bei jedem Tastatur Druck ausgelöst -->
  <div
    tabindex="0"
    role="button"
    onclick="alert('Hallo!')"
    onkeyup="alert('Hallo!')"
  >
    DIV mit onkeyup Event
  </div>
  
              
            

              
  <!-- alert wird mit Return und Space ausgelöst -->
  <div
    aria-label="Alert the word Hallo"
    tabindex="0"
    role="button"
    onclick="alert('Hallo!')"
    id="btn"
  >
    DIV mit eventlistener
  </div>
  </div>
  <script>
  document.getElementById("btn").addEventListener("keyup", test);
  function test(event) {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      alert("Hallo!");
    }
  }
  </script>