4 speed run challenges ⌚ on DEV.TO! Can you beat my times? πŸ†πŸ† (A fun game with a serious message!)

GrahamTheDev - Apr 18 '21 - - Dev Community

A slightly less silly post today! (only slightly mind you!)

I am writing a series on accessibility on dev.to and I have recently been testing the keyboard usability of the site.

I realised I could turn this into a fun game while also hopefully giving people valuable insight into what it is like using a site with a keyboard.

This is not bashing dev.to - they are making a real effort to improve accessibility and are really responsive to suggestions, it is just a great exercise you should perform on your own applications.

On with the challenges

So there are 4 challenges, time yourself doing each of them and then leave a comment with your time for each.

After a week I will list the winners for each challenge and overall.

I will assume you are honourable and don't cheat πŸ˜€

Here are the rules:

  1. No screen reader shortcuts (if you use one) or other plugins etc that add shortcuts that do not normally exist in the browser.
  2. Keyboard only commands - if you use your mouse or another input device your run is void! **
  3. You can try each challenge as many times as you want and submit your best time!
  4. If you can't complete a challenge then you can record a Did Not Finish (DNF) and that will count as 2 minutes towards your total time.
  5. All challenges start on the home page - and your cursor should be in the URL bar in your web browser before you start.
  6. Touch screen devices are not allowed (unless they have a Bluetooth keyboard you can use) - so if you are viewing this on mobile try it when you get in front of a PC.

** If you use other assistive tech such as "Sip-Puff" or "eye-gaze technology" etc. then you can use those! The ideas is no mouse or pointer devices!

All good? Let's go!


Challenge 1

dev.to footer showing the location of the

In the footer of the site there is a link to "Forem".

The first challenge is to navigate to and click on the "Forem" link in the sentence "Built on Forem - the open source....etc" located in the footer of the site.

My best time is 9 seconds - but I did have to think about this one and I only got it right 70% of the time when I tried to repeat it!


Challenge 2

Podcast page of

This one is simple - I want you to go to the podcast list page of "Script". (The list of all their podcasts).

There are actually 2 variations of this challenge.

The "easy" challenge is for people who already follow "Script" podcasts.

The "hard" challenge is for people who do not follow "Script".

The final URL you are trying to reach is https://dev.to/scriptpodcast - but you cannot just write that into your URL bar! Play fair people πŸ˜‹

Also you have to assume that you do not know the name of any of their podcasts each run. You have to try and find them as if you have never listened to them before.

Make sure you end on the list of their podcasts.

First time this took me about a minute, but in the end I got it down to 14 seconds (on the hard version as I don't follow them πŸ˜‹)!


Challenge 3

Screenshot of the header for the article

Ok now the challenges are getting tougher. Don't forget you have to start at the home page with your focus in the URL bar!

I couldn't find a good workaround for this one so it took me 48 seconds (and that was tabbing ridiculously fast).


Challenge 4

Code newbie challenge, top right of the dev.to homepage (next column after the feed)

The final challenge

Navigate to "the code newbie challenge" home page.

Remember you can't just put the URL in, in fact in this challenge I want you to assume that you do not know it exists.

The real purpose of this challenge is to get to the top of the right hand side bar on the home page and click the link "Sign up today!".

This one took some doing as at first I thought it was impossible (you will soon see why!) but in the end I got a respectable 22 seconds.


Conclusion

So my times were:

  1. 9 seconds
  2. 14 seconds
  3. 48 seconds
  4. 22 seconds (seriously could I not get 21 seconds so I can sing "I got 21 seconds to go" in my head? 🀣🀣)

Total time 1min 33 seconds.

But that was after multiple attempts, some of them took me over a minute to complete the first time until I found better ways to do them.

Obviously this is all a bit of fun but the underlying message is a serious one. make sure your sites are easy to use with a keyboard!

Dev.to are improving accessibility rapidly, but the keyboard operability of the site is still quite difficult.

In my next article in the dev.to accessibility series I will cover how dev.to can improve the keyboard experience on the site (and other sites built with forem) very easily!

Be sure to check out the first article in the series as it may give you some ideas of what to look for on your own site and some ideas for simple fixes:

So the question is "can you beat my time?" and more importantly "did this challenge make you think about your own website's accessibility?"

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .