eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  1. Techniques

Ambiguous Label

An action that cannot easily be discerned from another on the same page.

PreviousActive DescendantNextBackground Icon

Last updated 4 months ago

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 visual label alone does not explicitly call out the item, or noun, that it refers to. This can be a challenge for users of assistive technology.

One way of reducing the barrier for assistive technology 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 the nearest heading, or you are striving to meet WCAG AAA requirements, the programmatic label can be set explicitly (via aria-label) with the necessary context:

<a href="http://www.ebay.com/cart/add" aria-label="Add to Cart - iPhone 6, 32GB">Add to Cart 6</a>

<button aria-label="Place Bid - iPhone 6, 32GB">Place Bid</button>

The same result can be achieved with clipped text instead of ARIA:

<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 for more information on the clipped class.

NOTE: additions to the labelling text must always be appended, not prepended; prepending text that does not appear visually creates issues for users of voice input software.

Utilities page