Struktur barrierefreier Formulare

[marctrix]

Hej alle,

bisher habe ich in allen Formularen so etwas gehabt um Felder zu beschriften:

<div class="input-container">
  <label for="first-name">Vorname</label>
  <input id="first-name">
</div>

Nun hat @Gunnar Bittersmann mich schon vor längerer Zeit auf die Idee gebracht, das anders zu machen:

<label class="input-container">
  <span>Vorname</span>
  <input>
</label>

Vorteil: man spart sich die Attribute for und id.

Das ist zwar etwas kürzer und eleganter, der eigentliche Vorteil liegt aber darin, die nicht dauernd erzeugen zu müssen, was mitunter schwierig werden kann, insbesondere, wenn ma mit templates arbeitet und Code wiederverwenden möchte.

Das Problem auf das ich jetzt gestoßen bin ist, dass ich nun keine Hilfetexte mehr wie im folgenden Beispiel umsetzen kann, denn das label ist ja klickbar und ich kann da also keine interaktiven Elemente mehr reinsetzen (außer dem input, das erlaubt die Spec ausdrücklich so):

<div class="input-container">
  <label for="first-name">Vorname</label>
  <details>
    <summary>Wie Sie Ihren Vornamen finden</summary>
    <h1>Fragen Sie Ihre Mama</h1>
    <p>Wenn Sie nicht mehr wisen, wie Sie heißen, fragen Sie am besten Ihre Mutter. Die weiß alles!</p>
    <h2>Fragen Sie <strong>nicht</strong> Ihren Partner.</h2>
    <p>Die Wahrscheinlichkeit ist sehr gering, dass Ihr amtlicher Vorname Schätzchen, wilde Maus oder Papabär lautet.</p>
    <h1>Räumen Sie endlich mal wieder auf und finden Sie Ihren Personalausweis</h1>
    <p>Auf Ihrem Personalausweis schauen Sie nun nach dem recht klein geschriebenen Wort "Vorname". Das Wort darüber ist Ihr Vorname.</p>
    <h2>Pro-Tipp für die Vornamen-Suche auf dem Ausweis</h2>
    <p>Wenn Sie Ihren Nachnamen noch kennen, dann schauen Sie in der Nähe des Nachnamens nach Ihrem Vornamen. Auf Ausweisen sind die beiden nie weit voneinander entfernt!</p>
  </details>
  <input id="first-name">
</div>

Hat jemand einen Rat? Am besten Gunnar: du setzt das doch so ein. Wie hast du das gelöst?

Marc

[Gunnar Bittersmann]

@@marctrix

Das Problem auf das ich jetzt gestoßen bin ist, dass ich nun keine Hilfetexte mehr wie im folgenden Beispiel umsetzen kann, denn das label ist ja klickbar und ich kann da also keine interaktiven Elemente mehr reinsetzen (außer dem input, das erlaubt die Spec ausdrücklich so):

Die Spec verbietet nicht details in label; details ist ja kein labelable element.

☞ Codepen: details in label

LLAP 🖖

[marctrix]

Hej Gunnar,

Das Problem auf das ich jetzt gestoßen bin ist, dass ich nun keine Hilfetexte mehr wie im folgenden Beispiel umsetzen kann, denn das label ist ja klickbar und ich kann da also keine interaktiven Elemente mehr reinsetzen (außer dem input, das erlaubt die Spec ausdrücklich so):

Die Spec verbietet nicht details in label; details ist ja kein labelable element.

☞ Codepen: details in label

Theorie: 1 Praxis: 6

Das Konstrukt besteht den Nutzer-Test leider nicht. Habe eben mit Domingos zusammen verschiedene Varianten getestet.

NVDA gibt das summary gar nicht aus, VoiceOver sagt nicht, dass sich das aufklappen lässt (es sei denn, man tippt es an - aber welcher blinde tut das schon...)

Marc

[Gunnar Bittersmann]

@@marctrix

Das Konstrukt besteht den Nutzer-Test leider nicht. Habe eben mit Domingos zusammen verschiedene Varianten getestet.

NVDA gibt das summary gar nicht aus, VoiceOver sagt nicht, dass sich das aufklappen lässt (es sei denn, man tippt es an - aber welcher blinde tut das schon...)

Hat das irgendwas mit dem label zu tun oder liegt das einfach daran, dass Screenreader details noch nicht unterstützen?

LLAP 🖖

[marctrix]

Hej Gunnar,

Hat das irgendwas mit dem label zu tun oder liegt das einfach daran, dass Screenreader details noch nicht unterstützen?

Liegt definitiv am label.

Wir haben die Gegenprobe gemacht auf meine .barrierefreie.website. Hier werden die details und summary wie erwartet ausgegeben mit Status (geöffnet oder geschlossen und nur im geöffneten Zustand vorgelesen). Marc

[Der Martin]

Hallo Marc,

    <summary>Wie Sie Ihren Vornamen finden</summary>
    <h1>Fragen Sie Ihre Mama</h1>
    <p>Wenn Sie nicht mehr wisen, wie Sie heißen, fragen Sie am besten Ihre Mutter. Die weiß alles!</p>
    <h2>Fragen Sie <strong>nicht</strong> Ihren Partner.</h2>
    <p>Die Wahrscheinlichkeit ist sehr gering, dass Ihr amtlicher Vorname Schätzchen, wilde Maus oder Papabär lautet.</p>
    <h1>Räumen Sie endlich mal wieder auf und finden Sie Ihren Personalausweis</h1>
    <p>Auf Ihrem Personalausweis schauen Sie nun nach dem recht klein geschriebenen Wort "Vorname". Das Wort darüber ist Ihr Vorname.</p>
    <h2>Pro-Tipp für die Vornamen-Suche auf dem Ausweis</h2>
    <p>Wenn Sie Ihren Nachnamen noch kennen, dann schauen Sie in der Nähe des Nachnamens nach Ihrem Vornamen. Auf Ausweisen sind die beiden nie weit voneinander entfernt!</p>

*lmao*!

Das war doch ein herrlich amüsanter Start in den Tag.
Danke schon mal dafür!

Apropos Mama weiß alles:

So long,
 Martin

[Rolf B]

Hallo Martin,

Das war doch ein herrlich amüsanter Start in den Tag.

99% Agree.

Das eine Prozent investiere ich für den kleinen Zweifel am sinnvollen Gebrauch von h1/h2 in diesen Details. Es sollte zumindest h2/h3 sein. Und es ist merkwürdig, wenn Überschriften mehr Bildschirmplatz belegen als der überschriebene Text.

Rolf

[Robert B.]

Moin Rolf,

wie hängen denn h1 und h2 mit dem Platz, den sie einnehmen, zusammen? Keines der S in CSS steht meines Wissens für semantisch.

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

Keines der S in CSS steht meines Wissens für semantisch.

Ja, und nachts ist es kälter als draußen 😉. Oder anders gesagt: Hä? Was hast das jetzt mit dem Thema zu tun?

Zitat aus unserem Wiki:

Mit HTML bestimmt man hierbei, was etwas ist, wie etwas aussehen soll, legt man mit CSS fest.

Das "was" ist die Semantik, sie steckt in der HTML Spec. <h_> Elemente haben die Aufgabe das Dokument zu gliedern. Eine visuelle Hervorhebung (via CSS) ist dafür wünschenswert, aber ich möchte nicht den Eindruck erweckt haben, dass dadurch Semantik definiert würde.

Ich muss aber trotzdem mit meinem kleinen Zweifel zurückrudern, weil es da noch ein Detail gibt, das ich übersehen habe: <details> ist ein sectioning root. Die Spec sagt:

Certain elements are said to be sectioning roots (...). These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

Als sectioning root Elemente gelistet werden: blockquote body details dialog fieldset figure und td

Demnach wäre ein h1 in einem details wohl tatsächlich zulässig.

Rolf

[marctrix]

Hej Rolf,

HTML5 outline hat bis heute keine Browserunterstützung.

Demnach wäre ein h1 in einem details wohl zulässig

In diesem Beispiel gibt es einfach keine höhere Ebene - also beginne ich mit einer h1.

Marc

[Robert B.]

Hallo Rolf,

ich bezog mich auf folgende Aussage:

Und es ist merkwürdig, wenn Überschriften mehr Bildschirmplatz belegen als der überschriebene Text.

Wie viel Bildschirmplatz etwas belegt, hängt ja nicht vom HTML ab, siehe auch deine Antwort.

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

offenbar bin ich heute von der Hitze erweicht...

Was ich prinzipiell unpassend fand (bevor ich das mit dem sectioning root las), war der Umstand, in einem details-Bereich - also mit etwas tief untergeordnetem - mit h1 zu arbeiten. Dass ich damit falsch lag, hatte ich ja schon gesagt.

Das Missverhältnis von Überschriftenumfang zu Textumfang gefällt mir aber nach wie vor nicht. Selbst wenn man vom Styling absieht und nur den Text betrachtet. Ich habe nicht das Gefühl, dass das alles Überschriften sind.

Rolf

[marctrix]

Hej Rolf,

Ich habe nicht das Gefühl, dass das alles Überschriften sind.

Hat viel mit Gefühl zu tun. Letztendlich hat derjenige recht, der den Text schreibt.

Manchmal schreibt er aber auch nur drauf los, so wie ich in diesem Fall.

Wie gesagt fände ich in einer echten Anwendung eine sortierte Liste am besten: die beste und einfachste Lösung des Problems zuerst, schwieriger umsetzbare Tipps mit weniger guten Erfolgsaussichten zuletzt.

Andere (nachvollziehbare) Ansätze sind sicherlich mindestens gleichwertig.

Marc

[Gunnar Bittersmann]

@@Rolf B

Das eine Prozent investiere ich für den kleinen Zweifel am sinnvollen Gebrauch von h1/h2 in diesen Details. Es sollte zumindest h2/h3 sein.

Mich hat irritiert, dass „Fragen Sie nicht Ihren Partner“ eine andere Hierarchie-Ebene ist als „Fragen Sie Ihre Mama“.

Ich würde das alles wohl gar nicht als Überschriften auszeichnen, sondern als <p><strong> oder gar als <p><b>.

LLAP 🖖

[marctrix]

Hej Gunnar,

Das eine Prozent investiere ich für den kleinen Zweifel am sinnvollen Gebrauch von h1/h2 in diesen Details.

In dem Beispiel gibt es keine höhere Ebene, also beginne ich mit einer h1...

Mich hat irritiert, dass „Fragen Sie nicht Ihren Partner“ eine andere Hierarchie-Ebene ist als „Fragen Sie Ihre Mama“.

Weil der Autor es thematisch diesem Teil der Anleitung zugeordnet hat. Dem ging es um „do“s nicht um „don‘t do“s - insofern solltet das kein eigner Punkt werden.

Ich würde das alles wohl gar nicht als Überschriften auszeichnen, sondern als <p><strong> oder gar als <p><b>.

Im Nachhinein fände ich selber, dass eine Liste am passendsten wäre…

Marc