Inclusivity & Accessibility

Inclusivity & accessibility is a group sport, in that, all parties working on something should all have an input. Why? Every discipline involved has to take accountability.

When designing & developing anything there is a huge amount of value to gain from going in with an empathetic mindset. Alongside, understanding there’s a wide array of different impairments potential users can have.

There are over 2 million people in the UK with vision impairments alone!

Luckily there are a tonne of tools we can leverage to ensure we are creating exceptional experiences, for all. Going beyond just checking contrast ratios, alt tags, and descriptive links.

Figma Plugins

 

• A11y, checks color contrast adheres to WCAG within Figma
• Color Blind, helps you visualize what colours look like across an array of visual impairments
• A11y - Focus Order, allows you to create tab/focus order flow annotations, which is helpful for keyboard navigation

 

 

Playwright

playwright.dev
We can automate A LOT.
Playwright can be a great tool for this, it’s also cross-language, cross-platform & cross-browser. With SDKs across Node, Python, Java & .NET

Automation can also be run at CI/CD level, ensuring no regressions are introduced.

Though possible to retrospectively add automated tests, It’s a much better experience adding early on, as retrospectively adding can be very cumbersome.

 

 

Manual Testing

 

Putting work into the design & development isn’t enough, we need to validate those efforts and ensure effective manual testing is undertaken.

Manual testing should cover text-to-speech recognition software & screen readers. This one can be a difficult task as some of these tools (JAWS, VoiceOver to name a couple) can have quite a steep learning curve.

 

 

Chrome Extensions

 

• Chrome Lens, helps simulate visual impairments within the browser.
• WAVE, highlights visual accessibility issues within the browser.