Ich schreibe ein HTML-Formular, in dem die Anforderungen einiger Felder vom Wert anderer abhängen und sich daher dynamisch ändern. Ich möchte einen visuellen Hinweis auf diese Erforderlichkeit präsentieren, indem ich ein Sternchen vor jedem Pflichtfeld an die Marke angehängt habe. Da es rein visuell ist und die Semantik der Situation durch das Attribut required im entsprechenden Tag gut ausgedrückt wird, möchte ich, dass das Sternchen als Inhalt einer CSS-Definition hinzugefügt wird, anstatt es direkt oder per Skript in den HTML-Code einzufügen .
Das Hinzufügen von visuellem Inhalt zu einem Element vor dem erforderlichen Feld ist jedoch eine Herausforderung, da CSS-Selektorkombinatoren vorwärts (zu Kindern und folgenden Geschwistern) zu gehen scheinen, aber nicht rückwärts (zu Eltern oder früheren Geschwistern). .
Ich könnte natürlich einen Klassennamen im Label von demselben Code aus ändern, wo ich die Erforderlichkeit des Eingabefeldes ändere, aber das würde den Inhaltsergänzung von der Notwendigkeitsänderung in zwei verschiedene Anweisungen trennen, an die ich mich erinnern müsste Rufe jetzt zusammen, jetzt und in einem Jahr, das ist ein Zwang, den ich vermeiden möchte; Ich würde es vorziehen, die Erforderlichkeit des Eingabefelds zu ändern und das CSS auf diese Änderung reagieren zu lassen, ohne mich weiter zu engagieren.
Also habe ich die Reihenfolge jedes Labels und seines Eingabefeldes invertiert und dann beide in ein display:flex; flex-direction:column-reverse -Element eingefügt, wodurch der Label-Text vor dem entsprechenden Feld gerendert wird, obwohl er danach deklariert wird. Auf diese Weise kann ich einen Next-Geschwister-Kombinator verwenden, um dem Etikettentext eines jeden erforderlichen Feldes ein Sternchen hinzuzufügen:
Meine Frage ist jedoch, wie Screenreader diese doppelte Inversion interpretieren (einmal im HTML und einmal im CSS). Werden sie den Text vor einer Benutzereingabe auslesen?
Danke, ich habe immer die Notwendigkeit, mich hinzusetzen, einen Bildschirmleser zu installieren und diese Dinge selbst herauszufinden, aber ich habe anscheinend nie die Zeit dafür: - (
Screenreader interessieren sich normalerweise nicht für CSS. Sie lesen das DOM und kümmern sich nicht darum, wenn Sie Dinge mit CSS bewegen. Wenn ich eine horizontale Liste von Links mit float:right habe, werden sie visuell von rechts nach links angezeigt, aber wenn ich einen Screenreader-Dialog erstelle, der alle Links auf der Seite anzeigt, sind sie in der Reihenfolge des DOM unabhängig davon, wo das CSS sie auf der Seite platziert hat.
Der Grund, warum ich sage, dass Screenreader "in der Regel" CSS nicht interessieren, ist, dass die meisten Leser Text lesen, der über die content -Eigenschaft hinzugefügt wird, obwohl dieser Text über CSS hinzugefügt wurde . Aber ich würde nicht auf dieses Verhalten zählen. In Ihrem Beispiel höre ich "label one star", wenn Sie kiefer, nvda und voiceover verwenden, aber in der Vergangenheit würde ich nur "label one" hören. Bei der nächsten Version des Screenreaders oder Browsers könnte sich dies erneut ändern. Solange Sie die Eigenschaft required haben, ist das der wichtige Teil.
Erstens, wie in einer anderen Antwort gesagt, ignorieren die Screenreader jede CSS-Positionierung und behandeln die Tags in der DOM-Reihenfolge.
Nach H44: Verwenden von Beschriftungselementen zum Verknüpfen von Textbeschriftungen mit Formularsteuerelementen , die Reihenfolge der Beschriftung und Eingabe ist ebenfalls wichtig
Für alle Eingabeelemente vom Typ text, file oder password, für alle textareas und für alle ausgewählten Elemente in der Webseite:
- Überprüfen Sie, ob es ein label-Element gibt, das den Zweck des Steuerelements angibt vor der Eingabe-, Textbereichs- oder Auswahlelement
ABER In Ihrem Fall haben Sie eine sehr eigenartige Situation. Ihr label -Tag wird vor dem input -Tag (in der DOM-Reihenfolge) angezeigt, während der Textinhalt danach ist.
Ich würde sagen, dass Screenreader damit einverstanden wären, weil sie input und label als Ganzes lesen und "Implizites Label Field 1" ankündigen.
Solange Ihr label -Tag vor dem input[type=text] gesehen wird, ist dies kein schlechtes Design (die Dinge sind anders für input Felder vom Typ Radio oder Checkbox, wo es danach sein muss).
Tags und Links html css flexbox screen-readers