HTML-Prototype von Hochschule RheinMain

<div class="c-filter"><a class="u-skip-link btn btn--right-link" href="#live-region">Skip to List</a>
  <button class="c-filter__title" type="button" aria-expanded="false" aria-disabled="false" aria-controls="filter-section">Filter</button>
  <div class="c-filter__content" id="filter-section">
    <button class="c-filter__reset" type="button">Alle Filter entfernen</button>
    <fieldset class="c-filter__fieldset" tabindex="0">
      <legend>Personengruppen</legend>
      <div class="c-filter__options js-in2studyfinder-filter-options">
        <input id="Alle Personen" type="radio" value="Alle Personen"/>
        <label class="c-filter__label" for="Alle Personen">Alle Personen</label>
        <input id="Professor*innen" type="radio" value="Professor*innen"/>
        <label class="c-filter__label" for="Professor*innen">Professor*innen</label>
        <input id="Lehrbeauftrage" type="radio" value="Lehrbeauftrage"/>
        <label class="c-filter__label" for="Lehrbeauftrage">Lehrbeauftrage</label>
        <input id="Mitarbeitende" type="radio" value="Mitarbeitende"/>
        <label class="c-filter__label" for="Mitarbeitende">Mitarbeitende</label>
        <input id="wissenschaftliche Mitarbeitende" type="radio" value="wissenschaftliche Mitarbeitende"/>
        <label class="c-filter__label" for="wissenschaftliche Mitarbeitende">wissenschaftliche Mitarbeitende</label>
      </div>
    </fieldset>
    <hr/>
    <fieldset class="c-filter__alphabet" tabindex="0">
      <legend class="u-visually-hidden">Anfangsbuchstabe</legend>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="A" value="A"/>
        <label for="A">A</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="B" value="B"/>
        <label for="B">B</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="C" value="C"/>
        <label for="C">C</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="D" value="D"/>
        <label for="D">D</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="E" value="E"/>
        <label for="E">E</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="F" value="F"/>
        <label for="F">F</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="G" value="G"/>
        <label for="G">G</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="H" value="H"/>
        <label for="H">H</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="I" value="I"/>
        <label for="I">I</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="J" value="J"/>
        <label for="J">J</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="K" value="K"/>
        <label for="K">K</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="L" value="L"/>
        <label for="L">L</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="M" value="M"/>
        <label for="M">M</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="N" value="N"/>
        <label for="N">N</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="O" value="O"/>
        <label for="O">O</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="P" value="P"/>
        <label for="P">P</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="Q" value="Q"/>
        <label for="Q">Q</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="R" value="R"/>
        <label for="R">R</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="S" value="S"/>
        <label for="S">S</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="T" value="T"/>
        <label for="T">T</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="U" value="U"/>
        <label for="U">U</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="V" value="V"/>
        <label for="V">V</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="W" value="W"/>
        <label for="W">W</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="X" value="X" aria-disabled="true" disabled="disabled"/>
        <label for="X">X</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="Y" value="Y" aria-disabled="true" disabled="disabled"/>
        <label for="Y">Y</label>
      </div>
      <div class="c-filter__letter">
        <input type="radio" name="alphabet" id="Z" value="Z" aria-disabled="true" disabled="disabled"/>
        <label for="Z">Z</label>
      </div>
    </fieldset>
  </div>
</div>