Skip to content

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

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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions