librespeed
Accessibility: the "start/abort" button should actually be a button and not a div
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
- Open the page.
- Press
↹ Tabto 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.
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
A very first improvement would be adding a tabindex="<num>" to the button
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:
- https://briefs.video/videos/what-is-aria-even-for/
- https://css-tricks.com/focus-management-and-inert/#good-practices-for-focus-management
- https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex