comark ui
Esc

Accessibility

The blocks render native HTML where it exists, follow the WAI-ARIA patterns where it doesn't, and read without a script.

View as Markdown

Reads without a script

Section titled "Reads without a script"

Every block renders HTML that reads top to bottom before any script runs. A script only adds behavior: switching tabs, zooming, moving between slides, copying code. A reader with scripts off, a feed reader, or an agent fetching the page still gets every word.

Native elements first

Section titled "Native elements first"

A block uses the HTML element made for its job, so browsers and screen readers already know it:

Block Renders
Details <details> with a real <summary>, so it opens with no script
Definition lists <dl>, <dt>, and <dd>
Figure <figure> with a <figcaption>
Keys A <kbd> for each key
Mark <mark> and <sup>
Critic <ins>, <del>, and <mark>

WAI-ARIA patterns

Section titled "WAI-ARIA patterns"

When no element fits, a block follows the matching WAI-ARIA pattern. Each block's page lists its keys under Accessibility.

Block Pattern Keys
Tabs Tabs ArrowLeft, ArrowRight, Home, End
Carousel Carousel ArrowLeft, ArrowRight
Zoom Modal dialog Enter, Space, Escape, ArrowLeft, ArrowRight
Annotate's compare slider Slider Arrow keys, Home, End, PageUp (+25%), PageDown (−25%)

Status messages, such as "Copied" after a code block's copy button or a quiz's result, go in a live region, so a screen reader announces them.

Focus

Section titled "Focus"
  • An item that opens something, such as a zoomable image, is a tab stop. Focus returns to it when what it opened closes.
  • A dialog keeps focus inside it while it is open.
  • Every focusable part shows a ring in --comark-ring. Theming sets its color.

Reduced motion

Section titled "Reduced motion"

When the reader asks for reduced motion, zoom skips its opening and closing animations, and carousels scroll instantly. Tabs replace the sliding indicator with a 150 ms opacity fade. Some blocks retain other transitions; reduced motion does not disable every animation.

Section titled "Links"
  • A link card is one link named after its title, so a screen reader hears one link, not the card's whole text.
  • Links can mark external links that open in a new tab, and warns before they do.

What you write

Section titled "What you write"

The blocks can only pass on what the document gives them:

  • Give every image alt text that says what it shows. comark-linter reports images without it.
  • Give a zoomed block, a comparison, and a carousel a title, so a screen reader can name them.
  • Keep headings in order. The table of contents and heading links follow them.