24ways – the advent calendar for web geeks – is back! First post is “Making a Better Custom Select Element” in which Julie Grundy tries to create an accessible Custom Select Element:
Sometimes, I can’t recommend the
selectinput. We want a way for someone to choose an item from a list of options, but it’s more complicated than just that. We want autocomplete options. We want to put images in there, not just text. The
optgroupelement is ugly, hard to style, and not announced by screen readers. The focus styles are low contrast. I had high hopes for the
datalistelement, but although it works well with screen readers, it’s no good for people with low vision who zoom or use high contrast themes.
Here’s a pen with the result: