Our technology can only be as empathetic as we are. Which is why it’s so critical to code inclusively and advocate for all people using tech. It’s a tremendous responsibility. But it’s one that can — to some degree — be streamlined for the greater good.
There’s an opportunity to define and enforce the best practices of accessible interfaces so that all Software Engineers code with inclusivity in mind. Stephen James, Lead UX Engineer at Salesforce, is helping our teams do just that.
Developing a Drive for Inclusivity
Stephen’s curiosity for accessible design began in his early days working for marketing firms. At the time, the teams he worked with were deeply interested in SEO. An image with text that could be read by a computer would be searchable. But Stephen quickly realized that, and perhaps more importantly, an image with assistive text was also accessible for those with visual impairments.
“Serving others is part of my faith background. I also have a son with special needs, and he’s made me more passionate about being inclusive in everything I do,” Stephen shared.
For Stephen, accessibility is dependent on a universal design that gives machines or tools the intelligence to interact with people of all abilities. While there are guidelines, there’s no exhaustive checklist for building accessibly. “Making inclusive user interfaces (UIs) can be a nascent skill even for Front-End Engineers with years of experience. I recommend conceptualizing accessibility from an engineering standpoint. It’s about communicating better with code.”
How to Leverage React to Make UX More Accessible
Stephen leverages React, a JavaScript library, to build inclusive UIs. He does this through Lightning Design System for React, a project that allows the company to manage UX at scale. And he’s not alone in his pursuit.
“We take an opensource and innersource approach. I’m part of a crew of more than 75 Salesforce employees who have contributed to this project. Accessibility is baked into our design system. Donielle Berg, Sr. Accessibility Engineer at Salesforce and co-creator of the tool Color Safe, has been a particularly impactful partner. Color Safe empowers designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.”
Stephen offers the following advice to proactively incorporate accessibility in your React libraries.
1. Expand The Scope of Use Cases
There are abstract ideas of how different elements of an app should work. Anyone can follow their company’s unique set of guidelines and specs. But what sets great engineers apart is a drive to push beyond those requirements and widening the lens of potential scenarios. “What happens if a user is clicking on their mouse and typing at the same time?” he asks. “You may hope they don’t do that, but if that occurs, what will happen?”
2. Audit Your Work
VPATs are a voluntary audit that helps non-profits and government agencies assess technology for accessibility. Stephen participates with this review because it holds him accountable and provides new insights.
In addition to VPATs, he suggests incorporating internal inspections, whether formal or informal. “Our Accessibility Team has a mix of Accessibility Specialists who know the specifications, and Engineers who know how to implement to them. My coworker, JoAnne Juett, is helping write guidelines for the upcoming WCAG v3 spec as part of the W3C’s Low Vision Accessibility Taskforce.”
3. Build Scalable Components
“Within React, I can make properties required. The Engineer who’s building on my code doesn’t need to know every accessibility best practice — they can just go about their work and follow the requirements I’ve established and get most of the way there. Edge use cases can be overlooked and requirements mitigate that. For example, I was recently asked why a label was needed if placeholder text was used. In that scenario, a user with memory issues may not recall the purpose of a field after tabbing into it.” With every new use case Stephen uncovers, he can craft a solution to ensure it’s considered in the future code.
“It will be exciting to see accessibility be elevated as companies are influenced more by web components, and as more native Accessibility Object Model (AOM) gets implemented. AOM directly introduces accessibility into JavaScript, making it easier to implement an inclusive UI.”
With the right tools and best practices formally established, coding for accessibility becomes second nature.
Grow Your Accessibility Expertise
“I have the ability to step back and question the UX and the micro-interactions consumers expect,” reflected Stephen, admitting that it could sometimes be a challenge. “Those intricate details are some of the things I enjoy most.”
For those in search of their platform for change, Stephen suggests setting aside time to “dream and envision where you want to go next. Be proactive in your career and speak up when you’re interested in trying something.”
The path to making tech more inclusive may mean becoming an advocate where you currently work or finding a place that values inclusivity. “Often times accessibility is related to a company’s priorities. If a feature is used by 5% of users, then it might not make the release cut-off list, but if the component is used across many teams, the user story scales in a different way. At Salesforce, accessibility is always a priority. I can dive deep and spend time focusing on it because the work I do will impact broader teams. This means an even greater reach to our users.”
If you’re ready to share your accessibility expertise with the world, explore Salesforce roles that will amplify your impact.
