Earlier this year, Discover participated as a sponsor in the FINOS Global Accessibility Awareness Day Hackathon. Discover's Innovation Accelerator Team prepared to make the company's first open source contribution by building an application that would form the basis of one of the hackathon challenges - The Accessibility Theme Builder. This post highlights how this open source tool can greatly improve the experience of designers, developers, and their collaboration, at the same time ensuring compliance to important Accesibility standards.
What is the Theme Builder?
The Accessibility Theme Builder is a tool that builds in accessibility to design systems in an effortless manner for designers and developers. It allows a designer to customize a design system and then outputs machine-readable asset types, such as CSS files, that developers can use for their applications or component libraries. These files are generated in such a way to ensure safe styles for people with dyslexia, color blindness, and motion sensitivity.
The Accessibility Theme Builder is based on the Atomic Design methodology. This means that designers using atomic design to build their design systems will find the Theme Builder familiar. In addition to that, this tool is highly compatible with React component libraries such as Material UI which makes it easy for developers to integrate it into projects using these as their basis.
What can the Theme Builder do for designers and developers?
The Accessibility Theme Builder was developed with designers and developers in mind. This tool allows product teams to produce accessible products in a fraction of the time that it would traditionally take.
Here are some of the advantages of using the Accessibility Theme Builder:
-
Improve developer experience
- Embrace unified design systems and digital libraries
- Remove the pain points of aligning a design library and a digital component library
-
Expedite design and development
- Expand and improve UI component libraries
- Quickly use best practices
-
Promote diversity, equity, and inclusion
- Apply inclusive design principles
- Collaborate on innovations for people living with disabilities
Since the Accessibility Theme Builder is an open source project it allows contributors to:
- Contribute to the community
- Advocate for accessible inclusion through code contributions
- Enhance the tool to produce consistently accessible products, improving risk compliance pertaining to accessibility
- Improve Market Responsiveness
- Respond to market trends and new standards
Atomic Design
As mentioned before, the Accessibility Theme Builder is based on the Atomic Design methodology.
This methodology enables the creation of scalable systems, reusable components, and design systems. While originally associated with the design of web interfaces, this methodology can be applied to a wide array of design domains.
Atomic Design uses building blocks (atoms, molecules, organisms, templates, pages) when creating design systems. Those building blocks start with the ones that cannot be broken down – atoms. Atoms form molecules, combining molecules and atoms form organisms. Combinations of atoms, molecules, and organisms result in templates, and finally pages are the combination of any possible building blocks with real content. For more information, consider reading the documentation here.
Applying this methodology to the Theme Builder allows users to set the properties of the atoms, molecules, and organisms, while visualizing the effects of their changes. While the Theme Builder allows users to set certain properties, it also prevents users from altering properties that are essential for accessibility such as contrast, font size, letter spacing, etc., as well as performing background calculations to keep values adhering to compliance standards.
Why is Themebuilder important?
Accessibility
Web accessibility (or e-Accessibility) pertains to the design of websites and mobile applications that do not present barriers of access to people with disabilities or disorders. However, the big challenge to address is the development of accessible interfaces in a common and consistent manner.
The Accessibility Theme Builder aims to contribute to web accessibility efforts by injecting rules to all the elements of a theme to be WCAG compliant. This process requires minimal effort for the designer and developer. All the calculations happen in the background, and the Theme Builder outputs themes that are either Business (AA) or Government (AAA) WCAG Compliant. This results in better experiences for more users while removing the burden from designers or developers to understand all the WCAG rules or to keep up with continuing changes in the rules.
Designer/Developer collaboration
A big focus of the Theme Builder is to improve the collaboration between designers and developers. The ATB allows the designer to deliver themes in a developer-friendly manner without the need of any type of coding from the designer.
Styling speed
The designer-to-developer handoff is simple because the designer only needs to deliver one file to the developer with all the styles produced by the Theme Builder. This theme file is in a usable format that a developer can simply add to a project for easy implementation. Together these two properties make for an efficient and easy collaboration experience.
How the tool works
After the designer finishes building the theme, the last step is to export the result. The user can export the accessible variables in CSS format and provide this file to the developer.
The exported file, TB.css, contains all the variables the ATB has set according to the designer's interactions with the tool. The developer can immediately use this file and its variables in their application.
What's more, the developer can also copy the Theme.css file from the open source repo, which makes use of these variables from rules that govern the style of the application, which can be customized further in development.
If at any point the design changes slightly, the designer only needs to provide the new exported variables file (TB.css) to the developer, resulting in minimal disruption and extreme ease of use between the two roles.
Meanwhile, the variables and rules files are created with accessibility in mind, so accessibility is already achieved before the handoff between designer and developers even happens.
Conclusion
The Accesibility Theme Builder is an open source tool built with designers and developers in mind. Designers can create a design system and export this theme in a usable format for developers. Developers can then easily integrate this theme and the provided accessibility rules into their application or component libraries. Important accessibility conditions are always met in the generation of these themes. Altogether, the Accesibility Theme Builder makes it easier for designers and developers to create accessible applications which ensures a more inclusive experience for all users.
