question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accessibility improvement

See original GitHub issue

I have noticed that when using useDropzone the root element don’t get any role or aria-label.

Because the root element gets to be focusable and essentially works as a button, it could be a good idea to use the role attribute to make screenreaders read it out as a button.

That together with a label prop in useDropzone that set a aria-label on the root element so it will be read out like a button action.

In short. Add role=button and aria-label in root props

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9

github_iconTop GitHub Comments

1reaction
qpidocommented, Feb 14, 2022

Suggestion for improvement: do not add the role by default if setting ‘noClick: true’. I’m using the whole viewport as a drop area so imho the role doesnt make sense in this case. What do you think?

0reactions
rolandjitsucommented, Feb 14, 2022

Suggestion for improvement: do not add the role by default if setting ‘noClick: true’. I’m using the whole viewport as a drop area so imho the role doesnt make sense in this case. What do you think?

That makes sense.

Read more comments on GitHub >

github_iconTop Results From Across the Web

10 Ways to Improve Web Accessibility - StarDust Testing
10 Tips for Web Accessibility · 2. Structure and organize with headers · 3. Assign alt tags for images · 4. Use descriptive...
Read more >
15 Ways to Improve Web Accessibility - Monsido
15 Practical Ways to Improve Web Accessibility · Include captions and text transcripts · Use proper color contrast ratios · Remove flickering ...
Read more >
Ten Guidelines To Improve The Usability And Accessibility Of ...
Ten Guidelines To Improve The Usability And Accessibility Of Your Site · 1. Include a Site Map · 2. Use Clear and Consistent...
Read more >
Accessibility Improvement Program | Eugene, OR Website
Information on assistance from City of Eugene for very low-income homeowners and tenants with disabilities for help to make accessibility improvements to ...
Read more >
30 Web Accessibility Tips | AccessComputing
These web accessibility tips can be used by web designers, developers, or content authors to guide ... Have suggestions for how this list...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found