Skip to content

a11y: add skip-to-content link, ARIA tree roles for sidebar, and alt text for diagrams #140

@rohilsurana

Description

@rohilsurana

Problem

Several accessibility gaps across both themes:

  1. No skip-to-content link — keyboard users must tab through the entire sidebar/nav to reach content
  2. Sidebar lacks ARIA tree roles — collapsible sidebar items don't use `role="tree"`, `role="treeitem"`, or `aria-expanded`. Screen readers can't navigate the doc structure.
  3. Search result icons have no aria-labels — the document/hashtag/code icons are decorative but convey meaning (page vs heading vs API result)
  4. Mermaid diagrams have no alt text — SVG is injected via `dangerouslySetInnerHTML` without `aria-label` or `<title>` element

Suggested Fixes

  • Add a visually-hidden skip link as the first focusable element in both theme layouts
  • Add `role="tree"` to sidebar ``, `role="treeitem"` + `aria-expanded` to collapsible folders
  • Add `aria-label` to search result type icons
  • Allow a `alt` or `caption` prop on mermaid code blocks, inject as SVG `<title>`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions