Upcoming Webinar: Jump Start Your Automated Testing Efforts With Record & Play Save Your Seat

Blog We love to talk!

Jul Wed

Slimming Down DoesItWorkOnEdge.com

  •  7-8-2015

Yesterday we released our new tool DoesItWorkOnEdge to the public. Aside from the normal hiccups any public release seem to have all went reasonable smooth.

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:

<p class="input-container">
  <input autofocus="autofocus" class="url" type="text" name="url" id="test-url" onkeypress="keypressed(event)" placeholder="Enter Your Url">
</p>
<p class="input-container">
  <a class="btn btn-lg btn-primary" id="start-test">Start The FREE Test Now</button>
  <a class="btn btn-lg btn-disabled" id="loading-test" style="display:none;">Loading, please wait...</a>
</p>

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 browsers internal url validation
  • removed the keypress event altogether (yea, less code!)
<form id="start-test-form">
  <p class="input-container">
    <input autofocus="autofocus" class="url" type="url" name="url" id="test-url" placeholder="Enter Your Url">
  </p>
  <p class="input-container">
    <button type="submit" class="btn btn-lg btn-primary" id="start-test">Start The FREE Test Now</button>
    <a class="btn btn-lg btn-disabled" id="loading-test" style="display:none;">Loading, please wait...</a>
  </p>
</form>

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 disable 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
<form id="start-test-form">
  <p class="input-container">
    <label for="url" class="sr-only">Please enter the url you want to test</label>
    <input class="url" type="url" name="url" id="test-url" placeholder="Enter Your Url">
  </p>
  <p class="input-container">
    <button type="submit" class="btn btn-lg btn-primary" id="start-test">Start The FREE Test Now</button>
  </p>
</form>

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!

No Comments

Leave a Reply

Your email address will not be published.