Some time ago, as part of my work at Webflow, I was working on the feature, that allows adding custom checkboxes and radio inputs to form elements on the designer canvas. I had many reasons why I wanted to work on this specific feature, and one of them was to promote more accessible usage of the technic that allows having custom checkboxes or radio buttons. Before adding this possibility in the Designer setting, it was still possible to do so through the custom code feature. And we wanted to provide more in-build experience + provide as default custom input, that was accessible. As the main problem I think is that folks who are creating custom inputs forget to provide UI difference between focused and un-focused states.
My product manager also had an idea to share how accessibility testing of this feature, to inspire other folks in the company to think more about this subject. One of the ways I tested for the accessibility was by using VoiceOver, and I wanted to share this experience with all the folks in the company, so I decided that I would record a video of it to share in our weekly all-hands.
Easier said than done. As VoiceOver is an output signal from the Mac, some additional steps should be taken so it will become available as the input signal, that will make it recordable.
I found a few tutorial and/or tools that were aiming to solve this problem:
- https://www.fonepaw.com/recorder/record-mac-screen.html
- SoundFlower (https://rogueamoeba.com/freebies/soundflower/, https://github.com/mattingalls/Soundflower)
- iShowU Audio Capture driver (https://gist.github.com/svinkle/2f02997652bb6271b8e22c2d127a40cc)
I used SoundFlower for my task, and it worked as expected. After the installation, there is a ReadMe.rtf file in the folder, that explains how to use it. Basically after the installation, one needs
To send the output of one application to another, simply select Soundflower as the output device within the first application and Soundflower as the input device within the second application.
While working on this post, I found that there is an even easier way to create such video, as a screen recording tool, that I am using on a daily basis – CloudApp. It allows the recording output from the different sources. To record video with VoiceOver:
- Go to System Preferences -> Accessibility -> VoiceOver. Click “Enable VoiceOver”
-
Open CloudApp and select Record
-
In the active dialog for recording from the screen by CloudApp for the sound input devices select “Built-in Microphone”
-
Record and enjoy.
One of my attempts to record such video for the simple form created in Webflow:
I still remember myself first-ever finding out that VoiceOver exists on every iPhone, so the possibility to be more empathetic and better to understand how the folks with special needs can see my project was so easily available for me. If you have never tried it, go for it 🙂
If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.
