> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://uploadcare.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://uploadcare.com/docs/_mcp/server.

# File Uploader accessibility

> File Uploader provides accessibility features such as keyboard navigation, screen reader support, high contrast modes, and font selection.

Accessibility is a crucial feature of any modern product.
It ensures that people with disabilities can easily use the tool,
making it inclusive and functional for everyone.
Below is an enhanced version of the accessibility guidelines
for File Uploader by Uploadcare, focusing on keyboard navigation,
screen reader support, high contrast modes, and font choices.

## Accessibility features

### Keyboard navigation

Provides comprehensive keyboard accessibility, allowing all controls to be
operated via keyboard shortcuts. This ensures the tool is entirely usable
for individuals with motor disabilities or those who prefer not to use
a mouse and permits, for example, use the following:

* **Tab** to move between interface elements.
* **Enter** or **Space** to activate buttons or upload actions.
* **Esc** to exit modals or dialogs.

### Screen reader/voice over support

The File Uploader integrates well with screen readers (such as JAWS, NVDA, or VoiceOver).
Interactive elements are assigned aria-labels and roles, making it easier for visually
impaired users to understand the context and functionality.
For example, progress indicators during file uploads are accessible via voice feedback.

### High contrast and color customization

Visual contrast is essential for users with low vision.
The File Uploader provides a default `.uc-contrast` mode,
which enhances readability by boosting contrast between text and backgrounds.

```html
<uc-file-uploader-regular
  ctx-name="my-uploader"
  class="uc-contrast"
></uc-file-uploader-regular>
<uc-config ctx-name="my-uploader" pubkey="demopublickey"></uc-config>
```

#### Custom Themes

Developers can override the default with their own high-contrast themes:

```css
.my-high-contrast-theme {
  --uc-background-color: #000;
  --uc-text-color: #fff;
  --uc-border-color: #FFD700;
}
```

```html
<uc-file-uploader-regular
  ctx-name="my-uploader"
  class="my-high-contrast-theme"
></uc-file-uploader-regular>
<uc-config ctx-name="my-uploader" pubkey="demopublickey"></uc-config>
```

This flexibility ensures that each service can align with its brand
identity while maintaining accessibility.

### Fonts

When designing accessible digital products, font choice is critical, especially
for users with dyslexia, a learning disorder that affects reading ability.
Dyslexia-friendly fonts, such as OpenDyslexic, help reduce reading errors by
using heavier letterforms and wider spacing. File Loader allows you to use
these fonts by customizing the CSS:

```css
:where(.a11y-dyslexia-friendly-fonts) {
  --uc-font-family: 'OpenDyslexic', sans-serif;
}
```

Additionally, you can enable font size scaling to suit individual user needs:

```css
html {
  font-size: 16px;
  --base-scale-font-size: 1;
  --base-font-size: calc(1em * var(--base-scale-font-size));
}

:where(.a11y-font-size) {
  --uc-font-size: var(--base-font-size);
  --uc-simple-btn-font-size: var(--base-font-size);
}
```

Adjust the `--base-scale-font-size` value to increase text size as required.

### Compliance with WCAG

The File Uploader aligns with Web Content Accessibility Guidelines (WCAG)
to ensure that all users, regardless of disability, can access and use its
features. Regular compliance testing ensures ongoing accessibility improvements.
By focusing on these principles, we strive to make the File Uploader an inclusive
tool that meets the diverse needs of all users.

Check out more details in [Building an accessible file uploader](https://uploadcare.com/blog/file-uploader-accessibility/)
from our blog.