Skip to content

Accessibility

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

Topicary published sites implement many WCAG 2.1 Level A and AA techniques (semantic landmarks, ARIA roles, sufficient color contrast, touch target sizing), but 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.

Keyboard navigation

Shortcut

Action

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 Tailwind's gray and inverted prose scales.

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.

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 via 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 on <html>

Not implemented

Bypass blocks (2.4.1)

Skip-to-main-content link

Not implemented

Reduced motion (2.3.3)

prefers-reduced-motion media query

Not implemented

Known limitations

  • No skip-to-main-content link — screen reader users can navigate via landmarks (<main>, <nav>) but there is no visible skip link at the top of the page.

  • No lang attribute — the HTML root element does not declare a language, which may affect screen reader pronunciation.

  • No prefers-reduced-motion support — animations (sidebar transitions, scroll spy updates) do not currently respect the reduced motion media query.

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

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?