I was tasked to lead a project with the mission to embed accessibility into the LexisNexis Design System. I thought it might be helpful to share my experience here.
1. Design Systems: the perfect opportunity for accessibility integration
Embedding Accessibility into a product development circle is the right thing to do but the hard part is doing it. However, with a well-built design system, you can leverage the guidelines to support a large product portfolio and you can harness the power of your rigorously tested WCAG compliant components. To help our organisation realise the benefits of accessible design, below is the process chart for factoring accessibility into the entire product development lifecycle, starting with Universal Design (Customer Expectations), to prototyping, roadmap planning, and finally deployment (Customer Satisfaction). It is effectively a model that focuses on listening to our customers and then applies what we have learnt to deliver results which exceed their expectations. The priority chart is also particularly useful in terms of product roadmap planning and budgeting the work for a large organisation.
2. Design Systems: accessibility should always be considered as part of a great user experience
Creating a Design System requires an understanding of the concept of accessibility at the broader organization. The model of having a single accessibility user experience team simply cannot scale. Every designer’s work impacts accessibility. The same applies to every developer and decisions from editorial staff, product owners and third party suppliers also play a critical role. As a result, the system needs to include concepts from the fundamental aspects of embedding an inclusive mindset to building digital products from the start. For our design system, the reusable design solutions are broken down into five distinct levels using Atomic Design Methodology, including atoms, molecules, organisms, templates and pages. We ensure that all components are created with accessibility in mind. To use the design of “Buttons” presented in our library as an example. We first checked the contrast ratio, once we knew it passes AA standards for colour contrast, then we moved on and added requirements for accessibility such as keyboard support and development implementation note for screen readers. Most of our references are linked to the WCAG 2.1 Guidelines.
3. Design Systems: a useful place to help people learn the basics of accessibility
The Design System is used by all agile teams across the globe but clearly it can be quite challenging and time consuming for everyone to learn everything, as each team has their own speciality area. While most people are working on online platforms, we have teams in charge of e-books, desktop software, mobile apps, dealing with pdf delivery, newsletters and marketing materials. To equip all stakeholders with better information, apart from adding accessibility notes for each component, I also provided sections for product types and some basic but useful accessibility concepts, such as defining a VPAT, legal compliance, company policy, training, testing tools, accessibility checklist and WCAG reference links. I found that this approach is beneficial to information transparency and offers a simple way for people to quickly access what they need in one place.
Finally, to share my favorite quote in user experience, in regards to accessibility
“If you think good design is expensive, you should look at the cost of bad design.” — Dr. Ralf Speth, Chief Executive Officer, Jaguar Land Rover
