About this Workshop
Design systems are not simple machines. From styles, to components, to patterns, to pages, the elements build upon each other, from small and simple to large and complex. From one level to the next, the design requirements increase in complexity, but so too, do the accessibility requirements. Thus, it is imperative that designers understand what these nuances are and how to design for them. In this session, participants will apply advanced accessibility considerations to the design of styles, components, and patterns, in order to create an accessible dashboard page.
Who is it for?
This session is for seasoned designers who have some experience in applying accessibility to their output, and who are looking for advanced topics and techniques in accessible design application.
What you’ll learn
Learn how to conduct an accessibility colour audit.
Learn the accessibility requirements for the different levels of a design system.
Apply the knowledge acquired to create some accessible styles, components, patterns, and a page.
Agenda
The workshop will be structured as a series of short formal presentations on advanced accessibility topics and techniques, paired with longer hands-on applications of creating accessible elements using Figma.
1. Firstly, participants will conduct a colour audit of their brand colours, noting colour pairs they can and cannot use from an accessibility standpoint. They may need to tweak some colours such that they have a minimal set of colour combinations they can use in the workshop.
2. Secondly, each participant will create their own set of accessible buttons, links, checkboxes, radio buttons, icons, dropdowns, input fields, and accordions in numerous variations and accessible states. They will also create a set of accessible headings and body copy.
3. Thirdly, participants will use these components to create accessible patterns, like a toolbar and filters.
4. Fourthly, participants will create an accessible table and an accessible graph or chart.
5. Lastly, participants will use all the elements they’ve created to then create an accessible dashboard page. Please note: Participants will be provided with Figma templates, but they are also encouraged to bring their own style guides and component / pattern libraries to be used as references.
Karen is the Principal of Accessible Design at the world’s largest digital accessibility company, Level Access. She works with some of the largest enterprise brands to ensure their accessible design practices are as inclusive as possible and is their resident subject matter expert when it comes to applying accessibility to design systems. She talks a lot about the nuance of accessibility in design systems, from the elaborate ways tokens can play a role in accessibility, to the ops and governance of the system’s accessibility.