It seems that a lot of frontend developers either don’t know about coding for accessibility or they don’t care. Of course, it can be hard to implement in organizations with no focus on accessibility. But it’s always a developer’s (and designer’s) responsibility to develop an inclusive web.
In the series Five Minute Accessibility I will introduce one simple thing you can do to improve accessibility in your projects. In this post you’ll learn about buttons.
Buttons
Buttons are used for triggering actions or events such as submitting a form or closing a modal. They are so common that most developers has stopped thinking about how to properly code a button. Sadly, the result is rarely accessible.
A rule of thumb when creating buttons is that they should be able to be navigated by the tab key . This is achieved by adding tabindex=”0" . They should also have the role of a button by adding role=”button”.
Generally there are three types of buttons which are WAI-ARIA supported.
- The ordinary button
- The toggle button
- The menu button
The ordinary button is a button in its simplest form. You can press it and it triggers an action or event.
The toggle button has two states which are either on or off. To signal a assistive technology that this is a toggle button you should specify a value for the attribute aria-pressed. It is very important that the label on a toggle button does not change value when pressed. In some cases the aria-pressed attribute can be avoided if by design a toggle button switches label from mute to unmute. That way context is provided by the labels.
The menu button can display a menu that is usually hidden when the page is loaded. You can help assistive technology know that the button is a menu button by using aria-haspopup. This attribute indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
Be aware that a lot of assistive technology uses the keyboard to trigger button actions. The native <button> element automatically supports triggering actions by using enter or space but if you do not use the native element then please test that it works with enter and space.
Examples
To sum up: Always check if your buttons can be triggered by pressing space and enter and always make sure you can navigate your buttons using the tab key.
You can follow me on Twitter.
Top comments (0)