1. Page-Level Table of Contents (TOC)
What it is
A list at the top of a page that links down to sections on the same page using anchor links. It gives people a quick map of what is on the page and lets them jump directly where they need to go.
Why it matters
- Essential for people using Voice Control, Switch Control, or screen readers.
- Helps anyone with fatigue or limited time scan the page quickly.
- Makes long how-to pages less overwhelming.
<nav class="page-toc" aria-label="On this page">
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#setup-steps">Setup Steps</a></li>
<li><a href="#troubleshooting">Troubleshooting</a></li>
</ul>
</nav>Make sure the TOC is a real
<nav> with an
aria-label. Links must use clear text such as "Overview"
or "Setup Steps" rather than vague labels like "Click here".
2. Image / Media Placeholders
What it is
A simple visual placeholder that marks where an image, video, diagram, or audio clip will eventually go. This helps when drafting content before the actual media is ready.
Why it matters
- Lets you structure a page before assets are created.
- Reminds you to add alt text, captions, and transcripts later.
- Keeps drafts readable and organized.
<div class="placeholder">
<strong>Image placeholder</strong>
<br>Screenshot of my 2024 iMac setup (head pointer, on-screen keyboard).
</div>Screenshot of my 2024 iMac setup (head pointer, on-screen keyboard).
When the real image is added, make sure it has descriptive alt text. If it is essential to understanding a process (for example, the exact location of a macOS setting), consider adding a short text explanation right below it.
3. Callout / Note Boxes
What it is
A highlighted box for important information that should not get lost in the rest of the text: quick reminders, context, or key ideas.
Why it matters
- Draws attention to critical points people might otherwise skim past.
- Helps break up long walls of text into digestible chunks.
- Good for "read this before you start" notes.
<div class="callout callout-note">
<div class="callout-title">Note</div>
Voice Control works best in a quiet room. If your Mac has trouble
understanding you, try using a headset microphone.
</div>Do not rely on color alone to show importance. Use text labels such as "Note", "Important", or "Warning" so screen reader users get the same meaning.
4. Warning & Caution Blocks
What it is
A visually stronger box used when something could cause damage, data loss, or physical risk if done incorrectly.
Why it matters
- Flags steps that should not be skipped or guessed at.
- Important for anything involving physical transfers, lifts, straps, or cables.
- Helps caregivers quickly identify "pay attention here" moments.
<div class="callout callout-warning">
<div class="callout-title">Warning</div>
Never move or adjust the monitor arm while your chair or bed is still
locked to the Hoyer lift. Always lower everything and unlock first.
</div>Use clear language and avoid only saying "see above" or "see image". Make each warning self-contained so it still makes sense when read out loud by a screen reader.
5. Beginner & Caregiver Notes
What it is
A gentle explanation aimed at someone brand new - either a newly injured person or a caregiver with no tech background.
Why it matters
- Reduces intimidation and tech anxiety.
- Helps families understand the pace and emotional load.
- Sets expectations about what is "normal" to struggle with.
<div class="callout callout-beginner">
<div class="callout-title">For new users</div>
If Voice Control feels slow at first, that is normal. Give yourself time.
You are learning a new language with your Mac.
</div>Use plain language where possible. Avoid unexplained jargon and keep sentences short, especially in sections designed for beginners.
6. Pro Tips
What it is
Short, practical tips that come from lived experience. The goal is to save someone else the hours you already spent fighting with a feature.
Why it matters
- Shows visitors they are learning from real-world experience.
- Makes the content feel less like a manual and more like a friend's advice.
- Can dramatically reduce frustration with small tweaks.
<div class="callout callout-protip">
<div class="callout-title">Pro tip</div>
Create a custom on-screen keyboard key that types "Command + S" for Save.
It is much faster than trying to voice the shortcut every time.
</div>Pro tips should be optional helpers, not required steps. Make sure the main instructions still work without them.
7. Step-by-Step Sequences
What it is
A numbered list of actions that walk someone through a process start-to-finish: turning on a Mac, enabling Voice Control, setting up a Switch, etc.
Why it matters
- Reduces cognitive load - one clear step at a time.
- Easy for caregivers to read out loud or follow together.
- Works very well with screen readers and voice commands.
<ol class="step-list">
<li>Turn on your Mac and log in.</li>
<li>Open <strong>System Settings</strong>.</li>
<li>Go to <strong>Accessibility > Voice Control</strong>.</li>
<li>Switch Voice Control <strong>On</strong>.</li>
</ol>- Turn on your Mac and log in.
- Open System Settings.
- Go to Accessibility > Voice Control.
- Switch Voice Control On.
Always use real ordered lists (
<ol>) for steps so
assistive technology can announce "Step 1 of 4, Step 2 of 4…" instead
of treating them as plain paragraphs.
8. Checklists
What it is
A list of items with checkboxes that can be ticked off as tasks are completed - for example, daily maintenance or exercise routines.
Why it matters
- Helps track what has been done, especially on high-fatigue days.
- Caregivers can verify steps without guessing.
- Can be used later with local storage or a database for logging.
<ul class="checklist">
<li>
<input type="checkbox" id="chk-mount">
<label for="chk-mount">Monitor arm locked and secure</label>
</li>
<li>
<input type="checkbox" id="chk-mic">
<label for="chk-mic">Microphone positioned near mouth</label>
</li>
</ul>Always pair checkboxes with
<label> elements so
people can click or tap the text as well as the tiny box, and so
screen readers announce what each checkbox means.
9. Requirements at a Glance
What it is
A compact block listing what you need before you start: macOS version, hardware, accessories, or physical positioning.
Why it matters
- Prevents frustration from following steps that will not work on older systems.
- Helps caregivers set up the environment correctly the first time.
- Makes troubleshooting easier when things do not behave as expected.
<div class="requirements-block">
<h3>What you need first</h3>
<ul>
<li>macOS Sequoia or newer</li>
<li>Built-in microphone or external headset</li>
<li>Ability to sit or lie where you can see the screen</li>
</ul>
</div>What you need first
- macOS Sequoia or newer
- Built-in microphone or external headset
- Ability to sit or lie where you can see the screen
Keep requirements in list form, not in a long paragraph. That helps screen readers and reduces cognitive load for everyone.
10. Troubleshooting Sections
What it is
A dedicated area for "If this does not work…" cases: common bugs, mis-clicks, or accessibility issues you have already run into.
Why it matters
- Validates that issues are real and not just "user error".
- Saves people hours by giving tested fixes.
- Lets you track accessibility bugs over time.
<div class="callout callout-troubleshooting">
<div class="callout-title">If Voice Control will not copy or paste</div>
Sometimes system-level shortcuts like Copy or Paste do not respond to
Voice Control. Try saying: <strong>"Click Edit"</strong> and
then "Say number" to choose the menu item instead.
</div>Where an issue seems to be a software bug, say that clearly and offer a workaround. This helps users know it is not their fault.
11. FAQ / Q&A Blocks
What it is
A list of common questions with short, clear answers, grouped near the end of a page or right after a complex topic.
Why it matters
- Lets visitors jump straight to specific concerns.
- Good place to answer "Am I the only one who…?" questions.
- Easy to expand over time as you get real feedback.
<div class="faq-block">
<div class="faq-item">
<div class="faq-question">Do I need to speak perfectly clearly?</div>
<div class="faq-answer">
No. Voice Control can handle normal speech, but background noise and
mumbling make it harder. A headset microphone can help a lot.
</div>
</div>
</div>Keep each question and answer grouped in its own container so screen readers do not mix them together. Short paragraphs are easier to digest.
13. Mini Diagrams / Flows
What it is
A simple text-based "flow" that explains how pieces connect: SmartNAV, QuadStick, sip-and-puff, head pointer, on-screen keyboard, and so on. No graphics required.
Why it matters
- Helps people picture the system without needing a complex diagram.
- Fully accessible as plain text and screen-reader friendly.
- Good for explaining signal paths (for example sip-and-puff → QuadStick → Mac).
<div class="placeholder">
<strong>Input flow</strong>
<br>Sip-and-puff switch → QuadStick → Mac (cursor + keyboard) → Apps
like Safari, Mail, or VS Code.
</div>Sip-and-puff switch → QuadStick → Mac (cursor + keyboard) → Apps like Safari, Mail, or VS Code.
If you later add visual diagrams, keep this text version as the official explanation so people who cannot see the image still understand the flow.
14. Headings & Anchor Links
What it is
A consistent heading structure (H1, H2, H3…) that breaks content into clear sections, plus optional anchor IDs so the TOC can link directly to them.
Why it matters
- Screen readers rely on headings to let users jump around.
- Helps visually organize long pages into "chapters".
- Improves SEO by signaling what each page is really about.
<h1 id="mac-setup">My 2024 iMac Setup</h1>
<h2 id="accessibility-features">Accessibility features I rely on</h2>
<h3 id="head-pointer">Head Pointer</h3>
<h3 id="voice-control">Voice Control</h3>My 2024 iMac Setup
Accessibility features I rely on
Head Pointer
Voice Control
Never skip heading levels (for example do not jump from H2 straight to H4). The structure should make sense as an outline even without the visual layout.
15. WCAG Notes & Accessibility Reminders
What it is
A quick checklist of accessibility habits you want to keep repeating as you build pages - contrast, headings, alt text, focus order, keyboard access, and so on.
Why it matters
- Keeps accessibility in your workflow instead of as an afterthought.
- Helps make the site more usable for people with different abilities.
- Matches the spirit of the WCAG guidelines without having to memorize everything.
This section is for you while building. The public pages should embed the actual accessible patterns - headings, alt text, usable forms - rather than talking about WCAG directly.