The button is announced by its name first and then its role (button). The popup shows what VoiceOver on Mac announces a button that has “Send Message” text in it. When you put plain text inside the button, that text content can then be used as a name for the button, which is then announced: Send Message, Button by VoiceOver. The accessible name for the button can be defined in several ways, as you can see in the image above. Next to the Style tab, you’ll find an “Accessibility“ tab, inside which you will find something that looks like this: To inspect what the accessible name of a button is and, therefore, how it will be announced by a screen reader, you can use the Chrome devtools. But who would want to create a brittle implementation of features that are provided to them by default by the browser when they can save both time and effort using a simple, right? ) Inspecting the Button Name in Chrome Devtools This means that if you choose not to use the native element, you’ll need to reimplement that native behavior and functionality yourself using JavaScript. Either way, when a button is announced as one, users expect to be able to interact with it in a certain way, which includes being able to activate the button using either the ENTER or SPACE keys. Accessible Button NamesĪ button is announced to screen readers as a button when the proper element - the almighty is used, or when an element has a role = "button" on it. There is a handful of ways that an icon button can be implemented accessibly. But what if the designer or the UI enforces the absence of visual text next to an icon? You could always just put text in it, for example. While the seemingly popular aria-label is a perfectly valid way to add an accessible name to a button (and/or other components), it is certainly not the only way, let alone the best. Putting aside the UX side of the coin and whether or not an icon alone is enough to convey meaning and functionality to users, many implementations of these buttons today lack the proper accessibility that makes them meaningful to users of assistive technologies. Twitter’s Compose Tweet icons are an example of icon-only buttons in the wild. The infamous hamburger menu button is a great example of such buttons when not visually labelled “Menu”. These buttons can be found in the majority of app and user interfaces today. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text. Technique #5: aria-labelledby on the svg IconĪn icon button is an icon that triggers some sort of action on the page.Technique #2: Accessible Visually Hidden Text with hidden and aria-labelledby.Technique #1: Accessible Visually Hidden Text.Inspecting the Button Name in Chrome Devtools.
0 kommentar(er)
