Search code examples
htmlmenuaccessibilityhtml-select

HTML 'select' element keyboard navigation


It may be that the answer to this question is obvious. I understand that you can typically select an option from an HTML 'select' element (drop-down menu) by typing its first letter, and that in some cases you may also be able to type more of the name to select more precisely.

I'm seeing other behavior though that doesn't make immediate sense. For example, in the example at the top of the page here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

'B' selects 'Cat', and 'Z' selects 'Spider', even though neither entry starts with either letter, or contains them, and in fact neither letter appears anywhere in any of the options. I've noticed other odd behavior as well where keyboard navigation has behaved inconsistently or not as expected. I'm getting the same results in Chrome, Safari, and Brave.

What am I missing? Is there documentation somewhere that explains this behavior?


Solution

  • This behaviour can differ and isn't fully consistent.

    The <select> element's response to keyboard input isn't strictly defined beyond the basic standard of matching the first character. For example, "B" or "Z" might be interpreted as input that corresponds to a position in the list rather than a character match.