Accessibility of disabled placeholders in dropdown

Question

Are there any accessibility implications for disabling a placeholder option in a required dropdown field?

<select required>
    <option value='' disabled>Select an option...</option>
    <option>Foo</option>
    <option>Bar</option>
    <option>Baz</option>
</select>

Or is it better to leave it as:

<select required>
    <option value=''>Select an option...</option>
    <option>Foo</option>
    <option>Bar</option>
    <option>Baz</option>
</select>

And let the user agent fail upon constraint validation when the user attempts to submit the form without selecting an option?

Also please feel free to migrate it to StackOverflow if it's more appropriate there.

Answer 1

Important Note:

This was tested using Google Chrome as a browser and NVDA as a screen reader, results may (and likely will) vary between products

When a visually disabled user accesses a dropdown menu they are going to do so using the keyboard. More specifically they are going to tab to the select menu, then open it using the enter key.

Now there are two different approaches to placeholders in select menus so I'll discuss both.

Non-selected placeholder

If you use the exact code you provided the first non-placeholder option is selected by default. When the dropdown recieves focus a screen reader will say "Combobox required Foo", where Foo is the first option. At the moment the dropdown is opened the first non-placeholder option is given focus. In a sense the browser acts as if the placeholder text isn't even there. In fact, screen readers skip over the placeholder as well. This means if you are using this placeholder as the label or instructions for your dropdown then visually disabled users will not understand.

See this jsFiddle (first example): https://jsfiddle.net/70mdh9Lp/

Selected placeholder

Now I assume since you put a placeholder in the dropdown in the first place you would like that to be the default selection so that users will see it. To do so you have to also add "selected" to the placeholder option. If you do this a few things change. Now when the user tabs over to the dropdown the screenreader will dictate "Combobox invalid entry required Select an option", note "invalid entry" is read because it is a disabled option. Then, when the user uses the keyboard to open the menu it reads the first option as "Select an option, unavailable". So this means the visually disabled user will be given the same information as a visually capable user, it will tell them the placeholder option is there and will inform them that the option is unavailable. However, whether or not a visually impaired user will understand the somewhat vague terms "invalid entry" and "unavilable" is not known to me and may require testing.

See this jsFiddle (second example): https://jsfiddle.net/70mdh9Lp/

Answer 2

A better option (for your example) would be to use an optgroup.

<select>
  <optgroup label="Select an option">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </optgroup>
</select>

(https://jsfiddle.net/5veqwypt/)