Select

General

• Ensure sufficient colour contrast for all text elements
• All select components must have associated labels
• Helper text should guide without being essential to understanding the field
• Error messages must be clear and actionable
• Keep labels and options concise and descriptive

Web

Semantic markup

• Use the native <select> element with <option> elements for each choice
• Use <label> associated with the select via the for attribute
• Use <optgroup> to group related options when needed
• Do not use custom-styled dropdowns that require JavaScript unless necessary

Accessible labelling

All select components must be properly labelled and associated:

• Label: Use <label for="select-id"> to associate the label with the select
• Helper text: Use aria-describedby="helper-id" to associate helper text with the select
• Error messages: Use aria-describedby="error-id" to associate error messages with the select
• Multiple associations: Stack IDs in aria-describedby for both helper text and errors: aria-describedby="helper-id error-id"

Option Grouping

Use <optgroup> to group related options with a label

                                                        
                                                        
                                                            <select id="location" name="location">
                                                          <option value="">Please select</option>
                                                          <optgroup label="England">
                                                            <option value="london">London</option>
                                                            <option value="manchester">Manchester</option>
                                                          </optgroup>
                                                          <optgroup label="Scotland">
                                                            <option value="edinburgh">Edinburgh</option>
                                                            <option value="glasgow">Glasgow</option>
                                                          </optgroup>
                                                        </select>
                                                        
                                                            

• Use aria-invalid="true" when the selection contains an error
• Use role="alert" on error messages to announce them to screen readers
• Update aria-describedby to include the error message ID
• Provide clear, actionable error messages that explain how to fix the issue

Required fields

• Use the required attribute for required select fields
• Use aria-required="true" for enhanced screen reader support
• Ensure the default "Please select" option has an empty value so validation works correctly

React Native

• Use the Picker component (or platform-appropriate select component)
• Provide accessibilityLabel that describes the field purpose
• Use accessibilityHint for additional context if needed
• Ensure the component is properly labelled and keyboard accessible
• Native pickers on iOS and Android provide built-in accessibility support