File Uploader accessibility

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.

1<uc-file-uploader-regular
2  ctx-name="my-uploader"
3  class="uc-contrast"
4></uc-file-uploader-regular>
5<uc-config ctx-name="my-uploader" pubkey="demopublickey"></uc-config>

Custom Themes

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

1.my-high-contrast-theme {
2  --uc-background-color: #000;
3  --uc-text-color: #fff;
4  --uc-border-color: #FFD700;
5}
1<uc-file-uploader-regular
2  ctx-name="my-uploader"
3  class="my-high-contrast-theme"
4></uc-file-uploader-regular>
5<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:

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

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

1html {
2  font-size: 16px;
3  --base-scale-font-size: 1;
4  --base-font-size: calc(1em * var(--base-scale-font-size));
5}
6
7:where(.a11y-font-size) {
8  --uc-font-size: var(--base-font-size);
9  --uc-simple-btn-font-size: var(--base-font-size);
10}

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 from our blog.