Ambiguous Label

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:

<a href="http://www.ebay.com/cart/add">Add to Cart<span class="clipped"> - iPhone 6, 32GB</span></a>
​
<button>Place Bid<span class="clipped"> - iPhone 6, 32GB</span></button>

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).