Barrierefreie Webseiten mit WordPress & barrierefreie PDF-Dateien

 <form id="bfsg-form" autocomplete="off">
      <!-- Schritt 1 -->
      <div class="step active" id="step1">
        <fieldset>
          <legend id="q1">Macht ihr Business 2 Customer Geschäfte?</legend>
          <div class="radio-group" role="radiogroup" aria-labelledby="q1">
            <input type="radio" name="b2c" id="b2c-yes" value="ja" />
            <label class="radio-label" for="b2c-yes" tabindex="0" >Ja</label>
            <input type="radio" name="b2c" id="b2c-no" value="nein" />
            <label class="radio-label no" for="b2c-no" tabindex="0" > Nein</label>
          </div>
        </fieldset>
      </div>
      <!-- Schritt 2 -->
      <div class="step" id="step2">
        <fieldset>
          <legend id="q2">Habt ihr 10 oder mehr Mitarbeiter?</legend>
          <div class="radio-group" role="radiogroup" aria-labelledby="q2">
            <input type="radio" name="ma10" id="ma10-yes" value="ja" />
            <label class="radio-label" for="ma10-yes" tabindex="0">Ja</label>
            <input type="radio" name="ma10" id="ma10-no" value="nein" />
            <label class="radio-label no" for="ma10-no" tabindex="0">Nein</label>
          </div>
        </fieldset>
      </div>
      <!-- Schritt 3: Umsatz -->
      <div class="step" id="step3">
        <fieldset>
          <legend id="q3">Habt ihr über 2 Mio € Umsatz?</legend>
          <div class="radio-group" role="radiogroup" aria-labelledby="q3">
            <input type="radio" name="umsatz" id="umsatz-yes" value="ja" />
            <label class="radio-label" for="umsatz-yes" tabindex="0">Ja</label>
            <input type="radio" name="umsatz" id="umsatz-no" value="nein" />
            <label class="radio-label no" for="umsatz-no" tabindex="0">Nein</label>
          </div>
        </fieldset>
      </div>
      <!-- Schritt 4: Onlineshop -->
      <div class="step" id="step4">
        <fieldset>
          <legend id="q4">Habt ihr einen Onlineshop?</legend>
          <div class="radio-group" role="radiogroup" aria-labelledby="q4">
            <input type="radio" name="shop" id="shop-yes" value="ja" />
            <label class="radio-label" for="shop-yes" tabindex="0">Ja</label>
            <input type="radio" name="shop" id="shop-no" value="nein" />
            <label class="radio-label no" for="shop-no" tabindex="0">Nein</label>
          </div>
        </fieldset>
      </div>
      <!-- Schritt 5: Dienstleistung -->
      <div class="step" id="step5">
        <fieldset>
          <legend id="q5">Bietet ihr eine Dienstleistung an, die man online buchen kann?</legend>
          <div class="radio-group" role="radiogroup" aria-labelledby="q5">
            <input type="radio" name="dienst" id="dienst-yes" value="ja" />
            <label class="radio-label" for="dienst-yes" tabindex="0">Ja</label>
            <input type="radio" name="dienst" id="dienst-no" value="nein" />
            <label class="radio-label no" for="dienst-no" tabindex="0">Nein</label>
          </div>
        </fieldset>
      </div>
    </form>
    <div id="result" class="result" tabindex="0" role="status" aria-live="assertive"></div>
    <button type="button" id="restart-btn" class="restart-btn">Neu starten</button>

    .step {
      display: none;
      margin-bottom: 2rem;
    }
    .step.active {
      display: block;
    }
    fieldset {
      border: none;
      margin: 0;
      padding: 0;
    }
    legend {
      font-size: var(--text-m);
      margin-bottom: 2rem;
    }
    .radio-group {
      display: flex;
      gap: 2rem;
      margin-bottom: 2rem;
    }
    .radio-label {
      display: block;
      font-size: 2rem;
      background: #d2f2d2;
      color: #222;
      border-radius: 1rem;
      padding: 1rem 3rem;
      text-align: center;
      cursor: pointer;
      border: 3px solid transparent;
      transition: background 0.2s, border 0.2s;
      user-select: none;
    }
    input[type="radio"] {
      display: none;
    }
    input[type="radio"]:focus + .radio-label,
    input[type="radio"]:checked + .radio-label {
      background: #fff2a8;
      border: 3px solid #0066cc;
      outline: none;
    }
    .radio-label.no {
      background: #ffd2d2;
    }
    .result {
      font-size: 2rem;
      font-weight: bold;
      background: #fff6c4;
      border-radius: 1rem;
      padding: 2rem;
      margin-top: 2rem;
      text-align: center;
      color: #222;
      min-height: 3em;
      display: none;
    }
    .result.active {
      display: block;
      animation: fadeIn 0.5s;
    }
    .restart-btn {
      display: none;
      margin: 2rem auto 0 auto;
      font-size: 1.2rem;
      background: #eee;
      color: #222;
      padding: 1rem 2rem;
      border-radius: 0.7rem;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
    }
    .restart-btn:focus {
      background: #b5e8f7;
      outline: 2px solid #0066cc;
    }
    .restart-btn.active {
      display: block;
      animation: fadeIn 0.5s;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

 // Hilfsfunktion: zeigt nur den angegebenen Schritt, blendet andere aus
    function showStep(id) {
      document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
      const step = document.getElementById(id);
      if(step) step.classList.add('active');
      // Fokus auf erste Auswahlmöglichkeit legen
      const radio = step ? step.querySelector('input[type="radio"]') : null;
      if(radio) radio.focus();
      // Ergebnis und Restart ausblenden
      document.getElementById('result').classList.remove('active');
      document.getElementById('restart-btn').classList.remove('active');
      document.getElementById('result').innerText = "";
    }

    function showResult(text) {
      document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
      const res = document.getElementById('result');
      res.innerText = text;
      res.classList.add('active');
      res.focus();
      // Restart-Button anzeigen und Fokus darauf
      const restart = document.getElementById('restart-btn');
      restart.classList.add('active');
      setTimeout(() => restart.focus(), 400); // nach kurzer Zeit, damit Screenreader erst das Ergebnis liest
    }

    function restartForm() {
      // Radios zurücksetzen
      document.querySelectorAll('input[type="radio"]').forEach(r => r.checked = false);
      showStep('step1');
      document.getElementById('bfsg-form').reset();
    }

    // Schritt 1
    document.getElementById('b2c-yes').addEventListener('change', () => showStep('step2'));
    document.getElementById('b2c-no').addEventListener('change', () => showResult('Nicht betroffen!'));

    // Schritt 2
    document.getElementById('ma10-yes').addEventListener('change', () => showStep('step4'));
    document.getElementById('ma10-no').addEventListener('change', () => showStep('step3'));

    // Schritt 3
    document.getElementById('umsatz-yes').addEventListener('change', () => showStep('step4'));
    document.getElementById('umsatz-no').addEventListener('change', () => showResult('Nicht betroffen!'));

    // Schritt 4
    document.getElementById('shop-yes').addEventListener('change', () => showResult('Wahrscheinlich betroffen vom BFSG!'));
    document.getElementById('shop-no').addEventListener('change', () => showStep('step5'));

    // Schritt 5
    document.getElementById('dienst-yes').addEventListener('change', () => showResult('Wahrscheinlich betroffen vom BFSG!'));
    document.getElementById('dienst-no').addEventListener('change', () => showResult('Nicht betroffen!'));

    // Restart-Button
    document.getElementById('restart-btn').addEventListener('click', restartForm);

    // Optional: Mit Enter/Leertaste auf dem Label auslösen
    document.querySelectorAll('.radio-label').forEach(lbl => {
      lbl.addEventListener('keydown', function(e){
        if(e.key === " " || e.key === "Enter") {
          e.preventDefault();
          document.getElementById(this.htmlFor).checked = true;
          document.getElementById(this.htmlFor).dispatchEvent(new Event('change'));
        }
      });
    });