Tag

    Tags represent a set of interactive, merchant-supplied keywords that help label, organize, and categorize objects. Tags can be added or removed from an object by merchants.

    Examples

    Down Arrow

    Use to signify the attributes of an object.


    Best practices

    Tags should:

    • Be presented close to or within the input control that allows merchants to add and remove tags


    Accessibility

    See Material Design and development documentation about accessibility for Android:

    See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

    Labeling

    The button to remove a tag is automatically given a label using aria-label so that screen reader users can distinguish which tag will be removed.

    Keyboard support

    The control to remove a tag is implemented as a button with standard keyboard support.

    • Give buttons keyboard focus with the tab key (or shift + tab when tabbing backwards)
    • To activate a button, press the enter/return or space key

    When a merchant uses the button to remove a tag, it is important to make sure that keyboard focus is managed. Moving focus to the next element in the page is recommended.