People are not static, we are dynamic. In order to meet our needs at any point in our lives or day, the UIs we create must be able to adapt to us — not the other way around.
\n\n\n","social_text":"People are not static, we are dynamic. In order to meet our needs at any point in our lives or day, the UIs we create must be able to adapt to us — not the other way around.","url":"https://www.aaron-gustafson.com/notebook/links/people-are-not-static-we-are-dynamic-in-order-to-meet-our-needs-at-any-point-in-our-lives-or-day-the-uis-we-create-must-be-able-to-adapt-to-us-not-the-other-way-around-/","external_url":"https://www.linkedin.com/posts/derekfeatherstone_accessibility-disability-activity-7434648295420870656-mH3o","tags":["accessibility","progressive enhancement","inclusive design"],"image":"https://static.licdn.com/aero-v1/sc/h/c45fy346jw096z9pbphyyhdz7","date_published":"2026-03-05T18:38:46Z"},{"id":"https://www.aaron-gustafson.com/notebook/accessibility-assistant-for-figma-v52/","title":"✍🏻 Accessibility Assistant for Figma v52","summary":"I just hit “publish” on Accessibility Assistant for Figma v52 and I wanted to share some details on why this is a monumental release for us.","content_html":"I know someone that uses her screen reader on her mobile phone, but when she’s on her desktop computer, she uses a mangifier.
\nDifferent contexts, different tools, same person.
\nI know someone that uses voice controls on his computer. He uses direct commands like “Click Contact Us” when he’s near the start of his day, and commands like “Click link, twelve” when he’s near the end of his day with lower energy and less clear speech and a dry mouth.
\nDifferent energy/capacity, same tools, same person.
\nI know someone that uses a switch on his computer. He also uses the onscreen keyboard on his computer. The one that he chooses reflects the task he’s trying to accomplish and how he can minimize switching between the tools.
\nDifferent task, same context, same tools, same person.
\nDisability is not black and white… it’s every shade of every colour.
\n
I just hit “publish” on Accessibility Assistant for Figma v52 and I wanted to share some details on why this is a monumental release for us.
\nWe’re in the process of a major overhaul to this plugin. There was a lot of infrastructural work to do to modernize the plugin and set the stage for a host of new features to make designers more productive when it comes to making their designs more accessible. This release incorporates a lot of that foundational work, notably:
\nWe also fixed bugs related to duplicating layers. You can now copy layers and the annotations will go along for the ride, becoming a new Annotation Set. Similarly, you can now duplicate pages and the annotations — which are page-bound — will be re-generated. It’s worth noting that this may take some time on particularly large pages.
\nThis release has been a long time coming, but I’m incredibly proud of the team that’s been working so diligently on this, particularly Ashish Singh from HCL and Michael Fairchild, Scott O’Hara, and Ben Truelove from Microsoft. Their attention to detail and encyclopedic knowledge of accessibility has been instrumental in getting this project to the place that it is.
\nAnd there’s more to come!
\n","social_text":"I just hit “publish” on Accessibility Assistant for Figma v52 and I wanted to share some details on why this is a monumental release for us.","url":"https://www.aaron-gustafson.com/notebook/accessibility-assistant-for-figma-v52/","tags":["accessibility","design","inclusive design","Microsoft","user experience","WAI-ARIA"],"date_published":"2026-02-20T23:27:28Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/some-blind-fans-to-experience-super-bowl-with-tactile-device-that-tracks-ball/","title":"🔗 Some blind fans to experience Super Bowl with tactile device that tracks ball","content_html":"A few years ago, a couple students at the University of Washington asked me to come to their campus for a visit. They gave me a demo of an early prototype they’d been working on — a haptic feedback device that could allow someone who is Blind or low vision to follow a game. The demo took video data from a tennis match and mapped it onto the haptic tablet. It felt like Pong, but they had a bolder vision — tackling fast-moving and complicated sports like basketball, football, American football, and hockey.
\nI immediately invited them to pitch us for the AI for Accessibility Grant Program that I ran for Microsoft. With so much focus on assistive technology to enable folks to work and accomplish common life tasks, I loved that the OneCourt team was interested in enabling people with disabilities to enjoy leisure activities like sporting events. Moreover, I saw the potential to enable Blind and low-vision parents to experience their kids’ sporting events, which could be life-changing for them.
\nNeedless to say, they wowed both me and the rest of the seleciton committee. We funded them to expand their prototypes and pursue partnerships with different professional sports leagues, teams, and venues. They were ambitious and it’s paying off.
\nFast forward a few years and they’re enabling a handful of Blind & low vision sports fans to exerience the Super Bowl in a whole new way, using their technology. It’s amazing and I could not be more proud of them.
\nCongrats y’all!
\n","social_text":"So proud of the OneCourt team for their work in bringing more leisure opportunities to the Blind & low vision community.","url":"https://www.aaron-gustafson.com/notebook/links/some-blind-fans-to-experience-super-bowl-with-tactile-device-that-tracks-ball/","external_url":"https://apnews.com/article/nfl-blind-fans-super-bowl-6daf12a08127c46c23dab6100a659681","tags":["accessibility","inclusive design","AI/ML"],"image":"https://dims.apnews.com/dims4/default/9b439cc/2147483647/strip/true/crop/5333x3554+0+1/resize/980x653!/quality/90/?url=https%3A%2F%2Fassets.apnews.com%2F1b%2Fe5%2F28e0bd88c1be654d380ee1c3b2f2%2F9a7b2e31c9464fa6a86eb6d04b0a3266","date_published":"2026-02-06T19:40:06Z"},{"id":"https://www.aaron-gustafson.com/notebook/fullscreen-video-and-iframes-made-easy/","title":"✍🏻 Fullscreen Video and Iframes Made Easy","summary":"The fullscreen-control web component adds fullscreen capabilities to any video or iframe element with a single wrapper and zero configuration.","content_html":"Adding fullscreen capabilities to videos and embedded iframes shouldn’t require wrestling with prefixed APIs or managing focus states. The fullscreen-control web component handles all of that for you — just wrap it around the element. The component handles the rest as a discrete progressive enhancement.
Here’s a simple example using a video element:
<fullscreen-control>\n <video src=\"video.mp4\"></video>\n</fullscreen-control>With that in place, the component
\nThe component uses light DOM, so your video stays in the regular DOM tree and all your existing CSS continues to work.
Need to embed a YouTube video, slide deck, or code demo? The component works with iframe elements too:
<fullscreen-control>\n <iframe\n src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"\n width=\"560\"\n height=\"315\"\n title=\"YouTube video player\"\n >\n </iframe>\n</fullscreen-control>The component automatically adds the necessary allow="fullscreen" and allowfullscreen attributes, including prefixed versions for broader compatibility.
button textYou can change the button label to match your site’s language or writing style by setting the button-text attribute:
<fullscreen-control button-text=\"全画面表示\">\n <video src=\"video.mp4\"></video>\n</fullscreen-control>The default button label is “View fullscreen,” but you can use this attribute to customize it to anything you like. You can even dynamically inject the accessible name of the contained element, using the {name} token. For example:
<fullscreen-control button-text=\"View {name} fullscreen\">\n <video src=\"video.mp4\" aria-label=\"Product demo\"></video>\n</fullscreen-control>This creates a button with the text “View Product demo fullscreen”. The component looks for aria-label, title, or other native naming on the wrapped element and uses that to make the button contextual.
If you want the visible label and accessible button name to differ, use the button-label attribute. Like button-text, it can also inject the accessible name of the controlled element using the {name} token:
<fullscreen-control\n button-text=\"Fullscreen\"\n button-label=\"View {name} in fullscreen mode\"\n>\n <iframe src=\"https://example.com\" title=\"Product teaser\"> </iframe>\n</fullscreen-control>This code will generate a button that visually reads “Fullscreen”, but is announced as “View Product teaser in fullscreen mode” to screen readers. In mode cases, button-text will suffice, but this option is available if you need to distinguish the buttons of multiple fullscreen controls from one another and don’t have visual space to display their accessible names.
If users activate fullscreen using the button, focus will automatically return to the button upon exiting fullscreen. This ensures keyboard users don’t lose their place.
\nWant to manage the component yourself? The component exposes three methods:
\nconst control = document.querySelector(\"fullscreen-control\");\n\n// Enter fullscreen\nawait control.enterFullscreen();\n\n// Exit fullscreen\nawait control.exitFullscreen();\n\n// Toggle fullscreen state\ncontrol.toggleFullscreen();These handle all the browser prefixes and error handling for you.
\nThere are also a set of events you can tap into when the fullscreen state changes:
\nconst control = document.querySelector(\"fullscreen-control\");\n\ncontrol.addEventListener(\"fullscreen-control:enter\", () => {\n console.log(\"Entered fullscreen mode\");\n});\n\ncontrol.addEventListener(\"fullscreen-control:exit\", () => {\n console.log(\"Exited fullscreen mode\");\n});These events give you the ability to pause other media, track analytics, and the like.
\nSince the component uses light DOM, you can style the button directly with CSS:
\nfullscreen-control button {\n background: #ff6b6b;\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n border-radius: 20px;\n font-weight: bold;\n}\n\nfullscreen-control button:hover {\n background: #ff5252;\n}The button is positioned absolutely by default (top-right corner), but you can adjust this with CSS custom properties:
\nfullscreen-control {\n --fullscreen-control-button-inset-block-start: 1rem;\n --fullscreen-control-button-inset-inline-end: 1rem;\n}This uses logical properties, so it adapts automatically to different writing modes.
\nInstall via npm:
\nnpm install @aarongustafson/fullscreen-controlThen import it in your JavaScript:
\nimport \"@aarongustafson/fullscreen-control/define.js\";Or load it from a CDN for quick prototyping:
\n<script type=\"module\">\n import { defineFullscreenControl } from \"https://unpkg.com/@aarongustafson/fullscreen-control@latest/define.js?module\";\n defineFullscreenControl();\n</script>The component uses modern web standards (Custom Elements v1, ES Modules) and handles browser-prefixed fullscreen APIs internally. For older browsers, you may need polyfills, but the component gracefully handles missing APIs with console warnings rather than breaking your page.
\nCheck out the live demo to see all the features in action, or grab the code from GitHub.
\n","social_text":"Add fullscreen controls to videos and iframes with progressive enhancement. One wrapper, zero hassle.","url":"https://www.aaron-gustafson.com/notebook/fullscreen-video-and-iframes-made-easy/","tags":["web components","progressive enhancement","HTML","video","accessibility","media"],"date_published":"2025-12-29T17:17:27Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/forrester-research-as-technology-has-evolved-so-has-the-need-for-accessibility/","title":"đź”— Forrester Research: As technology has evolved, so has the need for accessibility","content_html":"A recent paper from Forrester (commissioned by Microsoft, my employer), has confirmed my anedotal experiences are not outliers:
\n\n\nThis new study, based on a 2025 online survey of 3,901 US consumers, confirms what many of us know: accessible technology empowers everyone. And with the rise of AI, we’re entering a new era of possibility.
\n
One of the stats that’s likely to be surprising to many people is that people who identify as having disabilities and those who don’t both use assistive technology features at nearly the same rate.
\nFull details of the research report are here: Oh, The Things We Can Do Together — How Assistive Technology Is Unlocking Human Potential In The Era Of AI
\n","social_text":"“Accessible technology empowers everyone. And with the rise of AI, we’re entering a new era of possibility.”","url":"https://www.aaron-gustafson.com/notebook/links/forrester-research-as-technology-has-evolved-so-has-the-need-for-accessibility/","external_url":"https://blogs.microsoft.com/accessibility/forrester-research-2025/","tags":["accessibility","AI/ML"],"image":"https://blogs.microsoft.com/wp-content/uploads/sites/172/2025/11/Forrester-Accessibility-Report-Cover-1024x576.jpg","date_published":"2025-12-05T17:46:26Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/creating-a-more-accessible-web-with-aria-notify/","title":"🔗 Creating a more accessible web with ARIA Notify","content_html":"I just saw this very exciting announcement on the Edge Dev Blog:
\n\n\nARIA Notify is an ergonomic and predictable way to tell assistive technologies (ATs), such as screen readers, exactly what to announce to users and when.
\nIn its simplest form, developers can call the ariaNotify() method with the text to be announced to the user.
\n
Here’s what it looks like:
\n// Dispatch a normal priority notification\ndocument.ariaNotify(\"Background task completed\", { priority: \"normal\" });I’m particularly excited by this because of how much it simplifies the update process for engineers. Previously they needed to manage upates to an aria-live DOM node with the appropriate announcement level and hope for the best. This approach was plagued with issues ranging from lag — because, DOM manipulation — to confusion between whether “polite” or “assertive” was the right choice.
The ARIA Notify proposal is clear, concise, and far more likely to get used and — more importantly — used properly.
\nIt’s currently in Origin Trial. Please give your feedback so we can get this into every browser sooner rather than later.
\n","social_text":"ARIA Notify looks like it could solve a lot of problems with screen reader announcements by simplifying the process.","url":"https://www.aaron-gustafson.com/notebook/links/creating-a-more-accessible-web-with-aria-notify/","external_url":"https://blogs.windows.com/msedgedev/2025/05/05/creating-a-more-accessible-web-with-aria-notify/","tags":["accessibility","JavaScript"],"date_published":"2025-11-26T18:40:45Z"},{"id":"https://www.aaron-gustafson.com/notebook/identifying-accessibility-data-gaps-in-codegen-models/","title":"✍🏻 Identifying Accessibility Data Gaps in CodeGen Models","summary":"I probed an LLM’s responses to HTML code generation prompts to assess its adherence to accessibility best practices. The results showed key areas where better training data is needed.","content_html":"Late last year, I probed an LLM’s responses to HTML code generation prompts to assess its adherence to accessibility best practices. The results were unsurprisingly disappointing — roughly what I’d expect from a developer aware of accessibility but unsure how to implement it. The study highlighted key areas where training data needs improvement.
\nI get it — you probably rolled your eyes at yet another “AI and accessibility” post. Maybe you think AI-assisted coding is overhyped, environmentally harmful, unreliable, or just plain dangerous for our craft. I share many of those concerns. But here’s the thing: whether we like it or not, codegen models aren’t going anywhere. GitHub Copilot has millions of users, and tools like Claude Code and Cursor are rapidly gaining popularity.
\nSo we have a choice: we can complain about the inevitable tide of AI-generated garbage code, or we can get in there and figure out how to make it better — especially when it comes to accessibility.
\nWe’re facing a looming wave of inaccessible code that will be extremely difficult to remediate later. The foundation models are already being trained on the collective output of the web’s development community — a community that doesn’t have a high bar high for accessibility already. Codegen models are a massive consultancy staffed with full StackOverflow developers. We need to figure out how to make them part of the solution, not part of the problem.
\nIt’s also worth noting that the better we make the output of these models, the fewer bugs will be generated. That, in turn, means fewer accessibility issues to fix later. If we don’t, there are plenty of AI-assisted scanners out there happy to burn the rainforest to find and remediate the bugs after the fact. We risk doubling the environmental impact—once to generate the bug, and again to fix it. That’s not the future I want. The reality here is that the only way to deal with this flood of AI-generated code is to make sure it’s good code in the first place.
\nRather than relying on anecdotal evidence or cherry-picked examples, I built a systematic approach to evaluate how well LLMs — starting with GPT-4 — generate accessible HTML. The methodology is straightforward but comprehensive: I created a Python testing framework that sent carefully crafted prompts to Azure OpenAI’s GPT 4 model, collected the generated HTML responses, and then manually analyzed these responses for accessibility compliance.
\nHere’s how it works:
\nPrompt Engineering: I designed prompts that ask for specific UI components—form fields, navigation menus, interactive elements—without explicitly mentioning accessibility requirements. This gives us a baseline of what the model considers “standard” output. I included one prompt that specifically requested accessibility features to see if the model could improve when guided. I suspected it would often add ARIA attributes without addressing underlying issues, but I wanted to validate that too.
\nResponse Collection: For each prompt, I generated 10 iterations at high temperature (0.95) to capture the model’s range of responses. Each unique response got saved as an individual HTML file for analysis.
\nSystematic Analysis: I manually review each generated code snippet, cataloging accessibility errors, warnings, and missed opportunities. I tried using the LLM as a judge, but even with a detailed rubric, the results were poor. My eval looked specifically for things like:
\nWhen I identified errors, I remediated them and committed the remediated file to the repo with a commit message that included all of the issues and warnings on its own line.
\nDiff-Based Retesting: I wanted to see if diff data could improve future codegen requests, so I created a tool to generate a collection of .diff files for each pattern that included the commit message as a header in each file. I then used those diff files as part of a new instance of the prompt to test whether the model can improve its output when guided.
After analyzing hundreds of generated code snippets, the results are sobering. The model consistently demonstrates what I’d describe as superficial awareness without true understanding — it knows accessibility concepts exist but fundamentally misunderstands their purpose and proper implementation.
\nHere are some of the patterns I’ve documented:
\nForm Label Disasters: When asked to create a required text field, the model failed to include a visible label:
\n<input\n type=\"text\"\n id=\"orangeColor\"\n name=\"orangeColor\"\n required\n placeholder=\"What color is an orange?\"\n/>Sure, the placeholder attribute is there, and in a pinch it will be included in a field’s accessible name calculation, but sighted users will lose the label as soon as they start typing.
ARIA Attribute Confusion: The model would routinely involve ARIA for no reason:
\n<label for=\"color-question\"\n >What color is an orange? <span style=\"color: red;\">*</span></label\n>\n<input\n type=\"text\"\n id=\"color-question\"\n name=\"color-question\"\n required\n aria-required=\"true\"\n aria-labelledby=\"color-question\"\n/>Here the for attribute already establishes the relationship between the label and input, so aria-labelledby is redundant. A bit of a nitpick, but the aria-required="true" is also unnecessary since the native required attribute already conveys that information to assistive technologies. aria-required="true" is only needed when creating custom form controls non-semantic markup.
Redundant ARIA: Keeping on the ARIA redundancy, consider examples like this:
\n<input\n type=\"radio\"\n id=\"option1\"\n aria-labelledby=\"label1\"\n aria-label=\"Option 1\"\n/>\n<label for=\"option1\" id=\"label1\">Option 1</label>This redundancy raises the question why‽
\nRequired Field Misapplication: For checkbox groups where users need to select “one or more,” the model often adds required to individual checkboxes:
<fieldset>\n <legend>What fruits do you like?</legend>\n <div>\n <input\n type=\"checkbox\"\n id=\"bananas\"\n name=\"fruits\"\n value=\"bananas\"\n required\n />\n <label for=\"bananas\">Bananas</label>\n </div>\n <div>\n <input\n type=\"checkbox\"\n id=\"oranges\"\n name=\"fruits\"\n value=\"oranges\"\n required\n />\n <label for=\"oranges\">Oranges</label>\n </div>\n <div>\n <input type=\"checkbox\" id=\"apples\" name=\"fruits\" value=\"apples\" required />\n <label for=\"apples\">Apples</label>\n </div>\n <div style=\"color: red; display: none;\" id=\"validation-error\">\n You must choose one or more fruits\n </div>\n</fieldset>This breaks the intended behavior—if any checkbox is marked required, it must be checked for form validation to pass. For a web component that addresses this limitation in HTML, see my post “Requirement Rules for Checkboxes.”
\nGrouped Field Confusion: Not understanding when to use fieldset and legend (or at least using role="group" and aria-labelledby) on a field group:
<div>\n <label>Select Theme:</label>\n <div>\n <input type=\"radio\" id=\"light\" name=\"theme\" value=\"light\" />\n <label for=\"light\">Light</label>\n </div>\n <div>\n <input type=\"radio\" id=\"dark\" name=\"theme\" value=\"dark\" />\n <label for=\"dark\">Dark</label>\n </div>\n <div>\n <input type=\"radio\" id=\"high-contrast\" name=\"theme\" value=\"high-contrast\" />\n <label for=\"high-contrast\">High Contrast</label>\n </div>\n <p>You can change this later</p>\n</div>Ideally, this would be a fieldset with a legend and the descriptive text would appear right after the legend and be associated with the group using aria-describedby.
Color-Only Error Indication: Generating error states that rely solely on color changes without text indicators or proper ARIA attributes to convey the error state to screen readers.
\nUnnecessary Role Additions: Adding redundant roles like role="radiogroup" to properly structured fieldsets containing radio inputs, where the native semantics already provide the correct accessibility tree.
Missing Error State Management: Failing to include aria-invalid="true" on fields with errors or properly associate error messages with their corresponding form controls.
Lack of Wayfinding Help: Failing to include navigational labels and aria-current="page" in a breadcrumb nav.
Adding Unnecessary JavaScript: Even though it was instructed to only generate JavaScript when absolutely necessary, the model would often inject JavaScript for simple tasks that could be handled with HTML and CSS alone.
\nHere’s where things get interesting — and hopeful. When I retested using prompts that included accessibility hints, the model’s output improved dramatically. Not just slightly better, but often going from fundamentally broken to genuinely accessible.
\nFor example, when I added diff data related to fieldset use to a prompt about radio button groups, the model switched from generating meaningless div wrappers to proper semantic structures.
This suggests the model can produce quality code if properly primed. It also indicates that the training data likely lacks sufficient examples of well-implemented accessible components. If the model had been trained on a richer dataset of accessible code, it might not need such explicit guidance to produce good results.
\nThese findings point to several concrete approaches for improving accessibility in AI-generated code:
\nEnhanced Training Data: The models need exposure to more high-quality, accessible code examples. Current training data clearly overrepresents inaccessible implementations. We need comprehensive datasets of properly implemented accessible components across different frameworks and use cases.
\nAccessibility-Aware Fine-Tuning: Post-training refinement specifically focused on accessibility compliance could help models prioritize inclusive patterns. This could involve training on accessibility-annotated code pairs — showing inaccessible implementations alongside their accessible counterparts, like the diffs do.
\nPrompt Engineering Guidelines: Tool creators should integrate accessibility considerations into their default system prompts. Instead of just asking for “clean, semantic HTML,” prompts should provide detailed instructions to demonstrate accessibility best practices rather than pointing at often vague guidelines like WCAG."
\nIntegrated Accessibility Validation: IDE integrations should include real-time accessibility linting of AI-generated code, providing immediate feedback and suggestions for improvement.
\nCommunity-Contributed Training Data: We should coordinate our efforts to produce an open source, high-quality accessible code dataset so that this data can be integrated into future models.
\nThe data from this project provides a roadmap for where to focus these efforts. We’re not dealing with models that are fundamentally incapable of generating accessible code — we’re dealing with models that haven’t been properly trained to prioritize accessibility by default.
\nIf you want to conduct similar evaluations with your preferred models or specific use cases, I’ve created a template repository with the testing framework: CodeGen Model Eval and Refine Tools. It includes the Python testing harness, prompt templates, and analysis guidelines to get you started.
\nThe complete findings, methodology details, and code samples for my research are available on GitHub. I encourage you to dig into the data — it’s eye-opening and frustrating, yes, but ultimately actionable.
\nThere are other projects and research exploring this space as well. A few worth checking out:
\nWe’re at a critical moment where the patterns established in AI-assisted development will shape the accessibility of the web for years to come. We can either let this technology amplify existing accessibility problems, or we can tackle the problems head-on and be part of the solution.
\n","social_text":"I probed an LLM’s responses to HTML code generation prompts to assess its adherence to accessibility best practices. The results showed key areas where better training data is needed.","url":"https://www.aaron-gustafson.com/notebook/identifying-accessibility-data-gaps-in-codegen-models/","tags":["accessibility","AI/ML","HTML"],"image":"https://www.aaron-gustafson.com/i/posts/2025-10-15/hero.png","date_published":"2025-10-16T19:12:02Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/designing-for-distress-understanding-users-in-crisis/","title":"🔗 Designing for Distress: Understanding Users in Crisis","content_html":"\n\nIn a distressing moment, it’s like you’re rushing to the airport — you’re just looking for help right now. When you aren’t distressed, it’s like you’re on vacation. You can take your time, you’re more open to exploring.
\n
In a recent study, the VA learned a lot from users navigating acute distress — and why typical UX patterns fail. This is highly recommended reading for anyone working in the design space.
\n","social_text":"In a recent study, the VA learned a lot from users navigating acute distress — and why typical UX patterns fail.","url":"https://www.aaron-gustafson.com/notebook/links/designing-for-distress-understanding-users-in-crisis/","external_url":"https://medium.com/@codybolandphd/designing-for-distress-understanding-users-in-crisis-0e02466f1f5b","tags":["accessibility","user experience"],"date_published":"2025-10-10T18:52:07Z"},{"id":"https://www.aaron-gustafson.com/appearances/podcasts/accessibility-in-automated-systems/","title":"🎧 Accessibility in Automated Systems","content_html":"I chatted with Sharon Steed on a variety of topics ranging from accessibility to diversity, representation, AI, politics, the future, and more.
\n","url":"https://www.linkedin.com/video/live/urn:li:ugcPost:7330624084201852928/","tags":["accessibility","AI/ML","empathy","inclusion","the future"],"date_published":"2025-05-20T00:00:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/disability-personas-from-a-web-for-everyone/","title":"🔗 Disability Personas from A Web for Everyone","summary":"The disability personas contained in Sarah Horton & Whitney Quesenbery’s A Web for Everyone are a terrific resource, so I’m thrilled their available beyond the book now too.","content_html":"The disability personas contained in Sarah Horton & Whitney Quesenbery’s A Web for Everyone are a terrific resource, so I’m thrilled their available beyond the book now too.
\n","social_text":"I ❤️ these disability personas. What an amazing resource!","url":"https://www.aaron-gustafson.com/notebook/links/disability-personas-from-a-web-for-everyone/","external_url":"https://knowaboutaccessibility.org/category/resources/","tags":["accessibility","inclusive design","user experience"],"date_published":"2025-05-09T23:05:56Z"},{"id":"https://www.aaron-gustafson.com/notebook/passing-your-css-theme-to-canvas/","title":"✍🏻 Passing Your CSS Theme to `canvas`","summary":"While working on a recent project I noticed an issue with acanvas-based audio visualization when I toggled between light and dark modes. I couldn’t find any articles on to make canvas respond nicely to user preferences, so I thought I’d share (in brief) how I solved it.","content_html":"While working on a recent project I noticed an issue with a canvas-based audio visualization when I toggled between light and dark modes. When I’d originally set it up I was browsing in dark mode and the light visualization stroke showed up perfectly on the dark background, but it was invisible when viewed using the light theme (which I’d neglected to test). I searched around, but didn’t find any articles on easy ways to make canvas respond nicely to user preferences, so I thought I’d share (in brief) how I solved it.
The theming of this particular project uses CSS custom properties. For simplicty I’m going to set up two named colors and then use two theme-specific custom properties to apply them in the default light theme and the dark theme:
\n:root {\n --color-dark: #222;\n --color-light: rgba(255, 255, 255, 0.5);\n\n --color-background: var(--color-light);\n --color-foreground: var(--color-dark);\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --color-background: var(--color-dark);\n --color-foreground: var(--color-light);\n }\n}To get the theme into my canvas-related code, I set up a theme object to hold the values:
const theme = {};Next, I wrote a function to pull in the theme colors using window.getComputedStyle(). After defining the function, I call it immediately to populate the theme object:
function importTheme() {\n theme.foreground =\n window\n .getComputedStyle(document.documentElement)\n .getPropertyValue(\"--color-foreground\")\n .trim() || \"black\";\n theme.background =\n window\n .getComputedStyle(document.documentElement)\n .getPropertyValue(\"--color-background\")\n .trim() || \"white\";\n}\nimportTheme();I set this up with just two theme colors, but you can import as many (or few) as you like. Be sure to set a sensible default or fallback for each color though, just in case your theme’s custom property names change.
\nWith this in place, I can set my canvas animation’s colors by referencing them from the theme object. For example:
context.fillStyle = theme.foreground;The final bit of magic comes when you add an event listener to a MediaQueryList:
const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\nmediaQuery.addEventListener(\"change\", importTheme);Here I’ve used matchMedia() to get a MediaQueryList object. Typically we use the matches property of this object to establish whether the media query currently matches or not. A lesser-known option, however, is that you can attach an event listener to it that will be triggered whenever the query’s status changes. So cool! With this in place, the canvas contents will update whenever the user’s theme changes. Here’s an example of that:
https://www.youtube.com/watch?v=pALIuO5uHUA
\nThis video demonstrates how a canvas element rendering a dark sine wave against a light background can miraculously transform into a light sine wave against a dark background using CSS custom properties and a bit of JavaScript.
I put together a quick demo of this in a fork of Alvin Shaw’s Canvas Sine Wave Experiment:
\nHopefully this is helpful to someone out there. Happy theming!
\n","social_text":"Need to pipe your CSS theme into a `canvas` element? Here’s how I did it.","url":"https://www.aaron-gustafson.com/notebook/passing-your-css-theme-to-canvas/","tags":["accessibility","animation","CSS","design","JavaScript"],"date_published":"2025-05-01T21:49:27Z"},{"id":"https://www.aaron-gustafson.com/publications/books/learning-web-design-sixth-edition/","title":"📗 Learning Web Design","content_html":"Do you want to build web pages but have no prior experience? This friendly guide is the perfect place to start. You'll begin at square one, learning how the web and web pages work, and then steadily build from there. By the end of the book, you'll have the skills to create a simple site with multicolumn pages that adapt for mobile devices.
\n","url":"https://www.oreilly.com/library/view/learning-web-design/9781098137670/","tags":["accessibility","CSS","HTML","JavaScript","progressive enhancement","responsive web design","web design","web development","web standards"],"date_published":"2025-05-01T00:00:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/exploring-ais-role-in-accessibility-with-gymnasium/","title":"✍🏻 Exploring AI’s Role in Accessibility","summary":"I met up with Jeremy Osborne and Andrew Miller to talk about the benefits and harms of AI as it relates to accessibility.","content_html":"Earlier this month I joined Jeremy Osborne and Andrew Miller to talk about the benefits and harms of AI as it relates to accessibility. It was livestreamed on a few platforms, but I wanted to drop links to the transcript and archival video in case you’re interested.
\nAbout a year ago, the folks at Global Symbols pitched me on their vision for using image generation models to create new AAC symbols that fit thematically within an existing set. It was a truly compelling use case for generative AI and I was thrilled to fund their project through the AI for Accessibility grant program.
\nFast forward to today and their project has launched! Please check it out and share it with any AAC users in your life!
\n","social_text":"I am incredibly excited about this: crowdsourced & AI-assisted symbol generation for #AAC users. Now people can create the symbols they need in their lives. #NoGatekeepers","url":"https://www.aaron-gustafson.com/notebook/links/symbol-creator-ai/","external_url":"https://scai.globalsymbols.com/","tags":["accessibility","AI/ML"],"date_published":"2025-04-07T22:14:51Z"},{"id":"https://www.aaron-gustafson.com/appearances/podcasts/2025-04-02-exploring-ais-role-in-accessibility/","title":"🎧 Exploring AI’s Role in Accessibility","content_html":"I met up with Jeremy Osborne and Andrew Miller to talk about the benefits and harms of AI as it relates to accessibility.
\n","url":"https://www.youtube.com/live/7ObB4jM-QXU","tags":["accessibility","AI/ML"],"date_published":"2025-04-02T00:00:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/speech-accessibility-project-data-leads-to-recognition-improvements-on-microsoft-azure/","title":"🔗 Speech Accessibility Project data leads to recognition improvements on Microsoft Azure","content_html":"This is the kind of work that keeps me excited about the potential of AI to meaningfully improve people’s lives. I’m so proud to be playing a small part in this project.
\n","social_text":"This is the kind of work that keeps me excited about the potential of AI to meaningfully improve people’s lives.","url":"https://www.aaron-gustafson.com/notebook/links/speech-accessibility-project-data-leads-to-recognition-improvements-on-microsoft-azure/","external_url":"https://speechaccessibilityproject.beckman.illinois.edu/article/2025/01/31/speech-accessibility-project-data-leads-to-recognition-improvements-on-microsoft-azure","tags":["accessibility","AI/ML"],"date_published":"2025-01-31T22:39:05Z"},{"id":"https://www.aaron-gustafson.com/notebook/on-diversity/","title":"✍🏻 On Diversity","summary":"Seeing the current U.S. administration taking an axe to DEI programs in the government and bully private businesses to do the same has me incredibly frustrated, confused, and (yes) angry. I want more equality and more opportunity in the world, not less.","content_html":"I’ve been broadly working in the DEI (or DEIA if you like) sphere for decades now. Most of my work has been coming at it from the accessibility side of things, but I got really involved in allyship and more traditional DEI work starting in 2019. Seeing the current U.S. administration taking an axe to DEI programs in the government and bully private businesses to do the same has me incredibly frustrated, confused, and (yes) angry. I want more equality and more opportunity in the world, not less.
\nAnd so, when I was listening to the latest episode of The Weekly Show with Jon Stewart, I was struck by how the left and right may actually be more aligned on DEI than the headlines lead us to believe.
\nIn the episode, Stewart was interviewing former New Jersey Governor Chris Christie, a Republican. When the topic of DEI came up, they got into a discussion of merit vs. diversity in the context of the Secretary of Defense role. Both agreed that, in terms of merit, General Lloyd Austin was a much better hire than Fox’s former weekend host Pete Hegseth. The fact that Austin is also Black has no more impact on his being a better candidate than the fact that Pete Hegseth being White makes him a worse candidate. What Austin does bring to the table, however, is first-hand knowledge of what it’s like to rise up the ranks as a Black soldier. That’s a significant knowledge gap when it comes to the U.S. military, whose top brass isn’t representative of the diversity of its personnel.
\nThis is something that Christie actually points out when discussing becoming the U.S. Attorney in New Jersey back in 2002:
\n\n\nWhen I got there, I just did a lot of walking around the office to see, okay, who’s here? Jon, it was the whitest, malest office I had ever been in in my life. And I was coming from private law practice.
\n
He, rightly, saw this as a problem and wanted to address it. He told his staff
\n\n\n[We need] to go out and recruit candidates who are African-American, Latino, Asian, women. Bring them to me. If they’re not good, I’m not going to hire them. But I’m convinced we’re not seeing them.
\n
His approach to address this was perfectly rational and aligned with the approach Jon had discussed mere moments before:
\n\n\nWhat I found was hiring has a certain inertia to it, right? Generally, the people that started whatever industry or whatever office did, generally hire close to people that resemble them. So I’m not even talking about White/Black. I’m talking about like… I’ll just go with late-night comedy, right?
\nDavid Letterman revolutionized late-night comedy. He did it with a lot of Harvard, Lampoon, SNL, same way, writers. The comedy writing industry was for a long time — not necessarily out of malevolence or prejudice — the inertia of it, the status quo of it, was nerdy white dudes from Harvard and the other Ivy Leagues.
\nBut even when we went to like, “Oh, we’re going to do blind submissions,” what we didn’t realize is all the agents are also steeped in that same status quo. So all the resumes — even when we would get them — still predominantly [trails off]. When we went specifically to say — now, this is what you would consider DEI — “Give us not that. Open it up to make sure you give us women, people of color, other writers, so that we can at least see what that is.” And all of a sudden, we found these incredible writers. Now, you could say, “Oh, you put diversity over competence,” but that’s the red herring. We didn’t. We opened up what were stagnant pools. Pools that were incestuous. And we opened up those tributaries. Isn’t that what increases competition, not decreases it?
\n
What’s fascinating here is that they are both making the same point. As Christie says later
\n\n\nWe then went about this process of hiring a large number of African-American, Latino, and Asian prosecutors, but I would tell you that every one of them checked both boxes. They checked the box of, “they now look more like the community we represent than we did before.” And these are really good lawyers.
\n
So these two men from very different political viewpoints totally agree on the importance of representation. So where’s the issue?
\nWhen Stewart highlighted how aligned their two perspectives were and Christie pushed back, stating that DEI policies were problematic:
\n\n\nI think there have been a number of areas where there are people who hire certain folks just for their diversity. I’ve seen it happen here in New Jersey, in the government since I left. Where people say, “I am going to make sure that I have one of every…” It’s almost like a half a Noah’s Ark. “I’m going to have one of these and one of these and one one of these and one of these.”
\n
Stewart questioned that:
\n\n\nBut you just told me that’s what you did in the prosecutor’s office.
\n
But Christie didn’t see it that way:
\n\n\nNo, what I did was get them in to interview them. If it turned out, Jon, that they were also really good lawyers, they got hired. I’m talking about something different. I’m talking about predetermining the outcome in the way that you just talked about — and I believe that legacy admissions predetermined the outcome — that there have been some in charge of government across this country who have predetermined determined outcomes and said, “I am going to have this many African-Americans, this many Latinos, this many Asians, this many lesbians, this many gay men…” I think that when people see that, they say to themselves, “That’s not right either.”
\n
What he’s talking about is what I’d call performative DEI. It’s not substantive, but attempts to give off the appearance of being so. It’s the DEI equivalent of greenwashing.
\nWhen people hire folks or celebrate folks for their diversity rather than their diversity plus their competence or talents, it undermines the legitimacy of DEI programs that are attempting to do what they both discussed being important: representation.
\nAs they both said, we need to screen in job applicants who wouldn’t otherwise consider applying for roles in our organizations. Christie talked about this too:
\n\n\nThe aha moment for me on that concept and why it was the right way to go was there was a young guy that I hired very early on: African-American, University of Michigan, University of Penn Law School, clerk for Alan Page — the former Minnesota Viking, defensive tackle in the Supreme Court of Minnesota— He’s from New Jersey, grew up in Maplewood. I said to him, “Why didn’t you ever apply here before?” He said, “Because I knew people like me wouldn’t get hired.”
\n
Hiring is just part of the process though. You can widen the applicant funnel and bring in a more representative — which is to say diverse — applicant pool with relatively little effort. Where things often fall short is retention.
\nIf your organization isn’t excited at the prospect of a more diverse workforce and prepared to support them when they are onboarded, you need to press pause and get prepared. Similarly, if your company is eager, but very homogenous, you’ve also got work to do. No one wants to come into a job and feel like “the only” or “the token” anything. And even if they were the most qualified applicant for the position, some jackass will say something that implies they are. It’s a tale as old as time and you need to be prepared for that reality.
\nThe first thing you need to do is educate. You need to help folks on your team understand the gaps in your collective knowledge & experience. They need to see that a more diverse team can help fill those gaps. The data that shows that more diverse organizations are more successful. Share that! I’m guessing most of your team is there because they want your organization to be as successful as possible.
\nAnd make sure they understand the historical barriers folks from different communities have faced in getting access to jobs at organizations like yours… even when they were equally or more accomplished than folks from the dominant group. As Stewart said on the show:
\n\n\nIt’s not rigging [the system] in a different direction, it’s unrigging it.
\n
It’s also important to note that the process here needs to be inclusive as well… call people in, don’t call them out. Everyone is on their own journey and deserves the space to fail and learn from their mistakes. If someone says something offensive, let them know that it’s offensive and why. Tell them what they should say — if anything — instead.
\nIf you approach people with empathy, you’re much more likely to get a positive response. And, Twitter aside, most folks aren’t out in these streets trying to be trolls. People are a product of their own experiences and those experiences can be quite different from yours. Help your colleagues broaden their perspectives with positive reinforcement, not chastising.
\nThat said, you also need the proper mechanisms in place to address non-inclusive behaviors when they become a pattern or reach a certain threshold of severity. Those mechanisms need to outline the consequences for such behavior. The severity of the consequence needs to align with the severity of the harm, but it may need to escalate in severity for repeat offenses. Depending on the size of your organization, coming up with these policies and consequences could be a group activity to ensure both awareness and buy-in.
\nTo be clear, neither Jon Stewart nor the progressive left are pushing for diversity quotas like Christie seems to think they are. But there are folks out there who are. These performative DEI programs have got to go. As my colleague and friend Ebele Okoli says “bake it in, don’t cake it on.”
\nDon’t hire or promote someone just because you think their headshot would help to melanate your About page. That’s not what DEI is about and it doesn’t help us to reverse the dire course the U.S. government and cowardly companies are taking currently. DEI needs to be a part of every process in your organization on order to give everyone — white men like me included — an equal chance to succeed.
\nCast a wide net. Hire and promote for competence and to address the knowledge gaps your team absolutely has. Foster an inclusive workplace that values the different lived experience and perspectives brought to the table by each and every employee. That is how you succeed with DEI. It’s also how DEI will help your organization succeed in its mission and grow to hire more folks.
\nAnd as more of the incredibly talented people out there get hired on at organizations like yours, all boats will rise, creating more jobs and space for mediocre people of all stripes to get hired and rise up the ranks too. But they won’t get there just because or who they know, what they look like, or because they tick a particular box on your diversity bingo card.
\n","social_text":"Seeing the current U.S. administration taking an axe to DEI programs in the government and bully private businesses to do the same has me incredibly frustrated, confused, and (yes) angry. I want more equality and more opportunity in the world, not less.","url":"https://www.aaron-gustafson.com/notebook/on-diversity/","tags":["equality","inclusion","society","industry","accessibility","empathy"],"date_published":"2025-01-30T23:11:54Z"},{"id":"https://www.aaron-gustafson.com/speaking-engagements/expanding-accessibility-with-ai/","title":"📢 Expanding Accessibility with AI","summary":"This session, hosted by Aaron Gustafson and Ioana Tanase explores the transformative role of AI in enhancing accessibility. Together, you will uncover the pivotal role AI plays in crafting cutting-edge accessible technologies, learn about innovative AI tools that empower individuals with disabilities, and dive into best practices for creating inclusive AI solutions. Together, we will also explore the exciting future of AI in pushing the boundaries of accessibility.","content_html":"This session, hosted by Aaron Gustafson and Ioana Tanase explores the transformative role of AI in enhancing accessibility. Together, you will uncover the pivotal role AI plays in crafting cutting-edge accessible technologies, learn about innovative AI tools that empower individuals with disabilities, and dive into best practices for creating inclusive AI solutions. Together, we will also explore the exciting future of AI in pushing the boundaries of accessibility.
\nLearning objectives:
\nform-required-checkboxes web component enables that.","content_html":"HTML checkboxes debuted as part of HTML 2.0 in 1995. Our ability to mark an individual checkbox as being required became part of the HTML5 spec that published in 2014. A decade later, we can still only make checkboxes required on a case-by-case basis. To overcome this limitation, I had created a jQuery plugin that allowed me to indicate that a user should choose a specific number of items from within a checkbox group. Yesterday I turned that plugin into a web component: form-required-checkboxes.
Before I tuck into the details, I’ll start by saying that the web component begins with the assumption that you are following best practices with respect to form markup:
\nfieldset with a legendname (e.g., “foo[]”).In other words, they should look something like this:
\n<fieldset>\n <legend>Group 1 label</legend>\n <ul>\n <li>\n <label>\n <input type=\"checkbox\" name=\"foo[]\" value=\"1\" />\n First item\n </label>\n </li>\n <li>\n <label>\n <input type=\"checkbox\" name=\"foo[]\" value=\"2\" />\n Second item\n </label>\n </li>\n <!-- options continue -->\n </ul>\n</fieldset>To use the web component, you wrap the group in a form-required-checkboxes element and then include the JavaScript to initialize it.
<form-required-checkboxes>\n <fieldset>\n <legend>Group 1 label</legend>\n <!-- etc. -->\n </fieldset>\n</form-required-checkboxes>\n\n<!-- at the end of your document -->\n<script src=\"/js/web-components/form-required-checkboxes.js\" async></script>If you’re following right along, there’s an error waiting for you in the console — we need to set the requirement rules.
The form-required-checkboxes element requires at least one attribute to function, but using some of the others you can more fully customize the experience for users:
required - Represents the range of required values. You can set this up in one of three ways depending on your needs:\nnotice (optional) - This is a string description that explains details of the required value in plain language. If you don’t supply one, the component will create one for you based on the current language (if supported). This description will be added as a small element within the component (as a sibling to the fieldset).error (optional) - This is a string validation error you’d like to be shown when the validation criteria is not met. If not provided, an appropriate error message will be generated based on the current language (if supported).lang (optional) - Language code for localized messages (e.g., “en,” “es,” “fr,” “de”). Falls back to the nearest ancestor’s lang attribute or the document language.The component now includes built-in translations for 16 languages: English, Chinese (Mandarin), Hindi, Spanish, French, Arabic, Bengali, Portuguese, Russian, Japanese, German, Punjabi, Javanese, Korean, Vietnamese, and Italian. Messages are automatically generated based on the lang attribute.
You can use it like this:
\n<form-required-checkboxes required=\"3\" lang=\"es\">\n <fieldset>\n <legend>Opciones</legend>\n <!-- Will display: \"Elija 3 de la lista\" -->\n </fieldset>\n</form-required-checkboxes>The component automatically detects the language from the lang attribute on the element itself, the nearest ancestor element, or the document’s lang attribute, falling back to English if none is found.
You can also register custom translations or override existing ones using the FormRequiredCheckboxesElement.registerTranslations() static method. Regional language codes (e.g., en-US, es-MX) automatically fall back to their base language.
I put together a comprehensive demo of the web component over on GitHub:
\nYou can view the entire project (and suggest enhancements) over on the component’s Github repo.
\n","social_text":"Currently, we can only make checkboxes required or not, individually. In some cases you need to be able to set a specific number of checkboxes that need to be checked. My `form-required-checkboxes` web component enables that.","url":"https://www.aaron-gustafson.com/notebook/requirement-rules-for-checkboxes/","tags":["accessibility","forms","HTML","JavaScript","progressive enhancement","web components","web forms"],"date_published":"2024-07-05T21:08:34Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/why-i-care-deeply-about-web-accessibility-and-you-should-too/","title":"🔗 Why I Care Deeply About Web Accessibility And You Should Too","content_html":"I agree with so much of this piece… especially the expansive view of accessibility that is inclusive of both the disability divide and the digital divide.
\nGreat summary here:
\n\n\n","social_text":"I agree with so much of this piece, especially the expansive view of accessibility that is inclusive of both the disability divide and the digital divide.","url":"https://www.aaron-gustafson.com/notebook/links/why-i-care-deeply-about-web-accessibility-and-you-should-too/","external_url":"https://dev.to/schalkneethling/why-i-care-deeply-about-web-accessibility-and-you-should-too-274a","tags":["accessibility","inclusive design","performance"],"date_published":"2024-05-09T17:36:18Z"}]}[M]y passion for accessibility stems from experiencing accessibility barriers personally, observing their impact on others, and holding the conviction that technology should tear down divides - not erect new ones. I want to fulfill, and help you fulfill, the web’s promise of equal access and opportunity for everyone, regardless of circumstances. Digital accessibility should not be an accommodation but a fundamental right and prerequisite for technology to truly better humanity.
\n