Aria support for SearchPanes sort buttons
Aria support for SearchPanes sort buttons
csidorfsky
Posts: 2Questions: 1Answers: 0
Description of problem:
Our organization is working to make all our sites WCAG 2.1 compliant before the April 2026 deadline. Much of DataTables is already there, but one gap is the buttons within search panes (buttons to sort just that pane alpha or numerically, as well as the search button and display toggle). These are flagged by tools such as WAVE as being empty buttons.
Is there a plan to add aria tags to these elements? The question was asked in this post a few years ago, but hasn't happened yet.
The last comment in that thread links to some good resources on avoiding the use of placeholders in a case like this where it functions more as a header. It would further make logical sense to use the text of that placeholder/header in describing the other buttons there, so in this example, the first Aa button might have an additional element of:
aria-label="Sort by Position alphabetically"
or something like that, since that pane is for searching by Position.
It would be ideal to incorporate that into the next version of SearchPanes, but if that's not in the cards, I'd appreciate any advice on manually adding it within our own apps. I was playing around with it a little but couldn't come up with any way to make new aria-label elements appear.
Answers
Sorry, that previous thread slipped off my radar. I've committed changes to add suitable aria-label attributes to the buttons now. I've also added a
titleto the input element, which I know isn't ideal, but its a short term fix. I've got a bug now to replace it with an overlaylabelin future.I've still to fully document the new language options as well - got a bug for that as well, but this at least gets it in there.
Really useful tool WAVE - thank you for introducing me to that!
Allan
Thanks for your work on this! I look forward to the next SearchPanes release so I can test the new code (unless I'm missing something).
The nightly build will have the change. You might want to add the date to the URL to bust any edge cache. E.g.:
Allan