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. Follow HTML
  • 2. Follow ARIA
  • 3. Combine HTML/ARIA
  • 4. Partially combine HTML/ARIA
  • 5. Consider JavaScript APIs
  • 6. Use long-standing web design/ux conventions
  • 7. Look for close relationships to existing names
  • 8. Fallback to use design system language(s) for inspiration
  1. Appendix

Pattern Naming Scheme

How we choose our pattern names

In the beginining of the web, most names were derived from the print world (e.g. heading, image). Then, around the time of DHTML and AJAX, we saw an influx of patterns from the desktop world (hence the introduction of ARIA, e.g. role=tabs, role=menu). In recent times we find that many newer patterns stem from native phone operating systems (i.e. iOS & Android).

While it is common practice for design systems to name and categorize things according to a mostly visual naming system (e.g. cells, dropdown, expansions, selections, etc), this method of naming is often too broad and does not always translate well to existing HTML tags, standards & conventions that a web developer is familiar with.

At the component level we typically find that we need a more fine-grained and semantic approach to naming. A prime example is the term "dropdown"; in a purely visual language this umbrella term may suffice, but for the web developer it can sow seeds of confusion. For example, is it a menu (i.e. role=menu), a select (i.e. the HTML select element), a listbox (i.e. role=listbox), or a combobox (i.e. role=combobox with role=listbox)?

Rather than reinvent the wheel, we look to well established naming systems to guide our decision making, namely the W3C web standards & specifications.

Here are the general rules of thumb we follow when it comes to naming.

1. Follow HTML

Examples: button, checkbox, details, link, radio, select, switch, video.

2. Follow ARIA

Examples: combobox, listbox, menu, tabs, textbox, toggle-button (i.e. aria-pressed), tooltip.

3. Combine HTML/ARIA

Examples: alert-dialog, listbox-button, menu-button.

4. Partially combine HTML/ARIA

Examples: date-textbox, filter-button, fullscreen-dialog, icon-button, lightbox-dialog.

5. Consider JavaScript APIs

Examples: confirm-dialog & input-dialog (inspired by confirm() and prompt()).

6. Use long-standing web design/ux conventions

Examples: breadcrumbs, carousel, pagination, split-button, star-rating.

7. Look for close relationships to existing names

Examples: infotip & tourtip take inspiration from tooltip.

8. Fallback to use design system language(s) for inspiration

Examples: avatar, badge, chip, progress-stepper, segmented-buttons.

PreviousMIND Pattern TemplateNextReferences

Last updated 3 months ago