uni/slides/223015c-2026/assets/demos/keyboard-a11y.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Tastatur-Navigation</title>
<style>
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
  body { padding: 24px; display: inline-block; }

  .kb {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
  }
  .main { display: flex; flex-direction: column; gap: 4px; }
  .row { display: flex; gap: 4px; }
  .nav { display: grid; grid-template-columns: repeat(3, 42px); gap: 4px; }

  .k {
    height: 38px;
    min-width: 38px;
    padding: 0 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    background: #f9fafb;
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.45;
  }
  .k.active {
    background: #fce7f3;
    border-color: #d63384;
    color: #7c2d12;
    opacity: 1;
    box-shadow: 0 2px 0 #d63384, 0 3px 6px rgba(214,51,132,0.18);
    font-size: 0.8rem;
  }
  .k.tab { min-width: 64px; }
  .k.caps { min-width: 74px; }
  .k.shift { min-width: 92px; }
  .k.shift-r { min-width: 110px; }
  .k.enter { min-width: 84px; }
  .k.backspace { min-width: 78px; }
  .k.space { flex: 1; min-width: 260px; height: 38px; }
  .k.mod { min-width: 48px; }
  .k.mod-space { min-width: 48px; }
  .k.arrow { height: 38px; min-width: 38px; }

  .legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 12px;
    font-size: 0.9rem;
    color: #1a1a2e;
  }
  .legend .item { display: flex; align-items: center; gap: 10px; }
  .legend .mini {
    display: inline-flex;
    min-width: 32px;
    height: 28px;
    padding: 0 7px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    background: #fce7f3;
    border: 1.5px solid #d63384;
    color: #7c2d12;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 0 #d63384;
  }
  .legend .text { font-size: 0.88rem; line-height: 1.2; }
  .legend .text b { color: #d63384; }

  .title {
    font-weight: 700;
    font-size: 1rem;
    color: #1a1a2e;
    margin-bottom: 10px;
  }
</style>
</head>
<body>
<div class="kb">
  <div class="main">
    <!-- Row 1: Function/digit -->
    <div class="row">
      <div class="k">`</div>
      <div class="k">1</div><div class="k">2</div><div class="k">3</div><div class="k">4</div>
      <div class="k">5</div><div class="k">6</div><div class="k">7</div><div class="k">8</div>
      <div class="k">9</div><div class="k">0</div>
      <div class="k">-</div><div class="k">=</div>
      <div class="k backspace">⌫</div>
    </div>
    <!-- Row 2: Tab QWERTY -->
    <div class="row">
      <div class="k tab active">⇥ Tab</div>
      <div class="k">Q</div><div class="k">W</div><div class="k">E</div><div class="k">R</div>
      <div class="k">T</div><div class="k">Y</div><div class="k">U</div><div class="k">I</div>
      <div class="k">O</div><div class="k">P</div>
      <div class="k">[</div><div class="k">]</div><div class="k">\</div>
    </div>
    <!-- Row 3: Caps ASDF Enter -->
    <div class="row">
      <div class="k caps">Caps</div>
      <div class="k">A</div><div class="k">S</div><div class="k">D</div><div class="k">F</div>
      <div class="k">G</div><div class="k">H</div><div class="k">J</div><div class="k">K</div>
      <div class="k">L</div>
      <div class="k">;</div><div class="k">'</div>
      <div class="k enter active">↵ Enter</div>
    </div>
    <!-- Row 4: Shift ZXCV Shift -->
    <div class="row">
      <div class="k shift active">⇧ Shift</div>
      <div class="k">Z</div><div class="k">X</div><div class="k">C</div><div class="k">V</div>
      <div class="k">B</div><div class="k">N</div><div class="k">M</div>
      <div class="k">,</div><div class="k">.</div><div class="k">/</div>
      <div class="k shift-r active">⇧ Shift</div>
    </div>
    <!-- Row 5: Ctrl/Alt/Space -->
    <div class="row">
      <div class="k mod">Ctrl</div>
      <div class="k mod">⌘</div>
      <div class="k mod">Alt</div>
      <div class="k space active">␣ Leertaste</div>
      <div class="k mod">Alt</div>
      <div class="k mod">⌘</div>
      <div class="k mod">Ctrl</div>
    </div>
  </div>

  <!-- Arrow cluster -->
  <div class="nav">
    <div></div>
    <div class="k arrow active">↑</div>
    <div></div>
    <div class="k arrow active">←</div>
    <div class="k arrow active">↓</div>
    <div class="k arrow active">→</div>
  </div>
</div>

<div style="display: flex; gap: 28px; margin-top: 26px;">
  <div class="legend">
    <div class="title">Navigation</div>
    <div class="item">
      <span class="mini">⇥</span>
      <span class="text"><b>Tab</b> – zum nächsten fokussierbaren Element</span>
    </div>
    <div class="item">
      <span class="mini">⇧⇥</span>
      <span class="text"><b>Shift + Tab</b> – ein Element zurück</span>
    </div>
    <div class="item">
      <span class="mini">↑↓←→</span>
      <span class="text"><b>Pfeiltasten</b> – scrollen, innerhalb Listen/Menüs navigieren</span>
    </div>
  </div>
  <div class="legend">
    <div class="title">Aktion</div>
    <div class="item">
      <span class="mini">↵</span>
      <span class="text"><b>Enter</b> – Link/Button aktivieren</span>
    </div>
    <div class="item">
      <span class="mini">␣</span>
      <span class="text"><b>Leertaste</b> – Checkbox toggle, Dropdown öffnen, scrollen</span>
    </div>
  </div>
</div>
</body>
</html>