Accessibility work isn't sexy. It's mostly invisible, can be tricky to test, and challenging to know if/when it breaks. Ask a bunch of designers and programmers about their favorite accessibility tips and you'll hear plenty of groans and get lots of confused looks. I get it — you'd much rather perfect that beautiful CSS animation or wire up the latest JavaScript hotness.
But here's the thing: Accessibility benefits everyone.
You may not have visual impairments that make low-contrast type hard to read (yet). You may not have a motor disability that make targeting click targets tricky (yet). And you may not have memory problems that make following complex flows difficult (yet). And that's great! Give yourself a pat on the back with both of your fully-functioning hands.
I'm willing to bet, though, that you've benefited from accessibility. Ever used Siri to set a timer while your hands were covered in artisanally-ground gluten-free heritage grain flour? Ever tabbed from one field to another to ensure your cozy sweatpants arrive at the right destination in Shopify? Ever summoned dozens of Photoshop actions using just your keyboard? That, my friends, is accessibility.
Not convinced? Let's walk through some recentimprovements we made to the HEY composer.
Drag & Drop Recipients
At Basecamp, we work in 6-week cycles and tend to break that work into "Small Batch" and "Big Batch" projects. One of our Small Batch projects was to add the ability to drag & drop recipients between the To/Cc/Bcc fields in the HEY composer. It's the kind of fun, interactive stuff you can really sink your teeth into and ship quickly:
Before we even got started, however, Michael highlighted some potential accessibility issues:
There are some ARIA tools for making drag and drop accessible, but I actually think just making sure we support keyboard cut + paste for moving recipients between fields would be a reasonable alternative that will be more obvious and useful for everyone, not just people who use a screen reader.
He was 100% right. Dragging & dropping recipients made things a lot easier than deleting and re-typing, but it still didn't solve things completely. We could do better.
Copy & Paste Recipients
After shipping the drag & drop version of the composer above, we quickly dove back in. Using Michael's recommendations as a guide, we wired up the following:
Tab forward from recipient to the next recipient
Shift-Tab backwards from recipient to the previous recipient
Backspace to delete a recipient
Ctrl/Cmd + C to copy an address
Ctrl/Cmd + V to paste an address
Ctrl/Cmd + X to cut an address
Use your browser's Edit menu to cut/copy/paste
And you know what? It made the whole thing better!
There are many, many valid reasons for building accessibility into your app. You'll open your app to a wider audience. You'll be doing right by people with visual, cognitive, motor, or other challenges. You'll make your app easier to use in different ways. But even if those don't move you, make it better for you.
