This piece was written after a conversation with Matt Stow and Joss Mackison — two of Thinkmill’s most experienced engineers on the topic of accessibility.
At Thinkmill, we believe accessibility touches every facet of the design of web and mobile interfaces. By making websites and applications accessible, we can ensure all users are able to access the information and services they deserve. This includes, but is not limited to: people with colour blindness and/or vision impairments, cognitive and/or neurological impairments, and impaired motor function.
Building accessible products is a shared responsibility between our stakeholders, designers and developers. Because a good user experience benefits all users, its functionality and usability should take priority over how an interface looks. However, it can sometimes be tough to bring this perspective to clients. Still, we aim to champion accessibility within project teams, helping others to become comfortable using the tools and techniques needed to build accessible interfaces while also adopting an inclusive mindset. Check out our Accessibility page to learn how we help teams with this journey or continue reading for a quick rundown of some accessibility considerations.
Designing for assistive technologies
To design accessible experiences, we must be aware of the various input methods and assistive technologies available to our end users, such as mouth wands, eye-tracking software, screen readers, alternative keyboards, on-screen magnifiers and voice recognition. Where necessary, we’ll add (often invisible) affordances for users of assistive technologies as we know it will benefit all users, regardless of whether they have a permanent disability, a situational impairment or no restriction at all.
Many accessibility considerations relate to meeting users’ basic expectations, for example, using simple wording, ordering the interface in a logical way, highlighting where a user’s current focus is, using colour in a discernible manner, announcing additional context and sizing elements appropriately. We also strive to create lean applications since network accessibility and reliability can negatively affect accessibility and usability.
Style guides & design systems
Style guides are an excellent tool for upholding accessible designs and documenting patterns. A style guide can be abstracted into something functional, like a component library or design system that future projects can use to speed up development time and ensure consistent, accessible functionality throughout interfaces. Many accessibility considerations can be built into a component library and/or design system, including visual considerations (such as sufficient text contrast and indication of focus on interactive elements), screen reader considerations (such as the use of roles, states and landmarks), and physical considerations (such as ensuring an interface is keyboard navigable and sufficient hit area for click/press targets).
Web Content Accessibility Guidelines (WCAG)
At Thinkmill, we go beyond the WCAG 2.0 AA guidelines as a simple compliance checklist. We aim to understand how real-world users interact with our interfaces by utilising a range of accessibility tools and manual testing throughout development. Our designers and developers integrate plugins into their environments (like Figma and Storybook) and use browser extensions such as axe DevTools and WebAIM’s Wave Web Accessibility Evaluation Tool. However, automated tools generally find high-level accessibility issues only, so cross-platform, cross-browser manual testing is vital. We regularly test with screen readers such as JAWS, NVDA, VoiceOver, and TalkBack and work with accessibility consultants such as Intopia to ensure our interfaces meet our users’ needs.
Designing for different screen sizes
As a baseline, we ensure our products and services work across every screen size, from the smallest mobile to the largest desktop. We then optimise the experience based on the devices and screen sizes from which users will most likely access the application. We also group breakpoints into categories to ensure the experience is fluid and coherent between them, a feature important for users who move between devices and those who change their browser/device zoom level from the default.
Designing for native
Building accessible native mobile applications allows us to consider additional interactions to enhance the experience that aren’t readily available for web experiences. For example, we can take advantage of a swipe on the screen or the device’s physical volume controls to change a star rating component where appropriate. Of course, screen readers are heavily used by vision impaired mobile users, so we ensure they’re able to understand and navigate between all elements and screens.
Talk to us about accessibility
This post speaks to just a few areas to consider when designing an accessible product. By bringing empathy and care to product design and development, we can all benefit from better digital experiences. If you’d like to learn more about the importance of accessibility, reach out to Thinkmill today.