0
199
ViewsWhat aria label do I need on an HTML button that changes content using JavaScript and JSON data?
I have a webpage that has some HTML buttons. Clicking on a button will change the pages text and image content via JavaScript. The content is loaded from a JSON file.
<div class="dot-buttons role="tablist" aria-label="crew list">
<button role="tab" class="dot-button" aria-selected="true">Douglas Hurley</button>
<button role="tab" class="dot-button" aria-selected="false">Mark Shuttlewort</button>
<button role="tab" class="dot-button" aria-selected="false">Victor Glover</button>
<button role="tab" class="dot-button" aria-selected="false">Anousheh Ansari</button>
</div>
What I'm confused about is how to markup the ARIA label so the user understands that clicking on the button will change the pages content.
I tried:
aria-controls="Tab-1"
But this failed my accessibility test since the buttons don't really control other HTML elements. The buttons only change the content within the elements.
How can I set ARIA labels for the buttons so users will understand that clicking on them will change the content?
1 answers
Answer question0
Your sample code is using the tab design pattern. Is that what you want to do? Do you have something on your page that looks something like this:?
If so, then the code you have is sufficient. When the user selects one of the buttons, I presume you toggle aria-selected from "false" to "true" (or vice versa). When you toggle the value, the screen reader will announce the state change automatically. That's one of the benefits of using ARIA attributes - it has built in support for notifying assistive technology such as screen readers about changes.
And since you're using role="tablist", the combination of the user hearing that they have a tablist and that a state toggles from "not selected" to "selected" is enough of a hint to the user that something on the page updated when the button was selected.
And if this is the pattern on your page, you could have aria-controls on your button and it would refer to the ID of the panel it displays, but aria-controls doesn't buy you much from assistive technology support. I think one screen reader (JAWS) does something with it but most of the others don't, so it's not a big deal if you use it or not. Of course, that's sort of a catch-22. If screen readers don't support it, then people won't use it, and if people don't use it, there's no incentive for screen readers to support it. Generally you should use the appropriate ARIA attributes whether there's support for them or not so that you'll be ready when support comes. The tab design pattern mentioned earlier says that you should use aria-controls.