Design Tokens for Accessibility Settings: Empowering Inclusive Design with CSS

13 September 2023


alastairc, atai, DanielHE, Jaunita-_, Jean-Yves, Jennie_Delisi, JenStrickland_, JohnRochford, Marcelo-Paiva, W3C
Fred Edora, mpaiva-aem

Meeting minutes

<Fazio> present

fred_edora: (Reviews session practicalities, does introductions)

Marcelo-Paiva: The project is fantastic, including user-research, and creating a truely accessible solution. Not easy as we're reporting on big-data.
… and we've been aiming for AAA level conformance?

fred_edora: Recording ok?

(not response)

fred_edora: I'm from Ronda Wise (?) center, and we want to make early learning reports accessible.
… we help States to do this, including document and web accessibility, training etc.
… the other way is we are developing a new tool for agencies to create report which are accessible from the start.
… we are open to all 60 educational places, but they have to choose to engage with us.
… The tool is called 'Adapt', we're slowly releasing that to the public.

Marcelo-Paiva: It is an open source tool, we want to make it available to all states.
… What we're showing today is not the tool, it is one way we identified to make reports accessible.
… the problem -
… we've seen a number of tools and companies trying to make front-end changes to the code (automatically).
… here we are proposing an ARIA attribute which would make sure the privacy of the user is taken into account.
… we also want to provide the users with a streamlined access to browser settings.
… some of our end users (students, parents of), and it's currently intimidating.

Marcelo-Paiva: Target users - web developers who implement the aria-UI attribute.
… we then automatically add a web component to the page, and access your settings right from the page.
… it is sustained through the browser session.
… the goal for this session is to present the concept and get feedback. It's our first time at TPAC. We've learned a lot, and we want to get feedback and comments.
… even if this is not a good idea, we'd like to discuss this.

Marcelo-Paiva: So developers would use the aria attribute, then integrate(?) with design tokens.
… the end users would benefit from accessing the preferences.
… available on bit.ly/a11y-tokens

<Jaunita-_> Will someone be able to gather stats based on this about users? Could raise not only privacy but legal concerns if so.

Marcelo-Paiva: Design tokens is a fundamental concept. It is a way of abstracting the design to variables.
… For example, a button component could have a primary colour.
… oh, and we collect all the tokens and put them in a json file, reachable.
… the button could have other properties, e.g. border.
… the token applies at the root level, then the button references the token via the var value.
… (Shows codepen page) Here we have an aria attribute, and if it turn it off the accessibility options disappear.
… (adds aria-ui = true to the body element)
… then the user can set the visual accommodation to what they want.
… can change to dark theme, or other themes.
… can also set to high contrast

<Jaunita-_> Does it always open a menu?

Marcelo-Paiva: nothing novel, but it could represent a better native way to provide access to settings.

<fred_edora> alastairc: is the option from the browser?

alastairc: Who provides the options?

<Fazio> ack, alastairc

Marcelo-Paiva: If we provide this attribute to access the settings. If the user wants to customise my own accessibility preferences, we give the user control.

<Fazio> ackalastairc

Jaunita-_: Can someone mine this for user info?

Marcelo-Paiva: If the user is settings things in the browser, no one should have access to them.
… should the website know if I'm looking at 200% magnification?

<JenStrickland_> As someone who has used design tokens, no, there is no way to mine user info from design tokens.

Jaunita-_: If the user's are making these settings, it seems like businesses could pick that up?

Marcelo-Paiva: There are ways for hacking and getting the info, but shouldn't be acceptable.
… if we have an aria attribute that connects to the browser, that's got to be better than adding JS for an overlay.

DanielHE: I'm from CVS design system, how would this integrate with CSS level 5 media queries that allow for similar settings

<Jaunita-_> Thanks!!!

DanielHE: the draft level 5 media queries has an API to gather the settings from the device which the browser can then gather. How would this intersect with the native tools we have already?

Marcelo-Paiva: Going back to the page, talking about the design tokens...

Marcelo-Paiva: Taking low vision as an example, we could create a set of design tokens to be used in the front end via CSS. If those tokens have a default value, the accessibility widget could take those. If I set line spacing, I could make them regular, tall etc. The user-agent could select from those.
… it is surfacing the default values and changing them.

<Jaunita-_> Will the menu look different on each page?

DanielHE: We already have some of them in the browser, e.g. dark themes, I just want to make sure, if this is another method, we don't want 3 or 4 different ways of doing it.

Marcelo-Paiva: I agree, the difference is that we're streamlining the access on a web page. If we didn't have this option, the user would have to go into the settings. We're surfacing those values on the web page.

<Jaunita-_> That could be confusing. Also, if I'm hearing right, some might have a11y concerns and some might not if the author controls how it looks

Marcelo-Paiva: similar to overlays, but not over-righting.

<Zakim> jamesn, you wanted to talk about privacy

jamesn: For privacy, people could finger-print based on things changed in the presentation.
… e.g. changing line height
… there would be privacy concerns to look at.
… This doesn't seem to fit in with the way aria works.

Marcelo-Paiva: Yep, I did expect some feedback on that.

jamesn: Not everything fits in.

Marcelo-Paiva: Want to give powers to developers to help with this.

<DanielHE> I would love to see some research on what disabled people want. From my perspective, leveraging the device and browser settings is the best way to go. Extending more prefers- media queries feels more natural.

JenStrickland_: I want to make sure everyone remembers the first rule of ARIA - don't use it unless you need to.

<DanielHE> I'm concerned this method could encourage less-accessible defaults knowing they can providing "accessible themes"

JenStrickland_: what I'm seeing with your widget is something offered to the public, it doesn't seem to be adding things.
… can you explain if I've got this wrong?

Marcelo-Paiva: Not wrong, we've been experimenting, and the quick way to implement was to give all 50 states the ability to choose how to do it. Doesn't have to be aria-ui, could be accessibility-widget.
… attending the groups now and get feedback.
… there are other ways of triggering the widget.

alastairc: Where does the widget come from?

Marcelo-Paiva: Were thinking of a web-component, see if I can show a simple prototype.
… so as an independant packed component, the developer would take that package and implement that. It would have the markup, styles and JS for the interactions.

JohnRochford__: I'm harking back to JenStrickland_ was talking about, and previous discussions with overlays. People with cognitive issues struggle with operating system settings, so widgets can help.
… but there are already open source ones available. One from Austria was easy to use, and included a lot more.
… these kinds of tools exist, why do this?

Marcelo-Paiva: We don't want to interfere with the layout.
… JohnRochford__ "Easy reading .eu"

Marcelo-Paiva: Great, I'll take a look
… but there are a few things we're trying to address.

<JenStrickland_> From Mike Gifford: One open source option https://docs.fluidproject.org/infusion/development/tutorial-userinterfaceoptions/integratinguioptionsstylingpreferences

Marcelo-Paiva: e.g. for low vision users, wanted to adjust layouts, contrast etc.
… we want to do this is a lean and managable way, without using artificial intelligence or change the layout

Jaunita-_: If you give developers control, there's a lot of potential to break it. Especially with large companies to break things.
… sometimes users don't want the widget.
… questions about mobile etc.
… not sure if the utility outweighs the problems?

<mgifford> One open source option https://docs.fluidproject.org/infusion/development/tutorial-userinterfaceoptions/integratinguioptionsstylingpreferences

<mgifford> Also, worth checking out https://chrome.google.com/webstore/detail/ui-options-plus-uio%20/okenndailhmikjjfcnmolpaefecbpaek

<mgifford> fluid-project/uio-plus

alastairc: How are the design tokens used?

Marcelo-Paiva: There are different ways people use them, sometimes used for CSS pre-processing. But here, we're proposing it is used on the page.

<JenStrickland_> I notice that my comment regarding the first rule of ARIA was not included in the notes: first rule of ARIA is not to use ARIA. I'm reticent to see why we would want to add this as a new ARIA functionality when this type of widget is already added and design tokens are used in lots of ways to style sites. It's a widget - akin to an overlay - that extends browser functionality.

Marcelo-Paiva: the way the design token would change, the single design token is a key value pair, so you can change (e.g.) layout-columns, which is a value of 1-12, and could change to one column.
… on the client side.

Jaunita-_: Does this mean authors have to maintain different versions of the site?
… and does inconsistencies across the web create issues?

Marcelo-Paiva: The good thing about the web-component approach is that, with the different themes, you can have those sets already in the design token collection. If you can provide a different set.
… I think we can create a compelling set to help development/design team so they don't have to build it from scratch.
… there are a lot of people trying to do the same thing.

Jaunita-_: I'm just concerned that they would align it with their own branding, so might not work for the user.
… might also get some broken content due to differences in coding.

Marcelo-Paiva: Yes, there could be issues there.

fred_edora: Our main audiences for this tool are state governments, many don't know what to do for accessibility.
… we were a bit surprised by how little some know about accessibility.
… we want to build capasity to help, work out the options on the developer side.
… there are lots of options out there for this, but we'd like to expose them to alternatives. Talk through privacy concerned etc.

Marcelo-Paiva: Ok, so that's what we wanted to present, the link is onscreen (or above in the minutes).
… feedback welcome, we'll report progress and get all-around feedback from users, developers and W3C community.

fred_edora: We are doing user-research sessions, anyone can jump into those, please get in touch.
… very interested in the lived-experience.

Marcelo-Paiva: I'll drop the link on that page as well.

Jaunita-_: Has this caused confusion for authors? Sometimes they think they've done everything by ticking this box.

Marcelo-Paiva: We're about to start testing on that.
… we'll see if we can build the proof of concept in a respectful manner.

fred_edora: It's not just about the tool, it's also about the cultural shift, the maturity model session earlier was also very useful.
… from the Gov side that's where we want to come in.

<JenStrickland_> The USWDS is in the process of adding tokens and web components.

Marcelo-Paiva: We're leveraging the US design system, which mgifford used as well. They have the design tokens in the pre-processing level, but not client level. So that's a contribution we are making to the design system.

mgifford: Very few support even basic dark-mode. the view form Gov has been to meet WCAG, one-website approach.
… any personalisation has been an extra.

JenStrickland_: I'd disagree with Mike, but maybe it's different organisations. Some have provided things, making sure not to over-ride user settings.
… I'm seeing a lot of that work happening. There is one I'm trying to remember that has done a lot of good work.
… but, agree that the states often lack that awareness.

<mgifford> JenStrickland_ please let us know if you find that design system.

JenStrickland_: they also tend to lack the accessibility awareness.
… unfortunately I can't share it.

<mgifford> Jen, can't a link just fall out of the back of a truck or whatever the digital metaphor is?

<mgifford> Just adding a link for Jen for the digital response https://www.usdigitalresponse.org/

JenStrickland_: I'm still not sure how much it differs from an overlay?

Marcelo-Paiva: We're using native CSS custom properties, we're not changing the front-end.

<fred_edora> Link for Weiss Center user research studies, if interested: https://forms.office.com/r/0qubViMB0Z

Marcelo-Paiva: we have control of the layout, so will create design tokens to help change the layout without identifying what's wrong. It's ground up.

<mgifford> I do have a list of government design systems here but haven't reviewed them lately to check for dark mode support https://accessibility.civicactions.com/guide/design

fred_edora: I've put a link to the research studies if anyone is interested?

fred_edora: The centre of inclusive design is one of our partners, but we're currently trying to recruit people for this.

Marcelo-Paiva: What we're proposing is a very small thing compared to the rest of the project.
… we're making sure we test with PWD from day 1.
… we're collecting all of this knowledge, which can be provided to our stakeholders. It's beyond the tool, it's spreading the knowledge.

<JenStrickland_> Keep an eye on the USWDS monthly calls -- the agencies contributing components and tokens participate there.

<fred_edora> https://weissta.org

<fred_edora> end this meeting

Minutes manually created (not a transcript), formatted by scribe.perl version 221 (Fri Jul 21 14:01:30 2023 UTC).


No scribenick or scribe found. Guessed: alastairc

Maybe present: fred_edora, jamesn, JohnRochford__, mgifford

All speakers: alastairc, DanielHE, fred_edora, jamesn, Jaunita-_, JenStrickland_, JohnRochford__, Marcelo-Paiva, mgifford

Active on IRC: alastairc, atai, DanielHE, Fazio, fred_edora, jamesn, Jaunita-_, Jean-Yves, Jennie_Delisi, JenStrickland_, JohnRochford, JohnRochford__, Marcelo-Paiva, mgifford, tidoust, W3C