What is Button Text?
Button text refers to the visible label or content displayed on a button element, typically enclosed within the <button> tags.
In the image below there is a button with the word 'Submit' inside the button. This is the readable text for the button. When a user tabs to the button when using a screen reader, it reads 'submit button' to the user. Readable (discernible) button text is the content read to a web visitor utilizing a screen reader when the button gets their focus.
Sample Code:
<button class="button is-dark is-rounded" type="submit">Submit</button>
Why Readable (Discernable) Button Text Matters
Having readable, informative text associated with your button(s) is critical for screen reader users to help them easily navigate your site. Your readable button text should clearly describe one of the following - the button's:
destination
purpose
function or
action.
Screen readers often allow users to jump through available buttons on a webpage. This means that buttons are often read outside of the context of the webpage's content.
If elements with roles such as role="link" or role="button" don't have an informative, accessible name, screen reader users cannot determine the element's purpose.
Button Text Best Practices
Be clear and concise.
Use action-oriented language.
Reflect what the user wants to do (ex. Add to Cart).
Keep it short.
Use context-aware labels. (ex. not Save, but Save Changes)
Avoid ambiguous text.
Learn More with WCAG
Section 508: 1194.22 (a) Text equivalent for non-text elements
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!