Accessibility

Accessible loading spinner requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG guidelines

1.4.1 Use of Colour

Use icons alongside error messages so that colour alone isn't used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (WCAG, 2018).

1.4.3 Contrast (Minimum)

Border colours for the drag and drop region meet a 3:1 minimum colour contrast ratio to the background (WCAG, 2018).

1.3.1, 3.3.2: Indicate Required Fields

Clearly indicate required fields with an asterisk (*) or other visual indicators, and add the required attribute to the text input. Additionally, provide textual information, such as "(required)," for screen reader users (WCAG, 2018).

2.1.1 Keyboard

All functionality of the content, including the file upload drop zone, must be operable through a keyboard interface without requiring specific timings for individual keystrokes.

Users must be able to interact with the drag-and-drop functionality using a keyboard. Navigation to the upload area can be done using the Tab key, and activation (dropping files) should be possible with Enter or Space keys.

2.4.3 Focus Order

Ensure the navigation through components and controls on the web page is logical and intuitive. The sequence of focusing (tabbing) through elements should reflect the visual order and logical flow.

2.5.7 Dragging Movements

Do not use 'drag and drop' as the sole method for uploading files. Provide additional methods, such as a 'Choose file' button, to ensure the functionality is accessible to users who cannot use drag-and-drop due to mobility impairments.

3.3.1, 3.3.3: Implement Accessible Error Messages

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. (Level A).

When displaying error messages, ensure they're clear, concise, and accessible to all users. Use the 'aria-describedby' attribute to associate error messages with the corresponding input field (Level AA) (WCAG, 2018).

3.3.2: Provide Clear Instructions

Ensure that any instructions or guidelines for filling out the text input are clear and easily understandable. This helps users avoid mistakes and better understand the expected input format. This is commonly seen in the form of hint text that appears below the labes.

4.1.2 Name, Role, Value

By building on the native HTML <input type="file"> element and enhancing it with additional interactive components like a visual <button>, the implementation needs to maintain accessible name, role, and value properties. These should be properly assigned so that assistive technologies can accurately communicate the controls to users. Ensuring that the button and the entire component are correctly labeled with ARIA attributes enhances the accessibility of the user interface.

Other useful accessibility guidance

Progressive Enhancement

Fallback Mechanisms: Design the file input component as a progressive enhancement of <input type="file" />. If advanced features fail to initialise, the component should still function and appear as a standard file input to ensure basic accessibility and functionality are maintained.

Make your uploaded file reusable if possible.

Make sure users can easily reuse a previously uploaded file within a single journey, unless doing so would be a major security or privacy concern. This is not mandatory but however it does make the experience better for users and comply with WCAG 2.2 success criterion 3.3.7 Redundant Entry.