Sanna Kramsi - I would if I could a guide to web accessibility

4.1.2 Name, Role, Value

Also combined this example with the optgroup element, which is covered by criterion 1.3.1. Check this page, for example, with HTML_CodeSniffer to see the warnings and errors for the select elements.

Compare the select elements with a screen reader. Having a label makes a big difference.

Problematic example

Better example

Final comments

The 4.1.2 error "This select element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined." is easily fixed by using a visible label. If no visible label can be added, use any of the listed attributes.

The 4.1.2 warning "This select element does not have a value available to an accessibility API." can be fixed by setting one of the options as selected by default.

The 1.3.1 warning "If this selection list contains groups of related options, they should be grouped with optgroup.". If you have related options, use the optgroup.