Accessibility

Accessible select box requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG guidelines

1.3.5 Identify Input Purpose

"Identify Input Purpose," is a Level AA criterion that aims to make web content more accessible for people with disabilities by enabling user agents and assistive technologies to understand the purpose of input fields, like select boxes, collecting user information.

To comply with this guideline, you need to ensure that:

1. The input field serves a purpose listed in the "Input Purposes for User Interface Components" section of the WCAG 2.1 specification.
2. The content is created using web technologies that support identifying the expected meaning of the input field.

Some browsers attempt to aid the user by automatically filling form controls rather than having the user re-enter their information each time. For example, a field asking for the user's telephone number can be automatically filled with the user's phone number.

To help the user agent with this, the autocomplete attribute can be used to describe the field's purpose.

2.1 Keyboard accessible

Support keyboard input to navigate within a dropdown. Dropdowns (both menus and boxes) should support not only mouse input, but keys as well. In dropdown menus, access keys should enable users to quickly select a visible option without using the mouse. In a dropdown box, users should be able to type a letter and quickly navigate to options starting with that letter.

3.3.2 Labels or Instructions:

Add a descriptive label

Use the <label> element to associate a clear and descriptive label with the <select> element. Make sure to use the for attribute on the label to link it to the id attribute of the select box. This provides context for screen reader users and makes the form control accessible.

Other best practice

Include a default option

Add a default option, such as "Select an option" or "Choose one," with an empty value attribute to guide users and encourage them to make a selection.

Group related options

Use the <optgroup> element to group related options within a select box. This helps users navigate through the list of options and improves the overall organization of your form.