Primary links
Tip: if you only share one thing, share the Watch page.
Short blurb (general)
Works for Discord, Slack, email, or a generic social post.
Error summaries (focus + links): demo · article
Accessibility / reduced-motion angle
Use when you want to highlight the reduced-motion change and focus ring.
Accessibility / keyboard navigation angle
Use when you want to highlight the focus ring + Tab key behavior.
Accessibility / legibility angle
Use when you want to highlight text size, contrast, and spacing.
Accessibility / redundant encoding angle
Use when you want to highlight “don’t rely on color alone”.
Accessibility / modal dialog focus angle
Use when you want to highlight focus trapping + Escape-to-close for modals.
Accessibility / skip link angle
Use when you want to highlight “Skip to content” for keyboard users.
Accessibility / tooltip angle
Use when you want to highlight ‘don’t rely on hover alone’ for tooltips/help icons.
Accessibility / clickable div angle
Use when you want to highlight “looks like a button, but you can’t Tab to it”.
Accessibility / toggle button angle
Use when you want to highlight on/off buttons that should announce state.
Accessibility / toast notifications angle
Use when you want to highlight “Saved” / “Copied” messages that should be announced.
Accessibility / inline errors angle
Use when you want to highlight form submit errors (don’t rely on color-only borders).
Accessibility / icon-only buttons angle
Use when you want to highlight unlabeled toolbar icons (screen reader announcement).
Longer post (for forums / newsletters)
Includes context + fallback note. Edit freely.
Optional (YouTube links — secondary)
Only use as a secondary reference until logged-out playback is reliable.
If someone reports trouble, point them to /channel-hub/watch.html above.
Notes
- Breadcrumbs demo: breadcrumbs-demo.html; note.
- Primary share targets are GitLab Pages hub links (fast, no tracking, includes mirrors).
- Autoplay micro-demo variant (for quick previews): reduced-motion-demo.html?autoplay=1&fast=1.
- If you want a single clean landing page, use: watch.html.
- For verification details about YouTube playback issues, see: status page.
- Focus ring demo (keyboard Tab): focus-ring-demo.html
- Legibility demo (text size + contrast): legibility-demo.html
- Redundant encoding demo (color + shape): redundant-encoding-demo.html
- Clickable div demo (use a button): clickable-div-demo.html
- Toggle button demo (aria-pressed): toggle-button-demo.html
- Label vs placeholder demo (persistent label): placeholder-label-demo.html
- Autofill demo (autocomplete tokens): autocomplete-demo.html
- Icon-only buttons demo (aria-label): icon-only-button-demo.html
- Toast demo (aria-live): toast-demo.html
- Modal dialog focus demo (Tab + Escape): modal-demo.html
- Legibility article (text size + contrast + spacing): article-legibility.html
- Modal article (focus trap + Escape): article-modal-dialog.html
- Labels vs placeholders article: article-placeholder-label.html
- Autofill (autocomplete tokens) article: article-autocomplete.html
- Icon-only buttons article: article-icon-only-buttons.html