HTML-Formular-Steuerelemente und Links
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Standard-HTML-Formular-Steuerelemente und Linkelemente zu benutzen, um die Tastaturbedienung von interaktiven Elementen der Benutzerschnittstelle und deren Interoperabilität mit assistierenden Techniken zur Verfügung zu stellen.
Benutzeragenten stellen die Tastaturbedienung von HTML-Formular-Steuerelementen und Links zur Verfügung. Zusätzlich ordnet der Benutzeragent die Formular-Steuerelemente und Links einem Barrierefreiheits-API zu. Assistierende Techniken benutzen das Barrierefreiheits-API , um die passenden Barrierefreiheitsinformationen wie beispielsweise role, name, state und value herauszuziehen und sie den Benutzern zu präsentieren. Das HTML-Element stellt „role“ zur Verfügung und der mit dem Element verbundene Text stellt „name“ zur Verfügung. Elemente, für die „values“ (Werte) und „states“ (Zustände) angebracht sind, zeigen außerdem die Werte und Zustände über verschiedene Mechanismen.
In manchen Fällen ist der Text schon durch ein Pflicht-Attribut mit dem Steuerelement verbunden. Absenden-Schaltflächen benutzen zum Beispiel den Text des button-Elements oder das 'alt'-Attribut des Bildes als Name. Im Falle von Formular-Steuerelementen werden label-Elemente oder 'title'-Attribute benutzt. Die folgende Tabelle zeigt, wie role, name, value und state bei HTML-Links und Formular-Steuerelementen bestimmt werden.
| HTML-Element | Rolle (role) | Name (name) | Wert (value) | Zustand (state) |
|---|---|---|---|---|
| <a> | link | 'title'-Attribut, Text innerhalb des <a>-Elements oder 'alt'-Attribut, wenn es ein Bild-Link ist. Verkettet, wenn sowohl Text- als auch Bild-'alt'-Attribute bereitgestellt werden | 'href' attribute | |
| <button> | push button | Text innerhalb des <button>-Elements oder des 'title'-Attributs | ||
| <fieldset> | grouping | <legend>-Element | ||
| <input type = "button", "submit", or "reset"> | push button | 'value'-Attribut | ||
| <input type = "image"> | push button | 'alt'-Attribut oder 'title'-Attribut | ||
| <input type = "text"> | Editierbarer Text (editable text) | Damit verbundenes <label>-Element oder 'title'-Attribut | 'value'-Attribut | |
| <input type = "password"> | Editierbarer Text (editable text) | Damit verbundenes <label>-Element oder 'title'-Attribut | ||
| <input type="checkbox"> | checkbox | Damit verbundenes <label>-Element oder 'title'-Attribut | 'checked'-Attribut | |
| <input type="radio"> | Radiobutton | Damit verbundenes <label>-Element oder 'title'-Attribut | 'checked'-Attribut | |
| <select> | Combobox, Liste oder Dropdown-Liste | Damit verbundenes <label>-Element oder 'title'-Attribut | <option>-Element mit 'selected'-Attribut, das auf „selected“ gesetzt wird | |
| <textarea> | Editierbarer Text (editable text) | Damit verbundenes <label>-Element oder 'title'-Attribut | Text innerhalb des <textarea>-Elements |
Benutzeragenten stellen Mechanismen zur Verfügung, um zu Links zu navigieren und sie auszuwählen. In jedem der folgenden Beispiele ist die Rolle „link“ aus dem <a href>. Beachten Sie, dass <a name> nicht die Rolle von „link“ bereitstellt. Der Wert ist der URI im 'href'-Attribut.
In Beispiel 1a ist der Name der Text innerhalb des Links, in diesem Fall „Example Site“.
Code-Beispiel:
<a href="www.example.com">Example Site</a>
In Beispiel 1b von einem Bild innerhalb eines Links stellt das 'alt'-Attribut für das Bild den Namen zur Verfügung. Einige Werkzeuge zum Ansehen der APIs, wie beispielsweise Microsoft Inspect Objects, bringen dies nicht zum Vorschein, aber assistierende Techniken tun dies.
Code-Beispiel:
<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
In Beispiel 1c wird der Name aus den verschiedenen Elementen innerhalb des Links verkettet, so dass es heißt „Example Text“
Code-Beispiel:
<a href="www.example.com"><img src="example_logo.gif" alt="Example">Text</a>Es gibt verschiedene Arten, um eine Schaltfläche in HTML zu erstellen und sie werden alle der „push button“-Rolle zugeordnet.
In Beispiel 2a ist der Text im button-Element enthalten, in diesem Fall „save“, genau wie der Name. Es gibt keinen Wert.
Code-Beispiel:
<button>Save</button>
Beispiel 2b benutzt das 'value'-Attribut, in diesem Fall „Save“, „Submit“ oder „Reset“ als Name.
Code-Beispiel:
<input type="button" value="Save" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
Beispiel 2c benutzt das 'alt'-Attribut, in diesem Fall „save“, als Name.
Code-Beispiel:
<input type="image" src="save.gif" alt="save" />
In Beispiel 2d gibt es kein 'alt'-Attribut, so dass das 'title'-Attribut, in diesem Fall „save“, als Name benutzt wird.
Code-Beispiel:
<input type="image" src="save.gif" title="save" />
Beispiel 2e verdeutlicht, wie der Benutzeragent den Namen bestimmt, wenn der Autor sowohl das 'alt'- als auch das 'title'-Attribute des input-Elements festlegt. In diesem Fall benutzt der Benutzeragent das 'alt'-Attribut („Save“) und ignoriert das 'title'-Attribut.
Code-Beispiel:
<input type="image" src="save.gif" alt="save" title="save the file" />In Beispiel 3a hat das Eingabefeld die Rolle „editable text“ (editierbarer Text). Das label-Element ist mit dem input-Element über das 'for'-Attribut verbunden, welches das 'id'-Attribut des input-Elements referenziert. Der Name kommt vom label-Element, in diesem Fall „Type of fruit“. Sein Wert kommt von seinem value-Attribut, in diesem Fall „bananas“.
Code-Beispiel:
<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">In Beispiel 3b hat das Eingabefeld die gleiche Rolle und den gleichen Wert wie Beispiel 3a, aber es erhält seinen Namen vom 'title'-Attribut.
Code-Beispiel:
<input id="text_1" type="text" value="bananas" title="Type of fruit">Beispiel 4 hat die Rolle „checkbox“ aus dem 'type'-Attribut des input-Elements. Das label-Element ist mit dem input-Element über das 'for'-Attribut verbunden, welches sich auf das 'id'-Attribut des input-Elements bezieht. Der Name kommt vom label-Element, in diesem Fall „cheese“. Sein Zustand kann „checked“ (angehakt) oder „unchecked“ (nicht angehakt) sein und kommt vom 'checked'-Attribut. Der Zustand kann durch die Interaktion des Benutzers mit dem Steuerelement geändert werden.
Code-Beispiel:
<label for="cb_1">Cheese</label>
<input id="cb_1" type="checkbox" checked="checked">
Beispiel 5 hat die Rolle "radio button" aus dem 'type'-Attribut auf dem input-Element. Sein Name kommt vom label-Element. Der Zustand kann „checked“ (angehakt) oder „unchecked“ (nicht angehakt) sein und kommt vom 'checked'-Attribut. Der Zustand kann vom Benutzer geändert werden.
Code-Beispiel:
<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
Beispiel 6a hat die Rolle „Combobox“ vom select-Element. Sein Name lautet „Numbers“ vom label-Element. Es ist ein verbreiteter Fehler zu vergessen, dem select einen Namen zu geben. Der Wert ist das option-Element, dessen 'selected'-Attribut auf "selected" (ausgewählt) gesetzt wird. In diesem Fall ist der Standardwert „Two“ (zwei).
Code-Beispiel:
<label for="s1">Numbers</label>
<select id="s1" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
Beispiel 6b hat den gleichen Namen, die gleiche Rolle und den gleichen Wert wie oben, setzt aber den Namen mit dem 'title'-Attribut auf dem select-Element. Diese Technik kann benutzt werden, wenn eine sichtbare Beschriftung nicht erwünscht ist.
Code-Beispiel:
<select id="s1" title="Numbers" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
Beispiel 7a hat die Rolle „editable text“ aus dem textarea-Element. Der Name lautet „Type your speech here“ aus dem label-Element. Der Wert ist der Inhalt innerhalb des textarea-Elements, in diesem Fall „Four score and seven years ago“.
Code-Beispiel:
<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea>
Beispiel 7b hat die gleiche Rolle, den gleichen Namen und den gleichen Wert, setzt aber den Namen durch Benutzung des 'title'-Attributs.
Code-Beispiel:
<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
Das Radio-Fieldset in Beispiel 8 hat die Rolle „grouping“. Der Name kommt vom legend-Element.
Code-Beispiel:
<fieldset>
<legend>Choose a Color:</legend>
<input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br />
<input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br />
<input id="green" type="radio" name="color" value="green" /><label for="green">Green</label>
</fieldset>
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie den HTML-Quellcode.
Prüfen Sie für jede Instanz von Links und Formularelementen, ob der Name, Wert und Zustand wie in der Tabelle oben angegeben festgelegt wurden.
Test #2 ist wahr
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.