IoT Interfaces, Location and Privacy · 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.
- Explain: Implementation should expose the same control semantics that the visual design implies.
- Explain: 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.
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 CSS px) 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
Figure: WCAG POUR Principles for IoT Accessibility shows the four Web Content Accessibility Guidelines (WCAG) ideas.
- Perceivable means people can sense the information.
- Operable means they can use the control.
- Understandable means the result is clear and steady.
- A cryptic error becomes a message that names what happened and what to do under Understandable.
Major section
MVU: WCAG Accessibility Standards (continued)
Non-semantic markup gives way to controls an assistive tool can read under Robust.
- The smart-light example below tests those same ideas in one task.
- Perceivable: Information must be presentable in multiple ways.
- Operable: Interface must be usable by all.
- Understandable: Interface behavior must be predictable.
Major section
Deep dive: Putting Numbers to It
WCAG contrast ratio calculation: For text to be WCAG AA compliant, contrast ratio C=L2+0.05L1+0.05 must be ≥4.5 (normal text) or ≥3.0 (large text ≥18pt).
- Dark gray #595959 has L=0.0999, giving C=0.0999+0.051.0+0.05≈7.0 — passes WCAG AA.
- A 32 CSS px square has area 322=1,024px2; a 44 CSS px square has area 442=1,936px2, 89% larger.
- The worked example has twenty controls.
Major section
Deep dive: Putting Numbers to It (continued)
Star topology (all devices → hub → cloud → broadcast) has 2-hop latency τ=2×(Ldevice−cloud+Lcloud−device)≈2×(150ms)=300ms.
- Peer-to-peer mesh has N−1=4 simultaneous broadcasts at τ≈20-50ms (local network) — 6× faster than cloud round-trip.
- A linear scan makes the person move through controls one by one, while landmarks provide a shorter route to the intended section.
- The design choice is to group controls with meaningful navigation and test them with a screen reader.
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.
- Figure: WCAG POUR Principles for IoT Accessibility shows the four Web Content Accessibility Guidelines (WCAG) ideas.
Retrieval practice
Recall check 1 of 3
UX Uma says: answer from memory, then check your reasoning.
Q1You are testing a smart-home hub with a 5-inch touchscreen. Which testing approach is most effective for finding real accessibility issues?
Show answer
Answer: D Testing with actual users with disabilities reveals real-world issues automated tools miss.
Retrieval practice
Recall check 2 of 3
UX Uma says: answer from memory, then check your reasoning.
Q2A thermostat's normal text has a measured 3:1 contrast ratio, and its critical touch targets measure 32×32 CSS px with no applicable size exception. For WCAG 2.2 Level AA normal-text contrast and Level AAA enhanced target size, which two issues need fixing?
Show answer
Answer: B see answers page
Retrieval practice
Recall check 3 of 3
UX Uma says: answer from memory, then check your reasoning.
Q3A lock command is pending. Which test gives a clear accessibility pass criterion across app and voice?
Show answer
Answer: A Both channels must expose the same state transition and recovery action.
Print reference
Answers
Answer key.
- D · Testing with actual users with disabilities reveals real-world issues automated tools miss.
- B · Normal-text contrast at 3:1 fails WCAG AA's 4.5:1 requirement. For target size, WCAG 2.5.8 AA specifies 24×24 CSS px subject to exceptions, while WCAG 2.5.5 AAA specifies 44×44 CSS px subject to exceptions; this 32×32 CSS px target is below the AAA size criterion.
- A · Both channels must expose the same state transition and recovery action.