eBay MIND Patterns
Search…
Introduction
Messaging
Input
Navigation
Disclosure
Structure
Techniques
Active Descendant
Alt Text
Ambiguous Label
Background Icon
Keyboard Trap
Live Region
Offscreen Text
Roving Tabindex
Skip to Main Content
Anti-Patterns
Appendix
Powered By GitBook
Ambiguous Label
A label for an action that cannot easily be discerned from another on the same page.
A typical e-commerce sight is rife with buttons and links such as 'Add', 'Edit', 'Update', and 'Delete' etc. We class them as ambiguous labels, because the label is not unique to the page; the label alone does not explicitly call out the item, or noun, that it refers to.
The easiest solution to this problem is to ensure good heading structure for your page, so that the full context of the label can be perceived from the preceding heading.
If the context cannot be derived from a nearby heading, or you are striving to satisfy WCAG AAA requirements, clipped text can be appended to ensure labels are unambiguous to AT:
1
<a href="http://www.ebay.com/cart/add">Add to Cart<span class="clipped"> - iPhone 6, 32GB</span></a>
2
​
3
<button>Place Bid<span class="clipped"> - iPhone 6, 32GB</span></button>
Copied!
Clipped text remains hidden to sighted users but visible for AT. Please refer to the Utilities page for more information on the clipped class.
NOTE: clipped text must always be appended to buttons and links, not prepended (the prepending of clipped text would create issues for users of voice recognition software).
Previous
Alt Text
Next
Background Icon
Last modified 1yr ago
Copy link