In this Article
There are a few ways to solve the Buttons Must Have Discernable Text flag. Below are some options for fixing either a <button> element or an element with role="button" to pass this guideline. You will need to choose the option which works best for your page(s).
Add Inner Text to the Button
Perhaps the simplest way to fix this error is to add inner text to the button.
Flagged: <button id="EnterStore" ></button>
Corrected: <button id="EnterStore">Enter Store</button>
Add an aria-label Attribute
If you have a location where a visible label would not be the best thing to use for a button, consider adding a non-empty aria-label attribute to the button. This could be due to design considerations or if the button's appearance makes its purpose clear, like a magnifying glass for a search button.
Flagged: <div id="box">
This is a pop-up box.
<button>X</button>
</div>
Corrected: <div id="box">
This is a pop-up box.
<button aria-label="Close">X</button>
</div>
Add an aria-labelledby Attribute or fix the Existing Attribute
The aria-labelledby property lets you leverage content already in use in a webpage by referring to its id.
An example:
<p id="deleteBtnLabel">Delete your account</p>
<button aria-labelledby="deleteBtnLabel"> <span aria-hidden="true">🗑️</span> </button>
If you already have an aria-labelledby property in your HTML for the button and still get this flag, double-check that the correct element id is being referenced in the aria-labelledby property.
Give the button role="presentation" or role="none" and a tabindex="-1" to keep it out of the tab order.
Giving the button a role of either presentation or none will indicate that the button is purely for visual or stylistic purposes and does not need to be conveyed to assistive technologies. Since these roles remove the element from the accessibility tree, adding the tabindex="-1" ensures the element is not focusable.
<button role="presentation" tabindex="-1"> Decorative Button </button>
Add a title Attribute
The title attribute can be added as a method to provide readable text for a button. The title attribute is readable by most screen readers, but an aria-label is preferred.
Flagged: <button id="EnterStore" ></button>
Corrected: <button id="EnterStore" title="Enter Store"></button>
Common Client Issue
<buttons> that use Icons
Many clients are flagged for their search or social media icons that incorporated into a <button>. This can be corrected by adding an aria-label attribute to the <button> tag.
Flagged:
<button class="btn btn-primary" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
Corrected:
<button class="btn btn-primary" aria-label="Search" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
Adding the aria-label="Search" will resolve the flag in the above case.
Looking for Button Text basics? Review our What is Readable Button Text article.
Learn More with WCAG
Hiding Semantics with the presentation Role - for more complicated lists needing to override the semantic structure of a list
DubBot Flag: Buttons must have discernible text
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!