Eight Traits That Make or Break Your Interface
taught by: Robert O’Connell
For interactive UI components to be recognizable, eight traits of object recognition need to be evident both visibly and text readably: role, name, value, state, rank, target, behavior/outcome, identity. Ensuring the perceivable, operable, and understandable display and announcement of just these eight traits offers a simple heuristic that designers, developers, and testers can easily learn and apply.
For interactive digital UI components to be accessible, eight traits of object recognition need to be evident both visibly and text readably:
- role (component role: Switch, Slider, Tab Control, Menu)
- name (label or group label: Age at Retirement, Start Date)
- value (text or option: 65 years, Friday October 4, 2019)
- state (on/off, active/[null], selected/[null], checked/not checked, expanded/ed)
- rank (1 of 2, 2 of 2)
- target (Opens Popup, Opens New Window)
- behavior/outcome (Plays a Song, Posts Comment)
- identity (button, link, textbox, text area, radio button, checkbox, combobox)
Ensuring the perceivable, operable, and understandable display and announcement of just these eight traits offers a simple heuristic that designers, developers, and testers can easily learn and apply.
Informational visual affordances and their text equivalents are signifiers that must be accessible to every user. The gateway to accessibility entails ensuring that these eight UI component signifiers needed by all users are visibly recognizable to sighted users and textually understandable when they announce to screen readers and Braille readers on focus and on change.
- Designers will be able to map usability to design comps and briefs by applying the eight traits to visual and textual design models.
- Developers will be able to code accessibly by vetting and validating the visibility and readability of the eight traits for each coded component.
- Accessibility testers will be able to apply the eight traits to any user interaction as a failsafe usability heuristic.