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

# Accessibility

SuperDoc provides accessibility features for keyboard navigation and screen reader compatibility.

## High contrast mode

Enable high contrast for improved visibility:

```javascript theme={null}
// During initialization
const superdoc = new SuperDoc({
  selector: '#editor',
  document: 'contract.docx',
  onReady: ({ superdoc }) => {
    superdoc.setHighContrastMode(true);
  }
});

// Or after initialization
superdoc.setHighContrastMode(true);
```

## Responsive layout (WCAG AA Reflow)

SuperDoc supports [WCAG 2.1 Success Criterion 1.4.10 (Reflow)](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) through the web layout mode:

```javascript theme={null}
const superdoc = new SuperDoc({
  selector: '#editor',
  document: 'contract.docx',
  viewOptions: { layout: 'web' }
});
```

This enables:

* Content reflows to fit any viewport width (down to 320px)
* No horizontal scrolling required
* Document structure (headings, lists, tables) remains intact
* Ideal for mobile devices and responsive web applications

<Note>If you also need layout-engine-powered features such as spell check in web layout, set `layoutEngineOptions.flowMode: 'semantic'`.</Note>

## Keyboard navigation

### Toolbar navigation

Navigate the toolbar without a mouse:

* **Tab** - Move between toolbar groups (left, center, right)
* **Arrow keys** - Navigate within a group
* **Enter** - Activate button or open dropdown
* **Escape** - Close dropdowns

### Return to toolbar

Jump back to toolbar from anywhere in the document:

* **Windows**: `Ctrl + Shift + Alt + M`
* **macOS**: `Cmd + Shift + Option + M`

### Document navigation

Standard keyboard shortcuts work as expected:

* **Tab** - Move to next field/element
* **Shift+Tab** - Move to previous field/element
* **Ctrl/Cmd + Arrow keys** - Navigate by word
* **Home/End** - Beginning/end of line
* **Ctrl/Cmd + Home/End** - Beginning/end of document

## Screen reader support

### ARIA implementation

SuperDoc uses semantic ARIA roles for screen readers:

| Role          | Element           | Purpose                           |
| ------------- | ----------------- | --------------------------------- |
| `application` | Main container    | Identifies the editor application |
| `document`    | Editor area       | Document editing region           |
| `toolbar`     | Toolbar component | Formatting controls               |
| `button`      | Toolbar buttons   | Individual controls               |
| `menuitem`    | Dropdown items    | Menu options                      |
| `menu`        | Dropdowns         | Option containers                 |
| `separator`   | Dividers          | Visual/logical separation         |

### ARIA attributes

* **aria-label** - Describes the current focused item
* **aria-description** - Provides additional context
* **aria-pressed** - Indicates toggle button state
* **aria-expanded** - Shows dropdown state

## Semantic HTML

Tables and lists use standard HTML elements that are accessible by default:

```html theme={null}
<!-- Tables with proper headers -->
<table>
  <thead>
    <tr>
      <th>Column Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data Cell</td>
    </tr>
  </tbody>
</table>

<!-- Semantic lists -->
<ul>
  <li>List item with meaning</li>
</ul>
```

## Focus management

* Focus indicators visible on all interactive elements
* Tab order follows logical document flow
* Focus trapped in modals/dropdowns when open
* Focus returns to trigger element when modals close

## Known limitations

* Complex tables may require additional navigation
* Some advanced formatting options only accessible via toolbar
* Custom keyboard shortcuts not yet configurable

## Testing your implementation

```javascript theme={null}
// Toggle high contrast mode
superdoc.setHighContrastMode(true);

// Ensure toolbar is keyboard accessible
document.querySelector('.super-toolbar').setAttribute('tabindex', '0');
```

## Browser compatibility

Accessibility features tested with:

* NVDA (Windows)
* JAWS (Windows)
* VoiceOver (macOS)
* Chrome, Firefox, Safari, Edge (latest versions)