Design Tokens for Accessibility Settings: Empowering Inclusive Design with CSS
This page contains a video recording of the presentation made during the breakout session, along with a transcript. Video captions and transcript were automatically generated and may not properly translate the speaker's speech. Please use GitHub to suggest corrections.
Table of contents
See also:
Video
Transcript
Ecija: Support.
… Sure. Yeah. Hello, everybody. So I'm the co-director for the Rhondda Vice Center for accessible Ipa data. Thank you for everyone that's coming in. So we are project in the United States that helps helps education agencies and early childhood provide early learning providers
… make the public reports accessible to individuals with disabilities. That's that's our literal number one focus on center. We're we're doing into a couple of different ways. One, we're probably states directly by going to the State and teaching them how to make different
… different reports accessible, teaching them how many teaching about document accessibility web accessibility through actual training and those kinds of activities the other ways, we're developing a brand new tool for education agencies to release reports that are fully accessible from when they're released, so they don't actually have to
… retrofit it at the end, or do anything afterwards. But once the report goes through the system, the system will automatically be fully accessible when it's released to the public
… and stay in my conversations with the States. It's never been done in this kind of capacity before. We are open to all 60 State education agencies
… and early learning providers to help with that. If they're willing to engage with our health, they have to make the choice to do with themselves. Certainly but we are. We will be happy to help, and we receive funding from the Us. Department of Education. To be able to do that. And Marcel demonstrate today is one of the one of the ways that we're going to do that through the through the new tools call, adapt
… the tools of adapt and we're slowly releasing that name out to the public. But it is a tool that will again help make reports accessible to the public for Ida data
… the the and this is an open source tool that we want to make it available to all States to take. And and you know, implement the way they want
… integrate data and report to the public in in an accessible map
… part of like Fred was mentioning. Part of this is only what we gonna be showing today is it's not the tool. This is one way that we identify to help
… making reports accessible to all users.
… And let's begin by the problem statement. So I think we all are aware of how in recent years we have seen a number of of tools and companies trying to change the front end code to make layouts accessible, using whether it's using Javascript code or artificial accounts.
… We can. We can talk about many ways and how to do that.
… What we are trying to propose. Here is an aria attribute that could take the surface, the accessibility settings of the browser on the web page and and making sure that that it's the privacy of the user is taken into account.
… I think the obviously respecting the the end users. Privacy is is the the highest priority, and also providing the users with a streamline access to the browser settings.
… So I think the idea is for someone, especially like our end users. We we have students, and we have parents or students, whether or not they have a disability we all have our own needs, and it's complex enough to go into a settings, and sometimes it's even intimidating to to to change those.
… please let me know if there's anyone on the queue. Just check right?
… Okay?
… So the target users that that we're talking about. Obviously, the web developers who will implement the Iri, but you can imagine any website. If you are developing a website, you can add the area dash ui, attribute to the body tag and enables them the true value.
… And we automatically would add a web component to the page where you can actually access your accessibility settings right from the page
… this setting sustains throughout
… the the browser session.
… Assuming the trying to propose the goal for this breakout session is just to present the concept.
… We're not trying to to charge this in an aggressive manner. We're just like trying to get feedback and a very humble away. This is my first time friends as well first time at at Tpc. And I've been learning so much and needing so many bright people. So I'm definitely want to to invite you all to contribute with your feedback will comment.
… and we constructively make progress. Even even if this is not a good idea I think that it would be a good opportunity for us to have a discussions on how external Javascript is is inserting the the front end code. and we're trying to to avoid that.
… especially for for our web developers would enable the area ui attribute
… they would integrate with design tokens. I'll explain a little bit about design tokens if you're not familiar with that in a little bit. And obviously we would the Web developers would have to to consider the taxpayer and compatibility
… the end user, like I mentioned before, would benefit from from accessing the accessibility settings right from page, and adjust that as they wish. considering intersectionality of disabilities
… like, I was talking to John earlier on aging, and I'm out of hearing, and my eyes weakening. So we all go through a certain intersectionality as as
… I think the the key benefits. I already mentioned that and this page is available to everyone
… on on slash if it was any 11 y dash tokens.
… So let me just bring the design purpose topic to this, because this pretty much how we titled the the session
… design tokens
… is is a fundamental concept in in web development. Right now, where we can abstract design decisions and then reuse that over and over. It's it's widely used in design systems. You can think of a primary color.
… You can abstract that primary color and the primary call is blue, and it for whatever reason
… that is a rebranding, or there's a merger, or there's a need for for a high contrast. adjustment. We can change that value to accommodate the user needs or to accommodate the branding. Change
… is an example of a button component. So you have a primary caller.
… And, by the way, design token is third, we're proposing. We. We collect all the tokens in a Json file, and that Json file hydrates the Css file in a form of custom properties. So it's it's it's reachable at the group level. I'll show an example in a little bit.
… So we have a primary call as one example here. There's another token text caller, and you can think of like for the button button would also have other properties such as button border radios, the padding, the font size, the shadow
… and the way the design tokens would be applied is you apply to the group level, and you have the design token for the primary call on the bottom. You have the button class, and you are referencing that token via the bar value right
… now. How design tokens
… would help or could help
… surfacing or changing the for that. Let me just
… pause, and I'll show the demo. I think that that will bring everyone some context, and then I'll come back to to address the tokens for specific visibilities.
… Welcome anyone in the queue at this point, so
… so as you can see here, make this bigger, or maybe not. So. As you can. See here I have. Let's see if I can make this. But
… right? So you can see how I have the area attribute queue, and if I turn it off
… the accessibility option disappears. So I think the the whole idea is that if I'm building a a web page or a web app. And I want to to give the user the ability to have access to their own accessibility settings from the browser. I would just add area ui.
… and that would bring the accessibility options. And the user could go and set the digital accommodation of day one.
… So in this case over here. I have a call scheme just very simple settings to change, but this will continue to to extend as as we move on. So I can change this to an original back theme.
… or like a familiar with this theme calls.
… I could also increase the the font size to large. and I can could even set this to a high contrast. simple as that. Nothing novel, innovative in a sense other than
… this, could represent a a better native way for giving end-users access to their accessibility settings.
… I'll pause right now and then. II can take some questions, and I'll