Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility: the "start/abort" button should actually be a button and not a div #373

Open
denilsonsa opened this issue Nov 1, 2020 · 3 comments
Open

Accessibility: the "start/abort" button should actually be a button and not a div #373

denilsonsa opened this issue Nov 1, 2020 · 3 comments

Comments

@denilsonsa
Copy link

Description

The current HTML code for librespeed is not accessible. The main button (or... the only button) is currently implemented as <div onclick=""></div>. Instead, it should be a <button> or <input type="button">. Why? Because it is not focusable by keyboard, and very likely not accessible for screen readers (I don't use one, I cannot say for sure).

Steps to reproduce

  1. Open the page.
  2. Press ↹ Tab to try to focus the button and start the speed test using only your keyboard.

Expected behaviour

It should work, it should be accessible.

What happens instead

The button is not a button, so it is not focusable, so it cannot be interacted purely by keyboard.

Other remarks

There might be other accessibility issues, but I haven't investigated them.
@adolfintel
Copy link
Member

I am aware of that: the examples are not accessible at all, it's not just the button.
If you have experience with screen readers and other accessibility technologies, it would be great to add a new, accessible example

@luckydonald
Copy link

A very first improvement would be adding a tabindex="<num>" to the button

@denilsonsa
Copy link
Author

Well, adding a tabindex seems to be a bad practice in this case, not only it can mess up the tabbing order (if using a value greater than zero), but it's not even a complete solution (would still be missing the ARIA attribute role="button"). It's much better and much simpler to just replace the <div> with <button>.

References:

denilsonsa added a commit to denilsonsa/speedtest that referenced this issue Feb 27, 2021
@denilsonsa
Accessibility: using <button> instead of <div>
78ef41b 
Closes librespeed#373
@denilsonsa denilsonsa mentioned this issue Feb 27, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Accessibility: using <button> instead of <div> denilsonsa/speedtest
3 participants
@denilsonsa @luckydonald @adolfintel