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. 'Submit' 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 focus.
Sample Code:
<button class="button is-dark is-rounded" type="submit">Submit</button>
Why Readable (Discernible) Button Text Matters
Having readable, informative text associated with the button(s) on a page is crucial for helping screen reader users 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 out of context, outside 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).
Use context-aware labels. (ex. not Save, but Save Changes)
Avoid ambiguous text.
Learn more with Readable (Discernible) Button Text Issues: Correcting.
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!