Discovering Accessibility in Design

Right now, maybe you're sitting comfortably with your laptop or phone. How would it feel if you had limited reach with your hands? A sore back that gets fatigued really quickly? Limited vision? Would you have the same experience as you do now?

Earlier this year, I attended a meetup at Wealthsimple, in collaboration with Fable Tech Labs - and boy, did it change my view on accessibility. The event’s panellists emphasized that accessibility is not just about storefronts, but also matters in the digital space. This article will cover my observations and learning as a specialist in human-centric design.

The evening started with one of my favourite parts - plenty of food and drink.

I always document before meals 😏📱

While munching away, I met Greg who was doing Development for the Inclusive Design Research Centre (IDRC) at OCAD University. As an OCAD alumnus myself, this discipline was new to me, so I asked him to define inclusiveness.

Inclusive Design is design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference.

- IRDC

For instance, a web page might let users change font size, button size, and colour. Options like these enhances the user experience, but can also help you acquire a larger customer base. Here is an interesting video that explains 5 tips on how to integrate accessibility and design.

There are no average end users, so good design is flexible design.

- Jutta Treviranus, Director of IDRC at OCAD University

After the networking session, the presentation started with an intro to accessibility by a specialist, followed by a round-table discussion. Samuel Proulx, who gave the inspirational intro, got me thinking - why don’t we design more products with accessibility in mind? During the presentation, I noticed he had an earbud and was holding his phone in what looked like a constant scrolling motion. I asked about it after the presentation. He replied that his whole presentation was on his phone and whenever he scrolls, the assistive software reads 2x faster, letting him hear before presenting.

Thanks to the ability to bank, shop and do business online, blind people today have more independence than we ever have.

- Samuel Proulx

Samuel is an Accessibility Tester and also well versed in software development. He mentioned the 2 platforms that integrate accessibility really well in building websites are Drupal and Wordpress. Both provide great resources and community for developers to access and build inclusive web products. Kudos to Drupal for committing their features to comply with World Wide Web Consortium (W3C) guidelines: WCAG 2.0 and ATAG 2.0.

When building custom web apps, React also provides an excellent set of guidelines to ensure everything is up to code. There is a suite of tools like react-axe and ESLint that will make recommendations to enable your team to build better accessibility features into your UI. We're planning a follow-up post on accessibility in React web applications - stay tuned!

The floor was busy after the talk but I managed to squeeze in to speak with one of the panellists, Martin Courcelles. Martin works for OLG as a Senior Accessibility Technology Specialist. I had many burning questions and Martin was kind enough to answer all of them.

Here are just a few:

Can you show me your braille display?

He showed me his braille reader and explained how he uses it day-to-day. The reader can connect to both Android and iOS devices, and lets users access their devices with electronic braille.

braille reader, android device and iOS device

Refreshabraille 18 connects to both iOS and Android devices

What are the most common issues when you test websites’ accessibility?

The 2 most common issues are poorly-labelled images and buttons. Image labels are often random or non-descriptive - for example, the file name generated by the camera. His greatest pet peeve is automatic carousels that can’t be paused. The lack of control is frustrating when using a screen reader.

Example of a poorly named image file, and a well named image file

What is the future of assistive technology?

Martin sees big things coming from voice recognition - a recent phenomenon that's quite accessible because it doesn’t require sight or physical interaction to use a product or service.

Martin suggested that I turn on accessibility mode on my iOS device to experience it first-hand. The next morning, I navigated my phone with my eyes closed and experienced a whole new design behaviour. On every new page I visit, my iPhone will notify me of the header and read every line I tap. Tap once to select, double tap to activate the button, swipe right to go to the next line, swipe left to go back a line, slide one finger from top to button and hear what buttons or headers are available on the page.

To access this page on your iOS device. Go to Settings > General > Accessibility

I think the following quote from the talk sums up what accessibility can do for your future products:

Everybody works with a device differently regardless if you have a disability or not. So you know when you make a product accessible, it generally is a better product.

-Ka Yat Li, Accessibility and Usability Consultant

Bonus: Have you tried Seeing AI? Martin suggested I try it, as artificial intelligence is also a great assistive technology. Here are some shots around the office. I’d say it’s quite accurate!