1. Zuhause
  2. Frage und Antwort
  3. Semantische Eingabefehlermeldung innerhalb des Labels

Semantische Eingabefehlermeldung innerhalb des Labels

2017-10-09 8 views
4

Ich verwende <label>, um eine Eingabe so zu verpacken, dass ihre Erfolgs- und Fehlermeldungen innerhalb ihres Labels für die Zuordnung angezeigt werden können. Was ist Ihrer Meinung nach das wichtigste semantische Markup für dieses Szenario?Semantische Eingabefehlermeldung innerhalb des Labels

<label> 
    <b>Username</b> 
    <input> 
    <strong>Username already taken :(</strong> 
</label>

Für Fehler ist strong geeignet? Oder ist span besser? Ist role=status geeignet?

Quelle

2017-10-09 ryanve

+1

(keine Antwort) Sie können einen Bereich für den Text Ihres Labels verwenden (er ist bereits in einem Label) und strong/span/em/i/b wird nichts für aktuelle Screenreader ändern: es wird sein lesen (obwohl eines dieser Elemente eine bessere Semantik als andere haben kann, muss SR mit dem aktuellen HTML-Markup-Stand zurechtkommen, was weit davon entfernt ist, semantisch zu sein ^^) – FelipeAls

Antwort

6

The WCAG provides an example der Fehleranzeige unter Verwendung beider aria-invalid und aria-describedby Eigenschaften.

In Ihrem Beispiel würde der Code:

<label> 
    <b>Username</b> 
    <input aria-invalid="true" aria-describedby="error"> 
    <strong id="error">Username already taken :(</strong> 
</label>

Die strong ist angemessen, da es eine wichtige Mitteilung zu sein scheint. Eine alert Rolle (eher als status) wäre geeigneter für die Anwendung auf das #error Element according to the W3C.

Quelle

2017-10-13 20:10:45 Adam

+0

Thanks =) Verwendet ''aria-describedby]' drin '

+1

@ryanve 'aria-describedby' hat keinen Einfluss auf die normale Semantik des Labels, in der es sich von der Verwendung von' aria-labelledby' unterscheidet. Aber es stimmt, dass die Tatsache, dass "stark" innerhalb des "Etiketts" den Effekt hat, seinen Inhalt dem Etikettentext hinzuzufügen. Das Setzen des 'strong' Tags außerhalb des' label' Tags kann relevant sein, wenn 'aria-describedby' verwendet wird, da es das Label ('label' oder' aria-labeledby') und die Beschreibung ('aria-describedby') unterscheidet. – Adam

+0

Nach dem Graben tiefer fand ich, dass es eine spezifischere "Aria-errormessage" Attribut zu https://www.w3.org/TR/waiia/states_and_properties#aria-errormessage – ryanve

2

Die Verwendung eines starken Tags ist angebracht.

Starke Tags bedeuten, dass etwas von größerer Bedeutung ist und dass das Passwort falsch ist, da es den Benutzer davon abhält, fortzufahren.

Quelle

2017-10-12 23:34:50 jeffkmeng

2

Technisch können beide Elemente verwendet werden, um die entsprechende aussehende Fehlermeldung zu erstellen, die Sie suchen (mit der richtigen CSS). Das semantischste wäre meiner Meinung nach, das Strong-Tag zu verwenden, nur weil ich die Wichtigkeit eines falschen Passworts betonen möchte, ohne das font-weight:bold; in css verwenden zu müssen.

Auch da die Frage der Barrierefreiheit betroffen ist, ist das Strong-Tag besser für Screenreader geeignet und macht es wiederum zugänglicher.

Insgesamt denke ich, es ist schneller, einfacher und besser zu <strong> über <span> in diesem Szenario zu verwenden.

Quelle

2017-10-13 18:01:18 RockiRider

2

Stark ist gut, weil "Benutzername ist bereits vergeben" eher eine ernsthafte als eine beiläufige Gelegenheit ist.

Quelle

2017-10-18 20:15:29 ChriChri

1

Ich würde vorschlagen, es stark Tag zu behalten und auch CSS rote Farbe verwenden, um es als ein Fehler anzuzeigen.

Quelle

2017-10-19 21:25:07 KimboSlice

Verwandte Themen

 Verwandte Themen