In this 33 second video, I demonstrate the differences between a native UI element vs. a custom UI widget. In the video, I access a SELECT element containing country options. At the 16 second mark, I switch to a customized UI widget which allows the user to select from the same country options. While I am able to open the control and traverse through it with the keyboard, none of the choices are read out as I arrow up and down through them. This is a common issue with custom UI widgets. Because the underlying structure is does not expose the appropriate Name, State, Role, and Value assistive technologies simply treat these items like they normally would. The best approach is just to use the darn SELECT element. Beyond that, you can use WAI-ARIA to bridge the gaps, since SELECT elements can’t be styled as easily as other form controls.
Note: The YouTube controls above are, regrettably, not accessible. If someone knows of an accessible video player plugin for WordPress, please let me know, because I have a lot more videos to share. Thanks!