Skip to content

USWDS - File input: Multiple interactions within a single button is confusing. #5616

@jaclinec

Description

@jaclinec

Summary

Having multiple interactions (i.e. "Drag file here" and "Choose from folder") within a single button may be confusing to screen reader users.

Observations

One person thought it might make more sense for “Drag file here” and “Choose from folder” to be two separate elements. She thought it was a little confusing that they were combined into one button. "That should split into two different things that you can interact with but it doesn't." She was using Fusion (screen reader + screen magnification) and said that while she herself wasn't confused by it since she has some vision, she thinks it could be confusing to people who rely heavily on feedback they get from screen readers since what its announcing is two separate interactions within one button.

Video clip 🔒

Affected user groups

  • Screen reader users

Research method

Usability testing with 5 visually impaired participants. See findings report for details.

Recommended next steps

Consider solutions to make each interaction its own element. For example, Goldman Sachs DS offers three different options for its file upload component. Input only, Input with drag and drop, and drag and drop only (which still appears to be both)

image

Metadata

Metadata

Type

No type

Projects

Status

Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions