0

For a sport site showing results on various events, I have three “dropdown” menus were I can do various selection. Even though the UI is a dropdown, letting a user select from various options (the first drop down for events, the second dropdown for the sport, and the last drop down for another selection.), which for me would be a <select>/<option> choice (or <datalist>), the current code is written with <button><a>.

The reason for this is because when selecting different choices (filtering), the Heading as well as the URL is changing corresponding to its selection. Is this a normal approach? It confuses me a bit.

I would have said that since the table with the result is mainly changing I would update the table component depending on the selection in the dropdown?! Or is using links as list items a valid approach? Unfortunately I cannot share pics, but hopefully it is clear. For a better understanding, the page looks like:

navigationbar, header with heading 1, and then the content, starting with the dropdown buttons and a search bar and beneath it is the table with results.

In case it is okay to use links, I would have to go with this code (which is not accessible at all) and start implementing aria and such to make it appear for screen reader users like the native select element.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
Julie Ju
  • 1
  • 1

1 Answers1

0

Implementing your own <select>/<option> can be very difficult. I would recommend using the native <select> element since it is already accessible and then style it if you don't like the default appearance. See following for styling suggestions:

If you need to create your own dropdown, start by following the Combobox Pattern.

the current code is written with <button><a>

I'm not following that part of your question.

when selecting different choices (filtering), the Heading as well as the URL is changing corresponding to its selection.

You certainly can go to a new URL after every dropdown selection, but that's not a great UX. If the user has to change all three dropdowns, they have to wait for the first dropdown to update the page, then they have to wait for the second dropdown to update, then finally they can choose the third one (and wait again). It'd be better to update the contents of the page rather than going to a new page. Or allow the user to select the filters and have an "Apply" button.

slugolicious
  • 15,824
  • 2
  • 29
  • 43