Va11yS
Form Controls
-
Checkboxes and Radio Groups
- WCAG ARIA9 - Example 3: A conference workshop booking table (e.g. textboxes in a table)
- WCAG ARIA17 - Example 2: Using grouping roles to identify related form controls (e.g. radio group)
- WCAG General - G13 Example 1: Describing what will happen before a change to a form control that causes a change of context to occur is made (e.g. radio group)
- WCAG HTML - H44 Example 2: H44 Example 2: Using label elements to associate text labels with form controls (e.g. checkbox)
- WCAG HTML - H71 Example 1: Providing a description for groups of form controls using fieldset and legend element (e.g. radio group)
- WCAG HTML - H71 Example 2: H71 Example 2: Providing a description for groups of form controls using fieldset and legend elements (e.g. checkboxes)
- WCAG HTML - H71 Example 3: Radio buttons submitting to the same named field
- WCAG HTML - H91 Example 4: Using HTML form controls and links (e.g. checkbox)
- WCAG HTML - H91 Example 5: Using HTML form controls and links (e.g. radio group)
- WCAG HTML - H91 Example 8: Using HTML form controls and links (e.g. radio fieldset)
-
Dropdowns and Listboxes
- WCAG ARIA16 - Example 3: Using aria-labelledby to provide a name for user interface controls (e.g. dropdown)
- WCAG HTML - H65 Example 1: Using the title attribute to identify form controls when the label element cannot be used
- WCAG HTML - H84 Example 1: Using a button with a select element to perform an action (e.g. calendar)
- WCAG HTML - H84 Example 2: Using a button with a select element to perform an action (e.g. choose an action)
- WCAG HTML - H85 Example 1: Using optgroup to group option elements inside a select
- WCAG HTML - H85 Example 2: Demonstrating how a multi-select box can make use of the optrgroup element
- WCAG HTML - H91 Example 6a: select element list box demonstrating use of selected attribute and the label element to name the list box
- WCAG HTML - H91 Example 6b: Using title attribute to name a select element rather than a visible label
-
Input Fields
- WCAG ARIA1 - Example 2: Using the aria-describedby property to provide a descriptive label for user interface controls
- WCAG ARIA1 - Example 4 (Tooltip): Using the aria-describedby property to provide a descriptive label for user interface controls
- WCAG ARIA9 - Example 1: A time-out input field with concatenated label
- WCAG ARIA9 - Example 2: A simple data table with text inputs
- WCAG ARIA14 - Example 2: A phone number with multiple fields
- WCAG ARIA16 - Example 1: Using aria-labelledby to provide a name for user interface controls (e.g. text field)
- WCAG ARIA17 - Example 1: Using grouping roles to identify related form controls (e.g. text input)
- WCAG General - G70 Example 1: Search an on-line dictionary of computer terms
- WCAG General - G71 Example 1: A label element that includes a help link
- WCAG HTML - H32 Example 1: Basic example of a text input form field with a submit button
- WCAG HTML - H44 Example 1: Using label elements to associate text labels with form controls
- WCAG HTML - H65 Example 2: Using the title attribute to identify form controls when the label element cannot be used (e.g. phone number)
- WCAG HTML - H65 Example 3: Using the title attribute to identify form controls when the label element cannot be used (e.g. search)
- WCAG HTML - H71 Example 4: Providing a description for groups of form controls using fieldset and legend elements
- WCAG HTML - H91 Example 3a: Using the value attribute for the input field name
- WCAG HTML - H91 Example 3b: Using the title attribute for the input field name
- WCAG HTML - H91 Example 7a: textarea element demonstrating use of the label element to name the text box
- WCAG HTML - H91 Example 7b: Using title attribute to name a textarea element
-
Required Fields
- WCAG ARIA2 - Example 1: The required property is indicated by an asterisk placed next to the label element
- WCAG ARIA2 - Example 2: The required property is indicated by the word "required" placed next to the label element
- WCAG ARIA2 - Example 3: Required fields are indicated by a red border and a star icon rendered via CSS using content:before
- WCAG ARIA2 - Example 4: A required text input field in XHTML
- WCAG ARIA2 - Example 5: Adding aria-required property via script
- WCAG ARIA21 - Example 1: Using Aria-Invalid to Indicate An Error Field (e.g. required)
- WCAG ARIA21 - Example 2: Using Aria-Invalid to Indicate An Error Field (e.g. data)
- WCAG HTML - H90 Example 1: Using text to indicate required state
- WCAG HTML - H90 Example 2: Using an asterisk to indicate required state
- WCAG HTML - H90 Example 3: Using an image to indicate required state
- WCAG HTML - H90 Example 4: Indicating required state for groups of radio buttons or check box controls
-
Other Form Controls
- WCAG ARIA16 Example 2: Using aria-labelledby to provide a name for user interface controls (e.g. slider)
- WCAG ARIA19 - Example 1: Using ARIA role=alert or Live Regions to Identify Errors (e.g. alert dialog for a text input field)
- WCAG General - G85 Example 1: When a user inputs invalid data on a form field an alert dialog appears upon exiting the field or submitting the form
- Form Controls Used in Various Frameworks