Design System and UI Kits
Accessibility of a cohesive NCR white label Design System based on MUI. This design system included web and native components and patterns along with robust branding and theming capabilities that prioritized accessibility. The system was utilized by all lines of business until company changes led to a move to individual UI kits with branding and themes specific to the line of business. I have been involved with these UI Kits and discussions with the lines of business to ensure the issues identified and addressed by the design system are still identified and remediated by the UX and development teams.
Approach to Design System and UI Kit Accessibility
Design system and UI kit accessibility is an ongoing project with many facets. Below is a high-level outline of how I approach the accessibility of these systems and kits at scale.
The image above of a buttons page in Figma highlights the process our UI Kit team uses.
This process includes a to-do list on the left with accessibility issues specifically highlighted. These issues can be added by any team member and provide a quick way to review what has been completed, and what has been identified but is still pending. There is also a log of changes made and the reasoning. The actual components include chats between team members and myself on how we can address issues, with highlights or notes provided on specific components. The bottom shows an ideation frame with text length and truncation. We also utilize a UI Kit Accessibility specific chat in Slack to keep track of discussions and pin items. The decisions and next steps are then linked and documented in epics and stories in Jira to ensure visibility to other teams on current and upcoming work.
​For larger patterns that are unique to the UI Kit, additional documentation is provided in the form of screen reader output annotations, and zoom/reflow specific documentation.
​​​
​
Testing Methods
(high level and not limited to the following)
Review 40+ UI components for the following issues:
-
Touchpoints
-
Color contrast
-
Accessibility of different states and interactions
-
No use of color alone as an identifier
Advise on 10+ new patterns and components with additional detail focused on:
-
Interaction flow for keyboard users
-
Screen reader output for default and interactive states
-
Highlighting areas where implementation may cause accessibility to break
​
When working with the NCR Design System testing also extended to the development of the components. An accessibility specific storybook was built to test screen reader, keyboard, and zoom/reflow on all components. This testing was conducted on desktop web and mobile web for both Android and iOS. The Design System was also working on new mobile app libraries and testing for those was taking place on their respective Android and iOS systems. With upcoming mobile apps in the ideation phase, this testing will resume for restaurant products.
​
Documentation
​With both the design system and UI kits documentation has become critical. As an enterprise with multiple lines of business with varying products, having clear documentation around the accessibility of components and patterns has aided both UX teams and development teams in understanding some of the common issues for particular components.
UI Kit Accessibility in Action
The use of knowledge gained from working on the design system, UI Kits, and with MUI and MUI X components has led to increased productivity while optimizing accessibility.
For one of our back office products, I was able to identify that upgrading our MUI X package for data grids and date pickers would increase the accessibility of those components. I worked closely with a developer to identify all date pickers and data grids within the platform while he ensured they were updated to the new package. With this update completed on August 28th, 2024, the lighthouse accessibility scores for the platform saw an 86% decrease in pages scoring below 90.
-
Pages below a 90 on 8/24: 37
-
Pages below a 90 on 8/28: 5
While this was a huge win, we were also able to identify how other UI Kit updates could impact the scores and decrease the customization of components and pages developers needed to do once handed off by the designers. Some of those areas include:
-
Updated typography styles to better align design headings to <h1> through <h4> tags
-
Updated tabs components to increase keyboard accessibility and interaction consistency
-
Increased color contrast on many components to meet WCAG AAA standards
​
These use cases for the UI Kit Accessibility findings are just for one product, with other products starting to utilize the kit and add additional patterns and use cases for testing and documentation.
​