Design Tokens for Accessibility Settings: Empowering Inclusive Design with CSS

[mpaiva-aem]

Session description

The Rhonda Weiss Center for Accessible IDEA Data is excited to host this breakout session on Design Tokens for Accessibility Settings. As an organization dedicated to promoting accessibility and inclusivity, we firmly believe in taking an accessibility-first approach in all aspects of the product development life cycle.

IDEA stands for the Individuals with Disabilities Education Act. It is a federal law in the United States that ensures students with disabilities receive appropriate special education and related services to meet their unique educational needs.

In this session, we will review our groundbreaking efforts to develop an open-source tool for generating accessible reports of IDEA data. Discover how design tokens take center stage in delivering essential digital accessibility accommodations to end-users. This interactive discussion will showcase the pivotal role of design tokens in ensuring inclusivity and usability in accessing and interpreting IDEA data reports.

Design tokens serve as reusable and platform-agnostic values that define the properties of a design system. By harnessing the power of CSS with design tokens, we can enhance the inclusivity and accessibility of the user experience, particularly for individuals with multiple disabilities or intersectionality.

We will explore the idea of utilizing CSS tokens specifically tailored to address different disabilities and user needs. We'll delve into the proposed tokens for digital accommodations, such as those for low vision, color-blindness, dyslexia, ADHD, deafness and hard of hearing, motor disabilities, cognitive disabilities, photosensitive epilepsy, aging-related impairments, blindness, and more.

The session will provide an opportunity to:

1. Discuss the benefits and challenges of using CSS tokens for accessibility settings.
2. Share experiences and best practices in implementing design tokens for accessibility.
3. Brainstorm additional design tokens and discuss their potential impact on improving accessibility.
4. Explore ways to integrate design tokens into existing design systems and development workflows.
5. Collaborate on strategies to promote the adoption of design tokens for accessibility in the web development community.

Join us for an engaging and interactive discussion where we aim to collectively gather ideas, insights, and practical approaches for leveraging CSS tokens to enhance accessibility. Whether you're a designer, developer, accessibility advocate, or simply interested in inclusive design, your perspectives and contributions are valuable.

Session goal

The session goal is to explore the use of Design Tokens and CSS for accessibility, discussing benefits, challenges, and integration strategies, and collaboratively gather insights for enhancing web accessibility through design tokens.

Additional session chairs (Optional)

@fbedora2019

IRC channel (Optional)

#inclusive-design-tokens

Who can attend

Anyone may attend (Default)

Session duration

60 minutes (Default)

Other sessions where we should avoid scheduling conflicts (Optional)

No response

Estimated number of in-person attendees

Don't know (Default)

Instructions for meeting planners (Optional)

Are you asking for Accessibility accommodations?

Agenda, minutes, slides, etc. (Optional)

• Agenda
• Slides: @@
• Minutes
• Recording
• Calendar

[ianbjacobs]

@mpaiva-aem, thank you for asking about accessibility accommodations. We have a goal that both the venue and our remote tooling are accessible. Do you have specific requests? Feel free to send me email (ij@w3.org).

[mpaiva]

@tidoust - could you please help me out understanding what is missing in this proposal?

[mpaiva]

Also, when do we know if this session has been accepted and scheduled? Just so I can plan accordingly.

[ianbjacobs]

Hi @mpaiva, I don't think anything is missing from the proposal. Those labels are just for us (the meeting planners) to double check some information. We expect to announce a draft schedule on 7 September and the final schedule on 11 September.

[spectranaut]

Ah it's a bummer that this is at the same time as AT-Driver: https://www.w3.org/events/meetings/fcde7756-f9a9-4ad5-b67a-0d7049e5b10b/

[mpaiva]

Adding a gist link to the discussion page
https://gist.github.com/mpaiva/30e606266c2de2eb95b21fdddde9ea7f

[ianbjacobs]

We’ve published the Zoom recording made for your session. We invite you to review the automatically generated captions and propose fixes.

[PUP-DUX]

We’ve published the Zoom recording made for your session. We invite you to review the automatically generated captions and propose fixes.

he recording is only the first 15 mins - should there be more?

[tidoust]

he recording is only the first 15 mins - should there be more?

The recording policy forbid recording of the discussion. The recording only contains the presentation part of the session as a result.

(The recording could have been more cleanly cut not to end mid sentence though!)

[mpaiva]

We’ve published the Zoom recording made for your session. We invite you to review the automatically generated captions and propose fixes.

he recording is only the first 15 mins - should there be more?

@PUP-DUX - A thorough rationale of this approach and discussion is documented here

The general feedback was not to use an ARIA attribute, which follows the first rule of ARIA.

The design tokens were well received, as they are native to the layout via CSS custom properties, and keep the semantic structure of the code – unlike overlays.

I'd be more than happy to have a chat with you if you have any interest.