Using Buttons and Links with Accessibility in Mind
Buttons and links are fundamental elements in web design, but each has a distinct semantic meaning and accessibility implications.
Let’s see how to use them!
Buttons
Purpose: Use them for actions!
They are intended to trigger an event when you click on them. Examples include submitting a form, opening a modal window, or any other action that does not navigate to a new page or resource.
Be Accessibility-focused: Create them with the <button> tag!
Buttons created with this tag come with important benefits:
- assistive technologies like screen readers interpret them as interactive controls;
- they are focusable by default, which means they are accessible through keyboard navigation;
- they can be activated with the Enter or Space key.
All these features are important for users who do not use a mouse and/or rely on assistive technologies, and they come for free just because you use the <button> tag!
Label Your Buttons!
Screen reader users can navigate to a button using the tab key, so a button can be announced out of context (separately from the surrounding text). Therefore, if it's labeled with vague text like "click here" or "go," it doesn't provide enough information about its purpose.
What should you do?
- use descriptive text that clearly describe the action it will perform. For instance, "Search Flight Deals" is more informative than just "Search."
- avoid using the same text for multiple buttons on the same page unless they perform the same action. Unique and specific text for each button helps users distinguish between different actions.
Styling Buttons: You can style them to look like almost anything! But make sure they are still recognizable as interactive elements.
Links (Anchors)
Purpose: Use them for navigation!
Their primary role is to take you from the current location to a new resource. This could be a different page, a different section of the same page, or an external website.
Be Accessibility-focused: Create them with the <a> HTML tag! You’ll also have to add an href attribute pointing to the destination URL or page anchor.
Screen readers announce links as such, and just like buttons, they are focusable by default and can be accessed through keyboard navigation. To activate a link, press the Enter key.
Label Your Links!
Just like in the case of buttons, screen readers might announce links separately from their surrounding text, so make sure to use descriptive text.
Styling Links: You have many options to style them as long as they remain distinguishable!
Sticking with the default style (underlined and colored differently from surrounding text) is a good idea though. Maintaining this visual distinction helps users identify them as actionable items.
What to Avoid!
div or span elements as substitutes for buttons or links! Simply because they are not inherently accessible. If you (or your designer) insist on using them, then you must add the appropriate ARIA roles, tabindex, and keyboard event handling to make them accessible.
<div
role="button"
tabindex="0"
onclick="yourFunction();"
onkeydown="if(event.key === 'Enter') { yourFunction(); }"
aria-label="Descriptive text for button functionality"
>
Open
</div>
Really, why would you go down this road given all the extra work?!
Key Aspects To Remember
Your users have specific expectations when activating a link (e.g., the page will change) versus a button (e.g., some action will occur on the page). So use the correct element for the intended action: <button> for on-page actions, <a> for navigation.
Resources
Please visit my Codepen profile for more a accessible components.
Top comments (0)