UX Design · Study deck
Accessible IoT: Platform State
A door lock may be pending, stale, or offline.
UX Uma is your guide for this deck.
After studying this chapter
Learning objectives
You will be able to:
- Test accessible state on platforms with a concrete scenario and pass criteria.
- Compare universal vs targeted access against the chapter's stated constraints.
- test accessible state on platforms with a concrete scenario and pass criteria
- compare universal vs targeted access against the chapter's stated constraints
Major section
Accessible State on Platforms
Implementation should expose the same control semantics that the visual design implies.
- Web and app controls need accessible names, roles, values, focus order, error descriptions, and live status updates.
- For connected-device state, make accessibility part of the data model.
- The platform should not force every surface to infer accessibility semantics from a visual string.
Major section
Accessible State on Platforms (continued)
A device shadow, MQTT retained topic, WebSocket event, push notification payload, or local cache should carry state, timestamp freshness, source, confidence, and action availability so each interface can speak or display the same truth.
- Native layers should map that truth into UIAccessibility on iOS, AccessibilityNodeInfo on Android, notification categories, haptic patterns, and voice-assistant confirmations.
- Asynchronous state needs special care.
- Input contract: pointer, keyboard, switch, screen reader, voice, hardware button, and automation paths need equivalent command outcomes.
Major section
Key Concepts
WCAG 2.1: Web Content Accessibility Guidelines specifying minimum contrast ratios, keyboard navigation, and screen reader support.
- Screen Reader Compatibility: Design property ensuring all UI elements have accessible names and roles for visually impaired users.
- Motor Accessibility: Designing controls with sufficient tap target size (≥44×44 pt) and avoiding fine-motor gestures for users with tremors.
- Cognitive Load Reduction: Simplifying interface complexity and using progressive disclosure to support users with cognitive differences.
Major section
WCAG Implementation Basics
Each principle cascades through your design: perceivable affects what users can sense, operable affects what they can do, understandable affects comprehension, and robust ensures compatibility with tools they use.
- Charts/graphs → Provide data tables as alternative.
- Timed actions → Provide "more time" option or remove time limits.
- Inconsistent behavior → Make similar actions behave the same way.
Major section
MVU: WCAG Accessibility Standards
Accessible design improves usability for all users while meeting legal compliance requirements (ADA, EU Accessibility Act).
- Key Takeaway: Touch targets must be minimum 44x44 points, text contrast must meet 4.5:1 ratio (WCAG AA), and every critical function must be operable through at least two modalities (visual + audio, touch + voice).
- Perceivable means people can sense the information.
Major section
Deep dive: Putting Numbers to It
WCAG contrast ratio calculation: For text to be WCAG AA compliant, contrast ratio $C = \frac{L_1 + 0.05}{L_2 + 0.05}$ must be $\geq 4.5$ (normal text) or $\geq 3.0$ (large text ≥18pt).
- Touch target accessibility: WCAG 2.5.5 requires minimum $44 \times 44 \text{pt}$ touch targets.
Major section
Deep dive: Putting Numbers to It (continued)
Dark gray #595959 has $L = 0.0999$, giving $C = \frac{1.0 + 0.05}{0.0999 + 0.05} \approx 7.0$ — passes WCAG AA.
- A 32pt button has area $A = 32^2 = 1{,}024 \text{ pt}^2$.
- A 44pt button has $A = 44^2 = 1{,}936 \text{ pt}^2$ — 89% larger.
- This process ensures accessibility is built-in from the start rather than retrofitted.
Deck summary
Key takeaways
Implementation should expose the same control semantics that the visual design implies.
- A device shadow, MQTT retained topic, WebSocket event, push notification payload, or local cache should carry state, timestamp freshness, source, confidence, and action availability so each interface can speak or display the same truth.
- WCAG 2.1: Web Content Accessibility Guidelines specifying minimum contrast ratios, keyboard navigation, and screen reader support.
- Each principle cascades through your design: perceivable affects what users can sense, operable affects what they can do, understandable affects comprehension, and robust ensures compatibility with tools they use.
- Accessible design improves usability for all users while meeting legal compliance requirements (ADA, EU Accessibility Act).
Retrieval practice
Recall check 1 of 2
UX Uma says: answer from memory, then check your reasoning.
Q1You're conducting accessibility testing for a new smart home hub with a 5-inch touchscreen. Which testing approach is MOST effective for uncovering real accessibility issues?
Show answer
Answer: B Correct!
Retrieval practice
Recall check 2 of 2
UX Uma says: answer from memory, then check your reasoning.
Q2Your smart thermostat has a sleek touchscreen with light gray text (3:1 contrast ratio) on white background, and 32x32pt touch targets for temperature adjustment. Elderly users complain they 'can't see the numbers' and 'keep missing the buttons.' Which WCAG compliance issues must be fixed?
Show answer
Answer: A Correct!
Print reference
Answers
Answer key.
- B · Correct!
- A · Correct!