Checkboxes

  • The <fieldset> surrounds the entire grouping of checkboxes or radio buttons. The <legend> provides a description for the grouping.
  • Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with the group of checkboxes.
  • WAI-ARIA provides a grouping role that functions similarly to fieldset and legend. In option #2 the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group. Note: This method is not supported by all browser/AT devices.

The <span class="visuallyhidden"> content in the second example is not necessary information to choose an option. It is important to point out that in some cases, it is very useful to add additional information. However, in this case, it is meant as a joke for people using screen-readers. And why not have a joke visible only to people using screen-readers? How many times do we hide content from them?

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)

1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)

3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Option #1: Use fieldsets to group options

Who is your favorite 19th century scientist

Option #2: Use ARIA to group options

Who is the best Beatle?

Radio Buttons

  • The <fieldset> surrounds the entire grouping of checkboxes or radio buttons. The <legend> provides a description for the grouping.
  • Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with the group of radio buttons.
  • WAI-ARIA provides a grouping role that functions similarly to fieldset and legend. In option #2 the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group.

The <span class="visuallyhidden"> content in the second example is not necessary information to choose an option. It is important to point out that in some cases, it is very useful to add additional information. However, in this case, it is meant as a joke for people using screen-readers. And why not have a joke visible only to people using screen-readers? How many times do we hide content from them?

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)

1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)

3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Option #1: Use fieldsets to group options

What is the best time of day?

Option #2: Use ARIA to group options

Who is the best member of Led Zeppelin?

Select Lists

  • The <fieldset> surrounds the entire grouping of checkboxes or radio buttons. The <legend> provides a description for the grouping.
  • Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with the group of radio buttons.
  • For select elements with groups of options, the optgroup element can be used to indicate such groups. The label attribute of the optgroup element is used to provide a label for the group. This is especially useful for lists with many related options.

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)

1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)

3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Option #1: Select with no grouping

Option #2: Select with grouping

Text Inputs & Textarea

  • Keep it simple - screen readers do not support multiple labels that are linked to the same form element.
  • Use labels for every input and make the for="" and id="" values match. IDs must be unique on each page, only one label can be associated to each unique form element.
  • Make required fields obvious by using an indicator - border color change, asterisk, description text, etc.
  • Fields with error validation should have aria-describedby to insure that the associated field level error message is read by assistive technology. If the error message has an id="my-error-message", then the input should have aria-describedby="my-error-message".

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)

1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)

3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

This field is required.

Toggles

  • When you can, use a <button> element and include aria-pressed or role="switch" for your toggles.
  • You can add optional labels to your toggles, just make sure the label element includes an id and the toggle button includes an aria-labelledby tag that match.
  • Make sure you include aria-checked on toggles, with JavaScript changing the state on click from true to false (or the reverse).
  • Make sure you check the contrast of the toggle text against the background (if text is used).

Resources

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)

Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Optional Label