Interaction Acceptance Criteria
Common Defaults
Basic Display – Functional Icon defaults should adhere to the following parameters:
- The icon should be visually recognizable as a relatively small, high contrast, graphic element.
- The icon may be monochromatic or full color depending on context (see Conditional Defaults).
- The icon may or may not have an associated label depending on context (see Conditional Defaults). The icon may be an image or a glyph font depending on context (see Conditional Defaults).
- The icon’s size will vary depending on context (see Conditional Defaults).
Functional Defaults – Functional Icon interactivity defaults should adhere to the following parameters:
- The icon should always be a directly selectable (clickable) object and should never be only engaged on mouseover.
- The icon will always be coded to either be hidden to screen readers or present a text equivalent of its meaning to screen readers depending on context (see Conditional Defaults and Accessibility Requirements).
- The icon’s selection interaction will yield a different interaction type depending on context (see Conditional Defaults).
Conditional Defaults
Common Conditions
Condition – IF the icon being used is a glyph font and has no associated label:
- The actually icon text character must be hidden to screen readers.
- IF the glyph font icon appears with no associated label, a text equivalent specific to its contextual meaning must be supplied in a neighboring span tag.
Condition – IF the icon being used is a glyph font (Fontello) and does have an associated label:
- The icon should be within proximity to the label by no more than 10 pixels. The actually icon text character must be hidden to screen readers.
- The icon link must be hidden from screen readers.
- A text equivalent specific to its contextual meaning should not be present.
Condition – IF the icon being used is an image and has no associated label:
- The icon image should not present a containing blue box.
- The icon image must include the “alt” attribute with text specific to its contextual meaning.
Condition – IF the icon being used is an image and does have an associated label:
- The icon image should not present a containing blue box.
- The icon image must include the “alt” attribute with its value blank (alt=””).
Conditions Specific to Feature Level Design (The parameters of this condition must be defined in the feature level design)
Condition – IF the icon is associated with the product name:
- The associated product icon should precede the product name.
- The icon will display in the appropriate colors for product branding.
- The icon image must include the “alt” attribute with its value blank (alt=””).
Condition – IF the icon is being used in a specific context of a feature that is not a common UI component:
- The icon size will be determined by feature level requirements.
- The icon placement will be determined by feature level requirements.
Interaction Behavior
IF the user clicks on the icon:
- The functionality associated with the icon is executed.
IF the user gives the icon focus and hits the ENTER key:
- The functionality associated with the icon is executed.
