Verfügbare Formen: Richtlinien, Beispiele und zugängliche JavaScript-Tricks.

Verfügbare Formen: Richtlinien, Beispiele und zugängliche JavaScript-Tricks.
Copyright © webSemantics 2010
For original English text, go to: http://www.websemantics.co.uk
Translated by A.Romanova

Autor: Mike Foskett

Also was werden Sie hier finden?

  • Eine Liste von Form-Richtlinien, gegründete auf die gegenwärtige und andauernde Forschung in die Zugänglichkeit, Brauchbarkeit und Webstandards.
  • Einfache Beispiele von zugänglichen Formen einschließlich: eine Anmeldungsform, eine Suchform und eine Kontakt-Form.
  • Beispiele und Hilfe auf jedem Form-Element.
  • Styling-Formen mit CSS.
  • Das Verwenden zugänglichen inline-JavaScript der Form-Funktionalität zu helfen.
  • Das Verwenden zugänglichen JavaScript mit dem DOM der Form-Funktionalität zu helfen.
  • Eine umfassende Liste der Außenform berichteten Artikel und Mittel.

Diese Seite ist eine dauernde Arbeit im Gange. Irgendwelche Anmerkungen, Abfragen oder Korrekturen schicken Sie mir bitte per E-Mail: mike.foskett@webSemantics.co.uk und gestellte “zugängliche Formen” in der Betreffzeile, so weiß ich, dass Sie nicht versuchen, meine Bit zu vergrößern.

Die Argumentation für eine besondere Form-Richtlinie wird unten vereinfacht zu:

Abkürzungszeichen Bedeutung
U Verwendbarkeit
A Zugänglichkeit
S Semantik
L Legal ( UK Gesetz)

Die Kraft jeder Form-Richtlinie wird durch die Begriffe angezeigt:

muss / muss nicht

Eine absolute Voraussetzung.

sollte / sollte nicht

Eine wünschenswerte Voraussetzung, wo es gültige Gründe geben kann, nicht es als absolut zu betrachten, jedoch die vollen Implikationen sollten verstanden werden und der Fall sorgfältig gewogen, bevor er ignoriert wird.

kann / kann nicht

Eine wünschenswerte Voraussetzung, wenn innerhalb der Zeit oder preisgünstigen Einschränkungen möglich ist.

1.0 Zugängliche verwendbare Form-Richtlinien:

Die Zugänglichen Form-Richtlinien wurden ursprünglich für Becta spezifisch für die 2005 BETT-Preise entwickelt.

  1. Das fieldset Anhängsel sollte ganze Abteilungen einer komplizierten Form [A U] umfassen, und kann den ganzen eine einfache Form umfassen.
  2. Eingangsfelder verlangen implizite Beschreibungen wo immer möglich ist [A]. Textbeschreibung muss direkt dem Eingang vorangehen (außer dem Radio und den checkbox Typen), und das Etikett sollte sowohl Beschreibung umgeben als auch Feld eingeben, obwohl sie auf verschiedenen Linien erscheinen können. Input Typ-Text Beispiel. Aktualisiert am 3. September 2005
  3. Eingangsfelder verlangen ausführliche Beschreibungen [A]. Das “Für” Attribut  im Etikett-Element muss zum Eingang id vereinigt werden. Beispiel gab Typ-Text ein
  4. Texttyp-Felder können einen Verzug-Wert haben [A]. Diese Richtlinie wurde am 2.11.05 geändert, davon “sollte” an die Empfehlung durch den RNIB. Input Typ-Text Beispiel.
  5. Texttyp-Felder sollten den Text auf den Fokus [U] auswählen lassen.JavaScript Methoden
  6. Eingangsfeldbreite (Größe oder Gebirgspässe) sollte wichtig für den erwarteten Benutzereingangs[U] behalten werden. Input Typ-Text Beispiel.
  7. Erforderliche Felder
      • Erforderliche Felder müssen nicht durch die Farbe allein angezeigt werden [A]
      • Der Begriff “erforderlicher” sollte in der Textbeschreibung [U] festgesetzt werden
      • Wenn ein Zeichen solcher als * verwendet wird, dann muss seine Bedeutung vor dem ersten Ereignis [A U] bekannt gegeben werden

    Beispiele der erforderlichen Feldern

  8. Textbeschreibungen müssen Radio und Checkbox-Eingängen folgen [A]. Beispiel von Radioelementen
  9. Radioknöpfe müssen ausgewählten Wert eines Verzugs [U] haben. Beispiel von Radioelementen
  10. Radioknöpfe sollten nicht für boolean (ja / nicht) Optionen verwendet werden. Wenn möglich ist, ein checkbox zu verwenden [U]. Beispiel von checkbox Elementen
  11. Gewählt mit weniger als 5 Optionen aus, sollte als Radioknöpfe [U] codiert werden. Beispiel von checkbox Elementen. Beispiel der Komplex-Auswahl Elemente
  12. Komplex-Auswahl mit mehr als 11 Optionen, sollte mit Auswahl-Gruppen und Etiketten codiert werden.Beispiel der Komplex-Auswahl Elemente
  13. Grafische Knöpfe müssen bedeutungsvolle alt Texte haben [U A].
  14. Es sollte nicht normalerweise notwendig sein, tabindex zu verwenden. Vermeiden Sie den Gebrauch, wenn das möglich ist. Verwenden Sie diese nur, wenn die logische Ordnung der Form diktiert.
  15. Formen enthalten Daten und, wenn tabellarisch ist, könnenin Datentischen gehalten werden. Datentische können komplizierte Gegenstände sein. Sichern Sie bitte als ein Minimum:Beispiel von erforderlichen Feldern
    1. Eine Tabellenzusammenfassung wird festgesetzt. Das Umreißen des Tischzwecks befriedigt [A].
    2. Verwenden Sie eine Überschrift, um den Zweck des Tabelleninhalts [S] festzusetzen.
    3. Definieren Sie Säule und Reihe-Kopfbälle zusammen mit ihrem Zuständigkeitsbereich[A]
    4. Definieren Sie wo erforderlich ist, colgroups und ihr Zuständigkeitsbereich
    5. Verwenden Sie  <thead> und <tbody> den Inhalt von Kopfbällen zu trennen,wo anwendbar ist [A].
    6. Betrachten Sie Tischlinearisierung sorgfältig vor dem Trennen eines Etiketts von seinem verbundenen Eingang.

    Bemerken Sie die gewöhnliche Konstruktionen der Form, der Legende, fieldset und des Etiketts sind genügen eine Form auszuarbeiten. Verwenden Sie einen Tisch nur wenn der Dateneingang von Natur aus tabellarisch ist.

  16. Etiketten können vor der Display verborgen werden, durch das Verwenden display:none. Das hat die Wirkung das Etikett auf dem Schirm nicht wiederzugeben, aber, weil es in einer Form gibt, werden Schirm-Leser noch das Etikett laut lesen. Bemerken Sie, dass diese Technik nur für Form-Elemente gilt, und dieses Etikett sollte sichtbar sein, wo auch immer möglich ist.
  17. Bemerken Sie, dass HTML und XHTML v1 sowohl den Namen als auch Id-Attribute auf einem Form-Element erlauben. XHTML v1.1 erlaubt nur id [S].

Spitze der Seite

2.0 Zugängliche Form-Beispiele

2.1 Einfache Suche:

Suchformen sollten einen accesskey = “4” haben, vereinigt zum ersten Etikett. Außer, wenn es definiert wird, auf eine Suchseite zuzugreifen.

Bemerken Sie: Im Codieren ist accesskey=4 entfernt worden, um irgendwelche Konflikte mit dieser Seitensuchform zu verhindern.

Bemerken Sie: Der Texteingang hat wirklich ein Etikett. Es wird über CSS verborgen.

Klicken Sie um einfache Suche XHTML Beispiel zu erweitern und zumachen:

 <form id="simplesearch" method="get" action="#"> <fieldset> <label accesskey="4" for="searchterm"> Search site </label> <input id="searchterm" type="text" maxlength="255" value="Enter search term" /> <input id="searchbutton" type="submit" value="Search site" /> </fieldset> </form> <!-- id="simplesearch" -->

Klicken Sie um einfache Suche CSS Beispiel zu erweitern und zumachen:

#simplesearch {text-align:center;background:#fff; padding:0; margin:0} #simplesearch fieldset {margin:1em; padding:0; border:0 solid} #simplesearch fieldset label {display:none} #simplesearch input#searchterm {font-size:100%; font-weight:bold; border:2px inset #ccc; padding-left:3px; width:160px} #simplesearch input#searchbutton {font-size:100%; font-weight:bold; border:2px outset #ccc; margin-left:1em}

Spitze der Seite

2.2 Einfache Anmeldung:

Bemerken Sie: Beide die Texteingänge haben ein Etikett, obwohl sie über CSS verborgen werden.

Es ist ratsam, einen accesskey zum Etikett des Benutzernamens zu vereinigen. Es gibt keinen Standard, so scheint L so gut wie irgendwelcher. Brauchbarkeit schlagt vor, Eingangsfelder anzuzeigen, die passend für den Eingang nach Größen geordnet werden. So vermeiden Sie, 300px breites Feld für ein acht Ziffer-Kennwort zu haben.

Klicken Sie um einfache Suche XHTML Beispiel zu erweitern und zumachen:

 <form id="simplelogin" method="get" action="#"> <fieldset> <label accesskey="L" for="loginname">Login</label> <input id="loginname" type="text" maxlength="255" value="Enter login name" /> <label for="loginpassword">Password</label> <input id="loginpassword" type="password" maxlength="8" value="********" /> <input id="loginbutton" type="submit" value="Login" /> </fieldset> </form> <!-- id="simplelogin" -->

Klicken Sie um einfache Suche CSS Beispiel zu erweitern und zumachen:

 #simplelogin {text-align:center; background:#fff; padding:0; margin:0; border:0} #simplelogin fieldset {padding:0; margin:1em; border:0px solid} #simplelogin fieldset label {display:none} #simplelogin input#loginname {font-size:100%; font-weight:bold; border:2px inset #ccc; padding-left:3px; width:160px} #simplelogin input#loginpassword {font-size:100%; font-weight:bold; border:2px inset #ccc; padding-left:3px; width:70px} #simplelogin input#loginbutton {font-size:100%; font-weight:bold; border:2px outset #ccc; margin-left:1em}

Spitze der Seite

2.3 Einfache Kontakt-Form:

Ein wesentliches Beispiel dieser Form ist jetzt für das Download verfügbar, das mit CSS und JavaScript Techniken abgeschlossen ist. Einfach-zugänglicher Kontakt Beispiel-Form [.zip, 4 Kilobyte] hinzugefügt am 6. Dezember 2k5. Eine oder zwei geringe Verbesserungen werden eingeschlossen.

Versuchen Sie durch diese Form zu tabellieren. Bemerken Sie, dass die erforderlichen Felder die Nachricht ändern, wenn Sie in einen Wert nicht eingehen.

Bemerken Sie die Hilfslinks. Das Klicken auf eine erweitert in einer zugänglichen Weise-Verschiebungsfokus zum Hilfsansetzungsform.

Bemerken Sie bitte die Show & Hide Hilfstechniken haben hier demonstriert, dass sie durch eine neue Quelle ersetzten worden: Zugängliche JavaScript bilden Hilfe, eine Show & Hide Technik hinzugefügt am 15. Juni 2k6

Kontaktform



[help]


[help]


Rundschreiben

Accesskey beigeordnet zum ersten Etikett, der Standard dafür würde “9” unter der britischen Regierung eGIF “Standard” sein. (Die aktualisiert Adresse am 9. August 2k6)

Bemerken Sie: Es ist jetzt eine britische Notwendigkeit für Benutzer dem aktiven Staat, dass ihre Details verwendet werden können. Sogar für solche Dinge wie Rundschreiben. Das bedeutet, im Fall von “unterschreiben das Rundschreiben” checkbox oben, dass der checkbox nicht kann, sollte nicht als Verzug überprüft werden.
Spitze der Seite

3.0 Allgemeine Form-Elemente

3.1 Texttyp-Inputs

Ein Beispiel von Eingängen des Typ-Textes

  1. Eingangsfelder verlangen implizite Beschreibungen[A]. Text, bevor eingeben (umgekehrt am Radio oder den checkbox Typen) mit einem Etikett:
     <label>Description: <input type="text" id="description" /> </label>
  2. Eingangsfelder verlangen auch ausführliche Beschreibungen [A]. Verwenden Sie das “für” Attribut im Etikett-Anhängsel. Wo auch immer möglicher ist, verwenden diese Methode:
    <label for="description">Description: <input type="text" id="description" /> </label>

    Wo notwendig ist, das “für”  Attribut erlaubt auch die Trennung des Etikett-Textes vom Eingang:

     <label for="description"> Description: </label> ... <input type="text" id="description" />
  3. Textfelder können einen Verzug-Wert haben[A].
      • Neue Studien zeigen an, dass Benutzer vorgefüllte Felder auslassen können.
      • Das ist nicht mehr eine Zugriffstechnologievoraussetzung.
    <label for="description">Description: <input type="text" id="description" value="Enter description" /> </label>
  4. Versuchen Sie, eingegebene Feldgrößen wichtig für den erwarteten Benutzereingangs[U] zu halten.
     <label for="description">Description: <input type="text" id="description" value="Enter description" style="width:100px" /> </label>

    Inputselemente ohne sichtbare Etiketten sollten fortsetzen, Text (Suche, Anmeldung) zu enthalten, aber sicherzustellen, dass der Verzug-Text entweder entfernt oder auf den Fokus ausgewählt wird.Siehe 4.0 Zugängliche JavaScript für Methoden

  5. Das Auswählen des Textes auf den Fokus wird auch empfohlen [U] sieh die JavaScript Abteilung für Methoden und Beispiele.

3.2 Radio Inputs

Ein Beispiel von einer Reihe von Radioinputs

Farbe

Bitte wählen Sie eine Farbe aus:





Verbundene Richtlinien:

  1. Radioeingänge sollten eine Auswahl als Verzug [U] überprüfen lassen
  2. Radioeingänge müssen ein Etikett haben. Es macht fähig den Auswahl Text-Klick, so das Präsentieren eines größeren Gebietes diejenigen mit wackeligen Händen zu helfen[S A]
  3. es kann vernünftig sein, um ein Titelelement hinzuzufügen, das den beschreibenden Text kopiert
  4. Radioeingang muss vorangehen seines beschreibenden Textes [S A]
  5. horizontale Radioeingangslisten sollten nicht [U] verwendet werden
  6. horizontale Radioeingangslisten müssen genug Umgebungsraum haben, um klar zwischen Wahlen [U] zu unterscheiden
  7. Radioeingänge für einfachen boolean (ja / nicht) Antworten sollten nicht verwendet werden. Verwenden Sie einen checkbox [S]
  8. Radioeingänge sollten ausgesuchte Eingänge  ersetzen, wo auch immer möglich ist. Fünf oder weniger Optionen sollten immer codiert werden, weil Radio [U A] eingibt
  9. ein fieldset muss verwendet werden, um verwandte Eingänge [U S] zu gruppieren

Erweitern / zumachen das Radioknopf-Beispiel XHTML Schnipsel:

<label for="rad_0"> <input type="radio" name="rad" id="rad_0" title="Red" checked="checked" /> Red </label> <label for="rad_1"> <input type="radio" name="rad" id="rad_1" title="Blue" /> Blue </label>

Erweitern / zumachen den relevanten CSS für das Radioknopf-Beispiel:

label {display:block} input.radio {margin-right:1em} input.radio:focus {border:2px solid red}

Spitze der Seite

3.3 Checkboxes

Ein Beispiel von Checkbox-Inputs:

Weitere Information

  1. Das Verwenden eines Etiketts macht den checkbox beschreibenden Text Klick-fähig, präsentieren einen größeren Gebiet diejenigen mit Motorneuron-Mängeln zu beraten [S]
  2. verwenden Sie ein Titelelement den beschreibenden Text nachzumachen
  3. stellen Sie sicher, dass der Checkbox-Eingang dem beschreibenden Text [A S] vorangeht
  4. verwenden Sie einen checkbox für einfachen boolean (ja / nicht) antwortet nicht den Radioeingänge [S]
  5. verwenden Sie einen fieldset, um verwandte Eingänge [S U] zu gruppieren
  6. überprüfen Sie nicht einen checkbox durch Voreinstellung, wenn es Implikationen außer den Formen-Hauptzweck [L] hat

Erweitern / zumachen das checkbox Beispiel:

<label for="chk_0"> <input type="checkbox" name="chk_0" id="chk_0" title="Request information" /> Request further information </label> <label for="chk_1"> <input type="checkbox" name="chk_1" id="chk_1" title="Aged over 42" checked="checked" /> I am aged over forty-two </label>

Spitze der Seite

3.4 Einfach-ausgewählter Box

Ein Beispiel eines einfachen ausgewählten Eingangs:

  1. Weniger als 5 Optionen sollten als Radioknöpfe [U A] codiert werden
  2. versuchen Sie Optionen auf 11 zu beschränken, das alle Optionen ohne Schriftrolle-Bars in Internet Explorer [U] zeigen wird
  3. verwenden Sie nicht ausgewählte Eingänge für die Navigation ohne einen “Go” Knopf.[A]

Erweitern / zumachen das einfache ausgesuchte Beispiel:

<label for="favcity">Which is your favourite colour? <select id="favcity" name="favcity"> <option value="1">Sky Blue</option> <option value="3">Postbox Red</option> <option value="4">Mauve</option> <option value="5">Purple</option> <option value="2">Racing Green</option> <option value="6">Sunshine Yellow</option> <option value="7">Orange</option> <option value="8">Magenta</option> <option value="9">Off White</option> <option value="10">White</option> <option value="11">Black</option> </select> </label>

Spitze der Seite

3.5 Lang-ausgewählter Box

Ein Beispiel eines langen ausgewählten Eingangs:

 

Wenn es mehr als 11 Optionsversuch gibt, versuchen sie in Gruppen zu spalten und sie entsprechend mit optgroups zu etikettieren.

Erweitern / zumachen das lange ausgesuchte Beispiel:

<label for="favcity2">Which is your favourite city? <select id="favcity2" name="favcity2"> <optgroup label="Europe"> <option value="1">Amsterdam</option> <option value="3">Interlaken</option> <option value="4">Moscow</option> <option value="5">Dresden</option> </optgroup> <optgroup label="North America"> <option value="2">New York</option> <option value="6">Salt Lake City</option> <option value="7">Montreal</option> </optgroup> <optgroup label="South America"> <option value="8">Buenos Aires</option> <option value="9">Asuncion</option> </optgroup> <optgroup label="Asia"> <option value="10">Hong Kong</option> <option value="11">Tokyo</option> <option value="12">New Dehli</option> </optgroup> </select> </label>

Spitze der Seite

3.6 Datei-Upload Box und Knopf

Ein Beispiel einer Datei – lädt Eingang und Knopf:

Bemerken Sie bitte, Datei-Upload Eingänge werden völlig verschieden in der Safari auf einem Mac wiedergegeben.

Erinnern Sie sich wenn man Dateien ladet hinauf:

  • Erlauben Sie nicht Leerfelder im Dateinamen. Einige Browser lösen nicht Leerfelder gut auf. Verwenden Sie ein Unterstreichen oder einen Bindestrich stattdessen.
  • Verwenden Sie nur Kleinbuchstaben. Apache-Server sind Groß-/Kleinschreibung, aber sind nicht NT Server. Einfach Kleinbuchstaben verwendend, verhindert das jedes Mal ein Problem zu werden.
  • Verwenden Sie Server-Seite Scripting, um Kleinbuchstaben zu sichern, und keinen Leerfelder im Dateinamen.

Erweitern / zumachen die Datei uploades Beispiel:

<label for="upload">Upload file: <input type="file" id="upload" name="uploaded_file" /></label>

Spitze der Seite

3.7 Erforderliche Felder

Ein Beispiel von erforderlichen Feldern:

Gekennzeichnetes Felder * sind für die Vorlage erforderlich

:

Anmerkung: Aktualisiert am 15. Juli 2k6: Nur das Sternchen hat jetzt einen Titel von “Required” statt des ganzen Etiketts. Das soll dem Etikett erlauben, als eine Verbindung zu handeln, um weitere Auskunft zu geben.

  1. Farbe wird als ein Sehhinweis [U] verwendet
  2. Cursor ändert sich zur Hilfe, wenn sich über das Etikett geschwebt hat[U]
  3. darauf schwanken die Sternchen-Titelstaaten “Erforderlich” und Cursor ändern sich zur Hilfe [U A]
  4. erforderlich wird auch im Eingangswert [U A] festgesetzt
  5. eine Erklärung, die * ein erforderliches Feld anzeigt, muss der Form / Element vorausgehen, nie danach [U A]
  6. Das Sternchen muss innerhalb des Etiketts sein

Erweitern / zumachen das erforderliche Feldbeispiel:

 <p>Fields marked <strong title="Required">*</strong> are required for submission</p> <label for="namereq""> Name <strong title="Required">*</strong> </label> : <input type="text" id="namereq" name="namereq" value="" />

Spitze der Seite

4.0 Zugänglicher JavaScript in Formen

4.1 Inline-JavaScript Beispiele

O.k. sind Sie nicht so banal wie ich und Sie wollen gerade einfache JavaScript Reiheneffekten

Onfocus wählen Eingangstext (Aktualisiert am 7. November 2k6) aus:

<input id="name" type="text" value="default value" onfocus="if (this.value==this.defaultValue) this.value=''; else this.select()" onblur="if (!this.value) this.value=this.defaultValue" />

Und für einen textarea:

 <textarea rows="5" cols="40" onfocus="this.select()"> Enter comment </textarea>

Wenn Sie möchten eine onfocus Wirkung hinzufügen, los ändern eine schwarze Grenze für eine rote:

 <input id="name" type="text" value="Enter name" onfocus="this.select(); this.style.border='2px solid red'" onblur="if (this.value==''){ this.value='ENTER YOUR NAME!!!' }; this.style.border='2px inset white'" />

4.2 DOM JavaScript

Alles JavaScript auf dieser Seite verwendet wurde,  wird über den DOM hinzugefügt. Infolgedessen erscheint keinen selbst im XHTML. Tricks wie:

  1. auf dem Fokus hi-leicht die Grenze (auch festgesetzt in CSS)
  2. wählen Sie den Text aus
  3. erforderliche Felderinnerungen

Entschuldigung. Zurzeit werden Sie irgendetwas Nützliches von der JavaScript Datei forms.js abziehen, und auf die CSS Datei forms.css auch einen Blick werfen müssen.

Es wird alles grundsätzlich irgendwie kommentiert.

Ich bemerke, dass sie jetzt einen Namen für diesen Typ von JavaScript haben: Unauffälliger JavaScript.

Neue Quelle: Ein zugänglicher JavaScript  Form-Hilfe, eine Show & Hide Technik wird am 15. Juni 2k6 hinzugefügt.

Haben Sie Spaß.
Spitze der Seite