HTML- und XHTML-Seiten, die Eingaben durch den Benutzer erfassen.
Die Technik bezieht sich auf:
Das optgroup-Element wird nicht weithin von vielen Screenreadern unterstützt einschließlich JAWS 11 und niedriger oder Window-Eyes 6 und niedriger.
Das label-Attribut für option und optgroup wird nicht konsistent Benutzeragenten-übergreifend unterstützt und wird nicht weithin von Screenreadern einschließlich JAWS 11 und niedriger und Window-Eyes 6 und niedriger unterstützt.
Das Ziel dieser Technik ist es, Elemente in einer Auswahlliste zu gruppieren. Eine Auswahlliste ist eine Reihe erlaubter Werte für ein Formular-Steuerelement wie zum Beispiel eine Multi-Auswahlliste oder eine Combo-Box. Auswahllisten haben oft Gruppen mit verwandten Optionen. Diese Gruppen sollten semantisch gekennzeichnet sein, statt die Gruppen einfach mit „Schein“-Listeneinträgen abzugrenzen. Dies erlaubt es Benutzeragenten, die Optionen gruppenweise einzuklappen, um ein schnelleres Überfliegen der Optionen zu unterstützen und um darauf hinzuweisen, in welcher Gruppe sich eine Option, die von Interesse ist, befindet. Es hilft außerdem dabei, lange Listen visuell zu unterteilen, so dass Benutzer die Option(en), an der/denen sie interessiert sind, leichter finden können.
In HTML wird das select-Element benutzt, um sowohl Multi-Auswahllisten als auch Combo-Boxen zu erstellen. Die verschiedenen erlaubten Optionen werden jeweils mit option-Elementen gekennzeichnet. Um Optionen zu gruppieren, benutzen Sie das optgroup-Element mit den verwandten option-Elementen innerhalb dieses Elements. Beschriften Sie die Gruppe mit dem „label“-Attribut. so dass Benutzer wissen, was sie innerhalb der Gruppe erwartet.
Das optgroup-Element sollte direkt innerhalb des select-Elements sein und die option-Elemente direkt innerhalb der optgroup. Es ist möglich, dass ein select-Element sowohl einzelne option-Elemente und optgroup-Gruppen enthält, obwohl Autoren überlegen sollten, ob das in der Tat die gewünschte Absicht ist, wenn sie dies benutzen. Es ist nicht möglich, die optgroup-Elemente zu verschachteln, also kann nur eine Ebene der Gruppierung innerhalb eines select gemacht werden.
Wenn das Gruppieren von Informationen notwendig für das Verständnis der Liste ist, dann können Autoren option-Labels definieren, die verstanden werden können auch wenn der Screenreader die Gruppierungsinformationen, die durch optgroup zur Verfügung gestellt werden, nicht anbietet.
Die folgende Combo-Box erfasst Daten zu Lieblingsspeisen. Die Gruppierung nach Typ erlaubt es Benutzern, ihre Vorlieben schneller auszuwählen.
Code-Beispiel:
<form action="http://example.com/prog/someprog" method="post">
<label for="food">What is your favorite food?</label>
<select id="food" name="food">
<optgroup label="Fruits">
<option value="1">Apples</option>
<option value="3">Bananas</option>
<option value="4">Peaches</option>
<option value="5">...</option>
</optgroup>
<optgroup label="Vegetables">
<option value="2">Carrots</option>
<option value="6">Cucumbers</option>
<option value="7">...</option>
</optgroup>
<optgroup label="Baked Goods">
<option value="8">Apple Pie</option>
<option value="9">Chocolate Cake</option>
<option value="10">...</option>
</optgroup>
</select>
</form> Das folgende Beispiel zeigt, wie eine Multi-Auswahlbox das optrgroup-Element nutzen kann.
Code-Beispiel:
<form action="http://example.com/prog/someprog" method="post">
<label for="related_techniques"><strong>Related Techniques:</strong></label>
<select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
<optgroup label="General Techniques">
<option value="G1">G1: Adding a link at the top of each page ... </option>
<option value="G4">G4: Allowing the content to be paused and restarted ... </option>
<option value="G5">G5: Allowing users to complete an activity without any time... </option>
<option value="G8">G8: Creating an extended audio description for the ... </option>
<option value="G9">G9: Creating captions for live synchronized media... </option>
<option value="G10">G10: Creating components using a technology that ... </option>
</optgroup>
<optgroup label="HTML Techniques">
<option value="H2">H2: Combining adjacent image and text links for the same ... </option>
<option value="H4">H4: Creating a logical tab order through links, form ... </option>
<option value="H24">H24: Providing text alternatives for the area ... </option>
</optgroup>
<optgroup label="CSS Techniques">
<option value="C6">C6: Positioning content based on structural markup... </option>
<option value="C7">C7: Using CSS to hide a portion of the link text... </option>
</optgroup>
<optgroup label="SMIL Techniques">
<option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
<option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
<option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
</optgroup>
<optgroup label="ARIA Techniques">
<option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
<option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
<option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
</optgroup>
<optgroup label="Common Failures">
<option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
<option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
<option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images ... </option>
<option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
</optgroup>
</select>
</form> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie den Satz an Optionen innerhalb einer Auswahlliste um zu sehen, ob es Gruppen mit verwandten Elementen gibt.
Wenn es Gruppen mit verwandten Elementen gibt, sollten sie mit optgroup gruppiert sein.
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.