Accessibility: make the interface navigable by the keyboard

[denilsonsa]

The entire UI is built using a single SVG image. Although it looks neat, it is currently impossible to use with the keyboard (try pressing ↹ Tab). Additionally, the interface is certainly not accessible to users with screen readers.

There are two initial solutions: (pick one)

• Add tabindex to the relevant SVG elements.
• Or put the relevant elements inside an <a xlink:href="…">…</a> element.

I've tried implementing the second solution, and here's an incomplete patch:

--- app.svg.bak 2023-10-31 05:44:35.000000000 +0100
+++ app.svg     2023-11-29 02:09:31.963000681 +0100
@@ -201,7 +201,7 @@
                <circle cx="50" cy="50" r="6.79" />
                <circle cx="70.36" cy="50" r="6.79" />
        </symbol>
-       <symbol id="playButton" style="fill: #eaeaea" viewBox="0 0 191.255 191.255">
+       <symbol id="playButton" style="fill: #eaeaea" viewBox="0 0 180 90">
                <rect width="180" height="90" rx="10" ry="10" class="startButton" />
                <text class="buttonTxt" x="90" y="60">Start</text>
        </symbol>
@@ -375,12 +375,18 @@
                                        </use>
                                        <use id="nightmode"  class="darkmode" onclick="toggleSkin()" xlink:href="#dark" x="10" y="25" width="30" height="30"></use>
                                        <use id="daymode"  class="darkmode" onclick="toggleSkin()" xlink:href="#light" x="10" y="25" width="30" height="30"></use>
-                                       <use id="startButtonDesk" class="startButton" xlink:href="#playButton" x="125" y="300.6" width="50.2" height="50.2">
+                                       <a id="startButtonDesk" xlink:href="javascript:void(0)">
+                                               <rect fill="none" stroke="none" x="125" y="300.6" width="50" height="25"/>
+                                               <use class="startButton" xlink:href="#playButton" x="125" y="300.6" width="50" height="25">
                                                <title id="title1">Click here to Run a Speed Test! Or Press "Enter"</title>
                                        </use>
-                                       <use id="settingsDesk" class="Startsettings" xlink:href="#settings" x="100" y="260" width="100" height="40">
+                                       </a>
+                                       <a id="settingsDesk" xlink:href="javascript:void(0)">
+                                               <rect fill="none" stroke="none" x="100" y="260" width="100" height="40"/>
+                                               <use class="Startsettings" xlink:href="#settings" x="100" y="260" width="100" height="40">
                                                <title id="title1">Options</title>
                                        </use>
+                                       </a>
                                        <use class="Desktop" id="ipDesk" xlink:href="#YourIP" x="7" y="70"></use>
                                </g>
                        </svg>

It still doesn't work correctly, but I can't investigate it right now. I had to add a dummy <rect> element so the browser would know the dimensions and the position of the anchor. (Apparently the browser can't figure it out from the <use> element.)

Although incomplete and non-working, I hope this patch can be a starting point.

You can see an example of an SVG image that is completely navigable by keyboard on my own personal website: https://denilson.sa.nom.br/

---

Making it accessible by keyboard is only a fraction of making it fully accessible. I don't have enough experience with that, I'm sorry I can't help you further. I know it is related to adding ARIA attributes and a few other guidelines, but someone else can explain it better than me.

[openspeedtest]

Already on my to-do list, I may rework the entire UI in the next major release. However, it will take some time as I am currently busy with many other tasks. I will revisit this later.