Video script — TheAccessibleOrgChart walkthrough
- Product: TheAccessibleOrgChart — https://orgchart.theaccessible.org
- Goal: show a CSV become a branded, WCAG 2.1 AA, keyboard-navigable org chart you can share or embed.
- Length: ~90 seconds
- Audience: HR, comms, and IT teams at organizations that publish an org chart on an intranet or public site.
- Embeds on:
orgchart/getting-started
Read the accessibility requirements. Use a synthetic org (“Northwind, Inc.”, invented names) — never the dev “Fixture Org” data, and no error banners or DEV watermark on screen.
Shot list
| # | Dur | Visual / on-screen action | Voiceover | On-screen text |
|---|---|---|---|---|
| 1 | 0:00–0:08 | A flat org chart baked into an image, with a red “image — not accessible” marker. | ”An org chart trapped in an image is invisible to screen readers. Let’s turn a spreadsheet into one that everyone can use.” | Image · Not accessible |
| 2 | 0:08–0:20 | The wizard: a CSV is uploaded; column-mapping step confirms Name and Manager. | ”Start in the wizard. Upload a CSV — or even an image or PDF to extract — then confirm which columns are the person’s name and their manager.” | Import CSV · Map columns |
| 3 | 0:20–0:32 | The editor tree-table: add a person, attach a photo, set a dotted-line relationship. | ”In the editor, add and edit people in a tree-table — contact details, a photo, a manager, and typed relationships like dotted-line or mentor. Everything auto-saves.” | Editor · Typed relationships |
| 4 | 0:32–0:46 | The preview cycles a couple of the 12 templates; then a box is dragged onto a new manager and its team moves with it. Show the keyboard hint (focus box, press M, Tab, Enter). | ”On the preview, pick from twelve accessible templates. Drag a person onto a new manager to reorganize — their whole team moves too — or do it entirely from the keyboard.” | 12 templates · Drag or keyboard to reparent |
| 5 | 0:46–0:58 | Branding: a seed color is picked; a note shows it auto-corrected to AA; live preview updates. | ”Pick one brand color. The app automatically adjusts it to guaranteed WCAG 2.1 AA contrast, so your chart is always readable — then set fonts and line styles.” | Seed color · Auto WCAG 2.1 AA contrast |
| 6 | 0:58–1:08 | The WCAG report panel shows “WCAG 2.1 AA: Pass”. Briefly Tab through boxes to show focus order. | ”The built-in WCAG report confirms the chart passes AA, and every box is reachable and announced in a logical order.” | WCAG 2.1 AA: Pass |
| 7 | 1:08–1:20 | Share dialog: a password + expiry are set; then an embed snippet. | ”Share a link — with an optional password and expiry — or embed it on your site. Anything you download or embed keeps working on its own.” | Share · Password · Embed |
| 8 | 1:20–1:30 | End card: logo, “$30/year per chart”, URL. | ”Host it for thirty dollars a year, with unlimited edits. Build a chart everyone can use.” | TheAccessibleOrgChart · $30/year · orgchart.theaccessible.org |
Voiceover transcript
An org chart trapped in an image is invisible to screen readers. Let’s turn a spreadsheet into one that everyone can use.
Start in the wizard. Upload a CSV — or even an image or PDF to extract — then confirm which columns are the person’s name and their manager.
In the editor, add and edit people in a tree-table — contact details, a photo, a manager, and typed relationships like dotted-line or mentor. Everything auto-saves.
On the preview, pick from twelve accessible templates. Drag a person onto a new manager to reorganize — their whole team moves too — or do it entirely from the keyboard.
Pick one brand color. The app automatically adjusts it to guaranteed WCAG 2.1 AA contrast, so your chart is always readable — then set fonts and line styles.
The built-in WCAG report confirms the chart passes AA, and every box is reachable and announced in a logical order.
Share a link — with an optional password and expiry — or embed it on your site. Anything you download or embed keeps working on its own.
Host it for thirty dollars a year, with unlimited edits. Build a chart everyone can use.
Accuracy notes
- The seed color is the single source of truth and is auto-corrected to AA; do not imply users hand-pick per-line colors.
- Drag-to-reparent is available on the top-down tree, radial, and civic
templates and has a keyboard path (focus box →
M→Tab→Enter); loop-creating drops are blocked. - Pricing is $30/year per chart (hosting + unlimited edits); downloaded/ embedded copies keep working regardless of the hosted period.