Lesson 04 | Act 4: Elderly Mode

⏱ Est. reading time: 5 min Updated on 5/7/2026

Act 4: Elderly Mode (Episodes 8-10)

The most challenging part — making it usable and accessible for a 65-year-old.

Episode 8: Two Modes, One Codebase

Scene: Standard mode is done, now we need to add elderly mode. We can't build two separate versions.

  • CSS Custom Properties + body.elderly-mode: One class toggles all visuals
  • Elderly mode visual standards: 68px buttons (originally set to 80px, tested 68px as comfortable), 26px font, 7:1 contrast
  • Three mode toggle methods: UI button + keyboard m key + localStorage preference
  • 300ms CSS transition for smooth shifting (background, font-size, width)
  • Elderly mode hides ( ) % buttons — simplifying the UI, not removing features
  • Use visibility: hidden + pointer-events: none instead of display: none (to preserve Grid cells)
  • Core concept: CSS variables make theme switching just a matter of altering a few values

Output Files:

  • style.css — .elderly-mode full override styles (white background, blue theme, large buttons & text)
  • app.js — Mode toggle logic (initMode / toggleMode + localStorage)
  • index.html — data-hide-elderly attribute + mode toggle button + sound toggle button
  • tests/mode/switch.test.js — Mode toggle tests

Command: /gsd-discuss-phase 3, /gsd-plan-phase 3, /gsd-execute-phase 3

Episode 9: Accessibility is Not a Bonus, It's Fundamental

Scene: Visuals look good, but how do blind users navigate? What about screen readers for elderly users?

  • ARIA labels: Chinese descriptions for every button (e.g. aria-label="Seven", aria-label="Divide")
  • Focus indicator: Pressing Tab shows where you are, 3px blue outline in elderly mode (WCAG AAA requires thicker outlines)
  • Screen readers: After calculating 2+3=5, it should announce "2+3 equals 5" (dynamic aria-label updates)
  • Long-press backspace: Holding ⌫ for 500ms in elderly mode clears all (touchstart timer)
  • Button sounds: Web Audio API 800Hz 0.05s beep, default off, localStorage remembers toggle state
  • Why sounds matter: As elderly users' vision declines, auditory feedback serves as a secondary confirmation channel
  • Core concept: Accessibility is not an afterthought patch, it's part of the design

Output Files:

  • app.js — Dynamic ARIA updates (announceResult) + long-press detection (_longPressTimer) + sound system (playClickSound)
  • tests/a11y/aria.test.js — ARIA attribute tests
  • tests/a11y/focus.test.js — Focus indicator tests

Command: /gsd-execute-phase 3 (continued)

Episode 10: Bug Hunt — Elderly Mode Buttons Overflow

Scene: Thought we were done, but opening elderly mode reveals buttons breaking the container bounds.

  • Bug: Buttons overflowing the container edge
  • Root cause: display: none breaks CSS Grid auto-placement (hidden elements don't take up space)
  • Fix: visibility: hidden + pointer-events: none (takes space but invisible and unclickable)
  • Fortification: grid-template-columns: repeat(4, 1fr) + width: auto to prevent overflow
  • Color fix: Elderly mode white background + blue theme (#1a73e8), contrast > 7:1
  • Layout tweaks: Blue gradient background for the display area, layered shadow effects for buttons
  • file:// protocol limit: Chrome ES module isn't supported, revert to traditional <script> + exports compatibility
  • Core concept: CSS Grid hidden rules — a hidden element does not equal a removed element

Output Files: No new files, updated style.css + index.html

Command: /gsd-quick or direct manual fix

Related Tools & Resources

Skill Marketplaces

A

Agent Skills

A platform providing a specification and showcase for AI agent skills, helping developers integrate and discover new capabilities for AI agents.
G

Google Agent Skills

A collection of agent skills for Google products and technologies, including Google Cloud, enabling AI agent developers to easily integrate and build intelligent applications.
A

Agent Skills

Production-grade engineering skills for AI coding agents, encoding workflows, quality gates, and best practices for software development.

Recommended Plugins

🏗️

Feature Dev

Comprehensive feature development workflow with a structured 7-phase approach. Agents: code-explorer, code-architect, code-reviewer.

Related Products

📦

LangGraph

LangGraph, from LangChain, Inc., is a powerful low-level orchestration framework engineered for building, managing, and deploying sophisticated, long-running, and stateful multi-agent applications. It represents application logic as cyclic Directed Acyclic Graphs (DAGs), giving developers precise control over LLM execution, including when to pause, loop, or transfer control. LangGraph ensures durable execution, seamless human-in-the-loop capabilities, and comprehensive short-term and long-term memory management. Deep integration with LangSmith provides robust debugging and production-ready deployment, making it the ideal choice for developing complex and reliable AI agents.
📦

deer-flow

DeerFlow (Deep Exploration and Efficient Research Flow) is an open-source super agent harness developed by ByteDance, designed to orchestrate sub-agents, memory, and sandboxes to perform a wide range of complex tasks. It is powered by an extensible skills system, allowing for custom functionality integration. DeerFlow 2.0 is a ground-up rewrite, offering enhanced agent capabilities and flexible deployment, recommended for use with large language models such as Doubao-Seed-2.0-Code, DeepSeek v3.2, and Kimi 2.5. It also integrates BytePlus's InfoQuest intelligent search and crawling toolset.
📦

dify

Dify is an open-source, production-ready LLM application development platform engineered to significantly accelerate the entire development cycle from prototype to production. It offers an intuitive visual workflow canvas, integrating a powerful Retrieval Augmented Generation (RAG) pipeline for efficient document ingestion and retrieval. Dify also features advanced agent capabilities based on LLM Function Calling or ReAct, configurable with pre-built or custom tools. It provides comprehensive support for hundreds of mainstream proprietary and open-source LLMs, a robust Prompt IDE for prompt engineering and model performance comparison, and built-in observability features (e.g., Opik, Langfuse, Arize Phoenix). This empowers developers to rapidly build, deploy, and monitor complex AI applications and agents.