Skip to content

Icon Functional Interaction Acceptance Criteria

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 mouse­over.
  • 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.
Print Friendly, PDF & Email