> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Accessibility

> Improve your Rocket.new site with WCAG 2.1 AA compliance - alt text, ARIA labels, keyboard navigation, and contrast fixes.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

<Frame caption="Video walkthrough of accessibility features in Rocket">
  <iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/EUBTdbIDhsQ" title="Accessibility" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

About 95% of websites fail basic accessibility checks ([WebAIM Million report, 2025](https://webaim.org/projects/million/)). Accessible sites also rank better in search engines because they use semantic HTML that crawlers understand, which directly supports your [SEO efforts](/build/polish/seo).

Rocket generates reasonable code by default, but you can ask it to go further with ARIA labels, alt text, keyboard navigation, and contrast fixes.

## What Rocket includes by default

Every Rocket site starts with a reasonable baseline:

* Semantic HTML elements (`nav`, `main`, `section`, `article`)
* Basic heading hierarchy
* Standard form labels
* Responsive layouts

## What you can ask Rocket to improve

Tell Rocket in chat what to improve. Below are the most common requests.

### Alt text for images

Descriptive alt text lets screen reader users understand images. Ask Rocket to add it across your site.

```plaintext wrap theme={null}
Add descriptive alt text to all images on my site. Make them meaningful for screen reader users.
```

### ARIA labels and roles

<Tooltip headline="ARIA" tip="Accessible Rich Internet Applications: a set of HTML attributes that tell assistive technology what interactive elements do and how they behave.">ARIA</Tooltip> attributes tell assistive technology what interactive elements do. Ask Rocket to label buttons, links, form fields, and navigation.

```plaintext wrap theme={null}
Add ARIA labels to all interactive elements. Make sure buttons, links, and form fields are properly labeled for screen readers.
```

### Keyboard navigation

Some visitors navigate with a keyboard instead of a mouse. Ask Rocket to make every interactive element reachable with Tab and add visible focus indicators.

```plaintext wrap theme={null}
Improve keyboard navigation on my site. Add visible focus indicators and make sure all interactive elements are reachable with Tab.
```

### Color contrast

Low contrast makes text hard to read for people with low vision. Ask Rocket to check and fix contrast issues against <Tooltip headline="WCAG AA" tip="Web Content Accessibility Guidelines level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.">WCAG AA</Tooltip> thresholds.

```plaintext wrap theme={null}
Check my site for color contrast issues and fix any text that does not meet WCAG AA contrast ratios.
```

### Skip navigation links

A skip-to-content link lets keyboard users jump past repeated navigation to the main content.

```plaintext wrap theme={null}
Add a skip-to-main-content link at the top of every page for keyboard navigation.
```

### Accessibility statement

An accessibility statement documents your compliance efforts. Some organizations require it for procurement and legal reviews. You may also want to pair this with a [privacy policy](/build/polish/compliance) to cover both legal areas.

```plaintext wrap theme={null}
Generate an accessibility statement page for my site documenting our WCAG 2.1 AA compliance efforts.
```

## Commands

Use these slash commands from chat to audit and improve accessibility. You can find the full list of available commands in the [commands reference](/build/editor/commands).

<Tabs>
  <Tab title="Audit">
    ### /Generate Accessibility Report

    Generate a <Tooltip headline="WCAG 2.1 AA" tip="The mid-level conformance standard of the Web Content Accessibility Guidelines, covering perceivable, operable, understandable, and robust criteria.">WCAG 2.1 AA</Tooltip> compliance report documenting your site's current accessibility status. Useful for enterprise procurement, ADA audits, and internal compliance reviews.

    **Examples:**

    * `/Generate Accessibility Report`
    * `/Generate Accessibility Report for dashboard`
  </Tab>

  <Tab title="Fix">
    ### /Improve Accessibility Audit

    Run a full WCAG 2.1 AA audit and auto-fix issues across your codebase. Rocket fixes missing alt text, contrast problems, heading hierarchy, and ARIA attributes.

    **Examples:**

    * `/Improve Accessibility Audit`
    * `/Improve Accessibility Audit for forms and navigation`
  </Tab>
</Tabs>

<Note>
  In the US alone, over 5,000 digital accessibility lawsuits were filed in 2025 ([UsableNet year-end report](https://blog.usablenet.com/ada-web-lawsuit-trends-2026)). Proactive auditing reduces legal risk.
</Note>

<Divider />

## What's next?

<CardGroup cols={2}>
  <Card title="SEO & discoverability" icon="magnifying-glass" href="/build/polish/seo">
    Semantic, accessible HTML also improves your search rankings.
  </Card>

  <Card title="Compliance & privacy" icon="shield-check" href="/build/polish/compliance">
    Pair accessibility with GDPR and CCPA compliance for full legal coverage.
  </Card>

  <Card title="Launch your app" icon="desktop" href="/build/launch-web/launch-your-site">
    Publish your accessible site to a live URL.
  </Card>
</CardGroup>
