Zugängliche Eingabeelemente | die Grundlagen

TL;DR: Unabhängig davon, wie klein eine Komponente ist, achten Sie immer darauf, dass Sie bei der Implementierung eine Vielzahl unterschiedlicher Benutzer und deren Fähigkeiten berücksichtigen. Auf den ersten Blick scheinen Eingabeelemente wie eine Checkbox eine einfache Lösung zu sein – dennoch gibt es einige Dinge zu beachten, um sicherzustellen, dass sie zugänglich sind.

Diese Serie befasst sich mit verschiedenen Arten von Eingabeelementen und wie man sie zugänglicher macht, beginnend mit den Grundlagen: Verwendung des richtigen Eingabetyps und Zuordnen einer Beschriftung.

Lassen Sie uns einen Blick darauf werfen.

Auswahl des richtigen Eingabetyps

Bei der Verwendung von Eingabeelementen in HTML möchten wir sicherstellen, dass immer der richtige Eingabetyp für das entsprechende Element festgelegt wird. Der Standard-Eingabetyp ist Text und kann in vielen Fällen funktionieren, aber so spezifisch wie möglich zu sein hilft allen Ihren Benutzern – und bringt eine Reihe inhärenter Funktionen mit sich. Definiert beispielsweise ein numerisches Eingabefeld, öffnet den Nummernblock auf Mobiltelefonen anstelle der Tastatur und Sie können den Bereich durch die Verwendung von Mindest- und Höchstzahlen einschränken. maskiert die entsprechende Eingabe und schützt somit die Privatsphäre des Benutzers. Je nach Browser wird öffnet eine Datumsauswahl usw. Durch die Auswahl des richtigen Eingabetyps erleichtern wir uns das Leben, können bestimmte Erbfunktionen in HTML nutzen und verbessern gleichzeitig die Benutzererfahrung.

Stellen Sie sicher, dass Ihren Eingabeelementen immer eine Beschriftung zugeordnet ist

Unabhängig davon, welche Art von Eingabe Sie verwenden, stellen Sie sicher, dass Sie Ihrem Eingabefeld eine Beschriftung zuordnen. Normalerweise kann dies mit einem erfolgen. Element und das for-Attribut.

<label for="firstname">First name:</label>
<input type="text" name="firstname">



<h3>
  
  
  aria-label vs. aria-labelledby
</h3>

<p>In a case in which a visual label is not an option or can't be associated with input element in the above mentioned way, aria-labels can also be used to identify form controls. If you are familiar with ARIA a little bit, you may be aware that the preferred option, if possible, is to work without aria whenever possible - however, in the real life of course, this isn't always feasible. </p>

<h4>
  
  
  aria-label
</h4>

<p>An aria-label can be used when no visible text label is present, for example, when an icon button is used without any text.<br>
</p>

<pre class="brush:php;toolbar:false"><button aria-label="Search"><img src="search-icon.svg" alt=""></button>

aria-labelledby

Wenn ein anderes Element als Referenz für die Beschriftung der Eingabe verwendet wird, ist aria-labelledby praktisch.

<div role="dialog">



<p>Versuchen Sie nach Möglichkeit, semantisches HTML zu verwenden, um barrierefreie Namen für Ihre Eingabeelemente bereitzustellen. Nur wenn Sie sichergestellt haben, dass dies in diesem speziellen Fall nicht möglich ist, kehren Sie zur Verwendung von Aria-Attributen zurück. </p>

<p>Sobald wir diese Grundlagen beherrschen, wie die Verwendung der semantischen Struktur, das Hinzufügen des richtigen Eingabetyps und das Zuordnen von Beschriftungen, können wir uns die anderen Aspekte genauer ansehen, um unsere Eingabeelemente zugänglicher zu machen, wie z. B. deaktivierte Eingabeelemente, Fokussieren Sie Stil und Farbkontraste sowie die erwartete Tastaturnavigation. </p>

<p><strong>Ressourcen:</strong></p>

• W3Schools: HTML-Eingabetypen
• Beschriftungskontrollen – W3
• A11y Collective – Aria-label vs. aria-labelledby

Das obige ist der detaillierte Inhalt vonZugängliche Eingabeelemente | die Grundlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!