Skip to content

Accessibility

What Topicary published sites support for accessibility, and known limitations.

Topicary published sites implement many WCAG (Web Content Accessibility Guidelines) 2.1 Level A and AA techniques, including semantic landmarks, ARIA (Accessible Rich Internet Applications) roles, sufficient color contrast, and touch target sizing. However, the sites have not undergone a formal third-party WCAG conformance audit. The features below describe what is currently implemented, not a certified conformance level.

Semantic HTML

Published sites use semantic HTML5 elements:

Element

Usage

WCAG Benefit

<nav>

Sidebar navigation

Landmark navigation for screen readers

<main>

Primary content area

Skip-to-content landmark

<article>

Page content

Distinct content region

<aside>

Table of contents and sidebar

Complementary landmark

This structure allows screen readers to navigate between page regions using landmark shortcuts.

ARIA attributes

Interactive components include ARIA attributes for assistive technology:

Component

ARIA Implementation

Search

role="combobox" with aria-expanded, aria-autocomplete="list", and aria-controls linking to the results list. Results use role="listbox" with role="option" on each item.

Dark mode toggle

aria-label updates dynamically ("Switch to dark mode" / "Switch to light mode") and aria-pressed reflects the current state.

Feedback widget

Buttons have aria-label ("Yes, this was helpful" / "No, this was not helpful"). Feedback messages use aria-live="polite" to announce changes to screen readers.

AI chat widget

Chat container uses role="log" with aria-live="polite". Input has aria-label="Ask a question". Loading indicator uses aria-label="Generating response".

Navigation

Active page uses aria-current="page". Decorative icons use aria-hidden="true".

Code group tabs

Tabs use aria-selected to indicate the active language.

Skip to content

Each page starts with a Skip to content link, hidden until it receives keyboard focus. Pressing Tab as the page loads reveals it; activating it jumps focus past the sidebar navigation to the <main> content region, so keyboard and screen reader users can bypass the repeated navigation.

Keyboard navigation

Shortcut

Action

Tab (on load)

Reveals the "Skip to content" link

Cmd+K / Ctrl+K

Focuses the search input from anywhere on the page

Enter / Space

Activates code copy buttons and code group tabs

Type to filter

Search combobox supports typing to filter, with arrow key navigation (implied by combobox role)

Tab

Navigate between heading links in the table of contents (standard anchor links)

Dark mode

Dark mode uses Tailwind's .dark class variant. The reader's preference is stored in the browser and applied before the page renders, preventing a flash of the wrong theme. Both light and dark themes provide sufficient text contrast using predefined color scales designed for sufficient contrast.

Touch targets

All interactive elements (buttons, links, navigation items) have a minimum height of 44px, following Apple's Human Interface Guidelines for touch target sizing.

Tables

Tables that exceed the viewport width scroll horizontally instead of breaking the page layout. On iOS, momentum scrolling (-webkit-overflow-scrolling: touch) provides a native feel.

Language declaration

Published pages carry a lang attribute set from the site's locale (defaulting to en), so screen readers can select the correct pronunciation and voice.

Reduced motion

Animations and transitions respect the prefers-reduced-motion: reduce media query. When a reader has reduced motion enabled in their operating system, sidebar transitions, scroll animations, and other motion are neutralized.

Color usage

Status feedback (such as the feedback widget confirmation) uses text labels alongside color, not color alone. Diff views in the editor use color plus text indicators (+, −, ~) to distinguish added, removed, and modified content.

WCAG techniques summary

WCAG Technique

Implementation

Status

Semantic landmarks (1.3.1)

<nav>, <main>, <article>, <aside>

Implemented

ARIA roles and states (4.1.2)

Combobox, listbox, live regions, pressed states

Implemented

Keyboard accessible (2.1.1)

All interactive elements reachable through keyboard

Implemented

Color not sole indicator (1.4.1)

Text labels alongside color for status feedback

Implemented

Sufficient contrast (1.4.3)

Tailwind gray/prose scales in light and dark modes

Implemented

Target size (2.5.5)

44px minimum touch targets

Implemented

Language of page (3.1.1)

lang attribute set from the site locale

Implemented

Bypass blocks (2.4.1)

Skip-to-content link before the navigation

Implemented

Reduced motion (2.3.3)

prefers-reduced-motion: reduce media query

Implemented

Known limitations

  • No formal WCAG conformance claim: the features listed above are implemented but have not been audited against a specific WCAG conformance level.

  • lang on the content wrapper, not <html>: the language is declared on the main content wrapper rather than the document root. It informs assistive technology but is not placed on the <html> element.

See also

  • Published site features: full list of navigation, search, and display features covered by accessibility support

  • Keyboard shortcuts: editor and workspace shortcuts that complement published site keyboard navigation

  • Add custom CSS: use custom CSS to further improve contrast, spacing, or touch target sizing

Was this page helpful?