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

[denilsonsa]

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]

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]

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

[denilsonsa]

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

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[denilsonsa]

Not stale. The tool is still not accessible, it still uses a <div> instead of a <button>. The PR was closed but not merged. Frankly, in those many years, that PR was likely obsolete and would require rewriting anyway.

[sstidl]

In the new design branch newdesign we use buttons.

[denilsonsa]

Great news! Although the classic one still uses a <div>:

speedtest/index-classic.html

Line 493 in 007a050

<div id="startStopBtn" onclick="startStop()"></div><br />