Test Accessibility like you resize your browser

Resizing our browser window to try and spot cosmetic bugs in our apps is almost second nature, but why aren't we doing the same for Accessibility?

dev
accessibility

Published 5 years ago

2 minutes read

I was at the React JS for Girls conference in London recently and a great talk from Marcy Sutton really stood out. To me it really highlighted how we often overlook accessibility when building our web apps.

When it comes to spotting a cosmetic bug we’ve found in our app, chances are it's happening because we're doing this...

Accessibility gif tabbing through the bbc website

Resizing the window is second nature to most of us. We write some code, we check it in the browser and within a few seconds we've got this twitch going on with our mouse.

So why aren’t we doing the same with accessibility?

When was the last time you "tabbed" through your web apps, seeing how easy it was to navigate around with the keyboard alone? When was the last time you used a screen reader during development and testing of your apps?

Accessibility gif tabbing through the bbc website

Everyone on the project needs to think about accessibility, not just developers

If accessibility is left up to developers, because "they're building the app", we may as-well not have testers or anyone reviewing our apps. Make sure everyone treats and tests accessibility like they would with any other part of an app.

Highlight accessibility early in the project

When we put tasks against building apps, there’s normally a team of us estimating how long things will take. Make sure accessibility considerations are brought up and time is put against: design, implementation and testing. If it’s not being actively discussed, raise it in your next sprint retrospective.

Designers need to have a bigger say in accessibility styles

Take for example designing a button, it should no longer just be how it looks in a flat design. There needs to be thought on what happens with the other action states like "active" and "focus". As developers, if they are not supplied, ask for them! Never be forced to remove that default outline without a good alternative being supplied.

Wrapping up

  • Make it a habit (just like you do with resizing your browser window) to manually test accessibility.
  • Take advantage of using browser testing tools like axe.
  • Visit Marcy Sutton’s Empathy Driven Development project on GitHub. There are tonnes of linked resources to steer you in the right direction.
  • If you don't know much about accessibility and the impact it does when you're not considering it in your apps, there's a useful beginners guide to Accessibility worth reading.

Let's chat about your next project

Whether you need a single contractor or a full team, I collaborate with a trusted network of designers and developers. Having worked on large-scale projects, I'm equally committed to supporting businesses of all sizes, locally in Surrey, London, and internationally.

See also...

CnCNet - Website & App Development

Comprehensive design and development of responsive web and desktop apps for CnCNet, enhancing user experience and accessibility.

AR Configurator for E-Bikes

Bespoke augmented reality web configurator for E-Bikes, offering full customization options, including color choices and feature configurations.

Stock Investment App

Real-time stock investment app for web and mobile, built with TypeScript, React, and WebSockets, delivering fast, responsive, and data-driven experiences.

KickTown Football - Website

Custom-built website and API's for KickTown Football, integrating a merchandise store, booking system, and seamless user experience.

Tempest Rising - Official Website

Website development for Slipgate Ironworks' Tempest Rising, crafted to deliver a sleek, immersive experience for fans and players.

Cosmetic Visualiser - Web App

React and TypeScript-powered web app for visualizing facial cosmetic treatments, offering a cutting-edge, interactive user experience.

C&C Community Website

Command & Conquer Community platform with improved SEO, a sleek interface, and content integrations like Twitch and Steam, creating a hub for fans and creators.

React Native Health App

Custom Android and iOS health app developed with React Native and TypeScript, tailored for a health-tech startup, ensuring cross-platform compatibility.

Oriental Garden Restaurant - Website Redesign

Website redesign featuring an online ordering system that boosts sales and enhances customer engagement with a modern, intuitive interface.