![Cover image for Quick update: Building a disability simulator [WIP]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffd2i353x9m2b2welil2k.jpg)
Super quick post as this is a work in progress, but here are a couple of fiddles for a disability simulator I am building.
Loads of redundant code to refactor (as is the case with a lot of my posts at the moment! I am very much in a "prototyping" phase at the moment!) but some of the techniques used my be useful such as replacing a mouse cursor and simulating click events in the Parkinson's disease simulator, or applying colour filters in the colour blindness / vision impairment simulator.
Loads left to do but with two 4 day work weeks here in the UK (as we close for Good Friday and have a bank holiday on Monday) I realised I probably wasn't going to get any posts out if I didn't release what I have been working on, as I have several posts "in progress" and none finished! (yeah, still not got my writing schedule quite right yet 🤣🤣)
Anyway enough rambling - have a play with the following, see what you think (only tested in chrome so results may vary in other browsers!)
Simulating Parkinson's Disease / tremors
For some reason this doesn't perform well in a fiddle, so if it is a bit laggy for you my apologies!
See how frustrating small tap targets can be? This is why WCAG recommends a minimum 48 x 48 size tap target.
Oh at the moment this one is easy to cheat too so if you do try it and want to share your Attempts / Successes ratio in the comments then we will do the honour system!
P.s. this only works with a mouse in case you are on mobile 😜😂
(top tip - if you move the cursor out of the fiddle to the left it won't be visible and distracting!)
Simulating Vision Impairments
Simple stuff at this stage, tunnel vision, blurry vision, sunlight as the main 3 and then all the variations of colour blindness.
The sunlight one is particularly interesting as it really hits home why minimum contrast ratios are required in WCAG!
Conclusion
As you can see, a looooooong way to go but some of the more interesting challenges already tackled.
I am hoping to include a lot more in the final product including:
- multiple vision impairments such as Glaucoma , macular degeneration etc.
- Cortical/cerebral visual impairment - makes things appear all swirly and abstract - leading child blindness cause
- light sensitivity (one I have never seen before) to highlight bright spots on a screen that may be unsettling for people with light sensitivity
- small vocabulary - jumbling words that people with learning disabilities may not understand to leave only simple words readable.
- dyslexia - jumbling letters etc.
- variations on the "tremors" simulator for people with muscle spasm impairments etc.
- movement sensitivity such as ADHD, vestibular disorders, paranoia etc.
I will do a full write up when it is more complete and cleaned up as to how I achieved each effect and the "gotchyas" I came across!
Top comments (16)
Nice that you're doing this. :) Personally, I'm especially glad to see there's a minimum contrast recommendation.
At the time I'm writing this:
The vision impairment simulator barely works in Firefox. Tunnel vision works, but the others just make the whole area white. Reset also makes the whole area white. Switching to one of the code tabs and back makes an effective reset.
I guess it will be a simple fix, Firefox might handle
filter: brightnessdifferently as I use that as a reset.Thanks for letting me know as although this will be a chrome plugin I might as well fix that in case I release for Firefox too! ❤️
My best score in the "tremors simulator" is 42 attempts to 13 clicks - can you do better?
cheating I can do more clicks than attempts :p
dev-to-uploads.s3.amazonaws.com/up...
Ok I haven't managed to do that, i can only get level, so I will withdraw the honour system, high score! 🤣
You can tab to it and just hold enter 😉
But that doesn't really feel in the spirit of things
Yeah that was the cheat, you can also cheat with the mouse as when the “actual” hidden cursor is over the item you can see a hover effect and I cannot for the life of me get it to stop the propogation of the actual mouse event at the moment without an error.
A couple of edits to the html and css will fix that
Thanks for that but that wasn't the issue I had (although it makes the game more fair now! 🤣)
The problem is that the hidden cursor (the actual mouse position) is still clicking as well as my fake click. If you position the shaky cursor off to the left 50px and up about 50px you will still click the button.
However I can't stop that as everything I have tried either cause a stack size error or doesn't work?
The idea of this ultimately is to run on any page and so that one is an annoying one to fix!
I made 26 out of 105 attempts and now I have a headache ...
dev-to-uploads.s3.amazonaws.com/up...
This is so awesome.
Thanks Neha, eagerly awaiting your next interview questions instalment! 😁😁
Actually, I started something new today.
a11ytips.dev/interviews/
Let me know your thoughts
Awesome idea, I will have a proper look over weekend but the concept is great!
Also never checked your site out so will have a proper look around that too when get chance! 😍
This is awesome! I had 84 attempts for 20 clicks. Very frustrating and drives home the necessity of large buttons. Can't wait to see your finished product!
Thanks! Next instalment due early next week, hopefully you will find that one less frustrating but still useful. 😋