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:
- No screen reader shortcuts (if you use one) or other plugins etc that add shortcuts that do not normally exist in the browser.
- Keyboard only commands - if you use your mouse or another input device your run is void! **
- You can try each challenge as many times as you want and submit your best time!
- 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.
- All challenges start on the home page - and your cursor should be in the URL bar in your web browser before you start.
- 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
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
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
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!
Step 1: find the article "101 Tips For Being A Great Programmer (& Human)" - https://dev.to/emmabostian/101-tips-for-being-a-great-programmer-human-36nl
Step 2: write "hello" in the comments box at the bottom of the page (you do not need to submit it)
I couldn't find a good workaround for this one so it took me 48 seconds (and that was tabbing ridiculously fast).
Challenge 4
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:
- 9 seconds
- 14 seconds
- 48 seconds
- 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:
Article No Longer Available
So the question is "can you beat my time?" and more importantly "did this challenge make you think about your own website's accessibility?"
Top comments (8)
I was thinking about using Switch Access on Android with my volume buttons, but wow it's hard!
I feel honoured that you commented as I notice you dont comment often! π
I forgot to post the results (mainly because there were only 2 of us who did it) but now we can have a gold, silver bronze so I will get that done this week (along with an explanation of why I set the challenges if it isnβt obvious! πβ€οΈ)
Ah no problem! I should really become more active on here tbh... I'm mostly on Reddit, but dev.to really does have some cool stuff on the front page that I should be checking out more often!
Great to hear that you'll be making some sort of leaderboard β I mean, I was mainly interested in this for the challenge, but making it somewhat competitive is brilliant π
Seriously though, this is a great way to raise awareness about a11y and keyboard navigation; it's a really creative way to do it! I've recently been implementing HTML
<dialog>
s in a project of mine, and keyboard navigation is certainly something to keep in mind when making it all work β from ensuring that navigation doesn't let the user 'escape' from the dialog when they've gone past the dialog's last button onto some random thing behind the dialog, to nice things to have, such as auto-focusing the dialog's first UI control and returning focus to the original button when a dialog is closed. I'm glad that some browsers implement most of this stuff for you β just waiting until the day that the polyfills for Safari and co. are redundant!Sadly I think we will be a long time until we are polyfill free πͺ, I mean we still support IE9 here due to the number of people using screen readers who still want / have to use IE (when I say support - I mean it works and it looks ok, it isn't pixel perfect!).
A little competition goes a long way in my book, but maybe that is because I have quite a "combative" personality and I like when people challenge me (I am also quite a narcissist so I also like to win....God I am a horrible person π€£π€£)
I really should also be more active on Reddit to mirror your thoughts, I hardly go on there except for the memes (and I am getting old now so I don't understand half of them anymore π!)
If any of the instructions are not clear then let me know.
If you find a particularly cool trick to speed up one of the challenges then let me know (assuming the competitive side of you doesn't mind sharing your tips π)
Great times, yeah my number 1 I got down a long way from 9 seconds
Getting number 3 in 24 seconds I can't comprehend how you did that? well done!!
I did number 3 using
shift+tab