Yesterday we released our new tool DoesItWorkOnEdge to the public. Aside from the normal hiccups, any public release seems to have all gone reasonably smoothly.

Still, 2 things for potential improvements have been pointed out to us:

• @jlbruno tweeted us about being unable to use the tool without touching the mouse
• Christian Heilmann pointed out that our solution is unnecessary complex and does not work very well with screen readers

Of course, we want to provide a great experience to our users so we sat down to address these issues and improve the code. The original code looked like this:

Start The FREE Test Now Loading, please wait…

Let us address the points one by one.

First we modified the page so that it is usable without ever touching the mouse. To do this we:

• wrapped the code in a form tag and changed the link that looks like a button to an actual button element
• removed the click handler and used a submit handler on the form instead
• changed the input type to URL to leverage the browser’s internal URL validation
• removed the keypress event altogether (yea, less code!)

Start The FREE Test Now Loading, please wait…

Much better but still not quite there yet! We can simplify our code even more by:

• removing the second (and useless) link element and instead disabling the actual button to indicate the loading event
• adding a label to the Url input element for screen reader users (source)
• removed the autofocus attribute as we can now use the tab key to switch to the element

Please enter the url you want to test

Start The FREE Test Now

Better Solution?

Looking back at the modification we have improved the tool quite a bit. For one we have reduced the code we need to maintain and offloaded some work to the browser (validating URLs). Of course, our modification will work on screen readers and Microsoft Edge. Trust me, I’ve checked!

Thanks to @jlbruno and Christian Heilmann!