Accessibility Frage zu Html Aufbau

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
ich hab hier (JS Bin) ein Formular mit jeweils 5 radiobuttons und Vorne und Hinten labels.
Aber wirklich Zugänglich ist das nicht da ja der Screenreader nicht vorlesen kann das hier eine von bis Einschätzung des Benutzers stattfinden soll.
Hat wer n Tipp wie ich das besser hinbekomm das ein Benutzer nur über einen Screenreader versteht was ich will?

Viele Grüße
 

Wahooka

Grünschnabel
Hallo! :)

Zunächst solltest du wissen das Screenreader nicht gleich Screenreader ist, es gibt sehr viele davon und nicht alle machen das gleiche, dazu kommen noch Einstellungen vom Benutzer, der beispielsweise auch bestimmte Elemente "ausklammern" kann.

So passiert es, dass viele Screenreader immer mit titel-Attributen klarkommen, aber die meisten Benutzer genau dieses Attribut deaktivieren, weil es in der Welt der Webseiten einfach total sinnlos verwendet wird.
Demnach würde ich für eine barrierefreie Webseite immer auf Standards zugreifen, die zu 99.9 % funktionieren:
  • Fieldset
  • Label
  • Legend
  • <h1>-<h6>
  • alt bei Bildern
Um deinen Code anzupassen oder zu verbessern, schlage ich Folgendes vor:
  • Wenn du Fieldset verwendest, solltest du auch immer Label nutzen. Das Fieldset hat nur für sehende Benutzer die gewünschte Wirkung!
Hier gebe ich dir nun ein paar WCAG 2.0 konforme Beispiele, wie ich sie auch benutze:

Wenn du Formulare auszeichnen kannst (in deinem Code hast du allerdings nur die Radio-Buttons, daher fällt das eher weg)
HTML:
<form action="#" method="POST">
  <fieldset>
    <legend>Gewünschte Arbeitsweise</legend>
    <input type="radio" name="innovativ" id="innovativ" value="innovativ"/>
    <label for="innovativ">Innovativ</label>
    <input type="radio" name="mittelweg" id="mittelweg" value="mittelweg"/>
    <label for="mittelweg">Mittelweg</label>
    <input type="radio" name="konstant" id="konstant" value="konstant"/>
    <label for="konstant">Konstant</label>
  </fieldset>
  </form>
--> JS Bin

Um hier nun deine Skala umzusetzen ist es nicht erlaubt, das label mit display:none oder hidden "auszublenden". Screenreader lesen solche Elemente auch nicht vor. Wichtig in diesem Zusammenhang ist auch zu wissen, dass width:0px; oder ähnliches nicht zu empfehlen ist. Warum? Weil man an seine Zielgruppe denken muss. Sehr viele Menschen, die Screenreader nutzen, sind nicht zu 100 % erblindet. Das bedeutet, der Screenreader ist in vielen Fällen einfach nur eine Unterstützung. Wenn er nun Dinge vorliest, die der Benutzer nicht wahrnimmt, ist das sehr irritierend. Also würde ich mich entscheiden:
Muss es ein "nur Radio-Button-Design" sein, oder kann in jedem Feld auch noch eine Wertung mittels <label> stehen?

Der Vollständigkeit aber auch noch der Code mit "unsichtbarer" Schrift. Dafür nutzt man den CSS-Clip. Aber auch hier bitte an die vorangegangene Warnung denken.

CSS:
CSS:
.hiddentext {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
HTML:
<span class="hiddentext">Mich siehst du nicht!</span>
<span >Mich siehst du!</span>
---> JS Bin

Ich hoffe, das hat dir geholfen. Falls es dich interessiert, hier ein paar hilfreiche Links:
Alles gute :)