# aria

WAI-ARIA is a suite of web accessibility standards that defines semantics, roles, states, properties, and mappings for making web content and applications accessible to assistive technologies.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## UK funds flying broadband stations with power beamed from below

DevFeed: [UK funds flying broadband stations with power beamed from below](<https://devfeed.tech/articles/uk-funds-flying-broadband-stations-with-power-beamed-from-below-30927.md>)

Original publisher: [Read original article](<https://www.theregister.com/networks/2026/09/16/uk-funds-flying-broadband-stations-with-power-beamed-from-below/5296545>)

Author: Dan Robinson

Published: 2026-09-16T08:30:00Z

Content type: news

Language: en

Sources: [www.theregister.com - Articles](<https://devfeed.tech/sources/www-theregister-com-articles.md>)

Topics: [aria](<https://devfeed.tech/topics/aria.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [broadband](<https://devfeed.tech/tags/broadband.md>), [connectivity](<https://devfeed.tech/tags/connectivity.md>), [drones](<https://devfeed.tech/tags/drones.md>), [government-of-the-united-kingdom](<https://devfeed.tech/tags/government-of-the-united-kingdom.md>), [networks](<https://devfeed.tech/tags/networks.md>), [uk](<https://devfeed.tech/tags/uk.md>)

### AI overview

The UK's GBP 70 million ARIA program is backing 18 projects intended to keep broadband connectivity aloft for up to a week using power beamed from below.

### Source excerpt

GBP 70M ARIA program backs 18 projects aiming to keep connectivity aloft for a week

## Meet cypress tap: give your AI agent the context the Cypress app shows you

DevFeed: [Meet cypress tap: give your AI agent the context the Cypress app shows you](<https://devfeed.tech/articles/meet-cypress-tap-give-your-ai-agent-the-context-the-cypress-app-shows-you-12612.md>)

Original publisher: [Read original article](<https://www.cypress.io/blog/cypress-tap-cli/>)

Author: Authoring; Not Just Debugging

Published: 2026-08-18T19:50:51Z

Content type: article

Language: en

Sources: [Cypress Blog](<https://devfeed.tech/sources/cypress-blog.md>)

Topics: [Cypress](<https://devfeed.tech/topics/cypress.md>), [AI Agent](<https://devfeed.tech/topics/ai-agent.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [aria](<https://devfeed.tech/topics/aria.md>)

Tags: [ai-agent](<https://devfeed.tech/tags/ai-agent.md>), [cli](<https://devfeed.tech/tags/cli.md>), [code](<https://devfeed.tech/tags/code.md>), [cypress](<https://devfeed.tech/tags/cypress.md>), [testing](<https://devfeed.tech/tags/testing.md>)

### AI overview

Cypress tap is a beta set of CLI commands that lets an AI coding agent drive an already running Cypress open session from the terminal. The agent can run specs, read failures, pin snapshots for time travel, and inspect the application's DOM and accessibility tree while authoring or debugging tests.

### Source excerpt

cypress tap is a new set of CLI command to pull Cypress app context into your terminal. It lets AI agent drive a Cypress open session from the terminal, so it can author new tests, extend existing ones, and read failures the way the Cypress app shows them.

## For your business to thrive in the agentic AI era, treat accessibility as foundational to your AI strategy

DevFeed: [For your business to thrive in the agentic AI era, treat accessibility as foundational to your AI strategy](<https://devfeed.tech/articles/for-your-business-to-thrive-in-the-agentic-ai-era-treat-accessibility-as-foundational-to-your-ai-strategy-9432.md>)

Original publisher: [Read original article](<https://www.deque.com/blog/for-your-business-to-thrive-in-the-agentic-ai-era-treat-accessibility-as-foundational-to-your-ai-strategy/>)

Author: Preety Kumar

Published: 2026-07-29T10:51:43Z

Content type: article

Language: en

Sources: [Deque](<https://devfeed.tech/sources/deque.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [AI Strategy](<https://devfeed.tech/topics/ai-strategy.md>), [Artificial Intelligence](<https://devfeed.tech/topics/ai.md>), [agentic browsing](<https://devfeed.tech/topics/agentic-browsing.md>), [AI Bots](<https://devfeed.tech/topics/ai-bots.md>), [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web](<https://devfeed.tech/topics/web.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessibility-best-practices](<https://devfeed.tech/tags/accessibility-best-practices.md>), [agentic-ai](<https://devfeed.tech/tags/agentic-ai.md>), [agentic-browsing](<https://devfeed.tech/tags/agentic-browsing.md>), [ai](<https://devfeed.tech/tags/ai.md>), [ai-bots](<https://devfeed.tech/tags/ai-bots.md>), [ai-strategy](<https://devfeed.tech/tags/ai-strategy.md>), [article](<https://devfeed.tech/tags/article.md>), [digital-accessibility](<https://devfeed.tech/tags/digital-accessibility.md>), [html](<https://devfeed.tech/tags/html.md>), [web](<https://devfeed.tech/tags/web.md>), [web-accessibility](<https://devfeed.tech/tags/web-accessibility.md>), [web-content-accessibility-guidelines](<https://devfeed.tech/tags/web-content-accessibility-guidelines.md>)

### AI overview

The article argues that digital accessibility should be foundational to AI strategy because AI agents increasingly browse, click, complete forms, and interpret web pages through structures also used by assistive technologies. It highlights semantic HTML, ARIA, WCAG conformance, and a sound accessibility tree as important for both human access and agentic navigation, while warning that accessibility failures remain widespread.

### Source excerpt

You need to build accessibility into how AI writes code from the first prompt, not fix it after the fact. And because the disability community has been perfecting human-computer interaction for different input and output modalities for decades, their expertise isn't just morally important; it's technically essential for building robust, reliable AI that actually works. The post For your business to thrive in the agentic AI era, treat accessibility as foundational to your AI strategy appeared first on Deque.

## Codename One Exposes a Portable Semantics Tree Across Accessibility Platforms

DevFeed: [Codename One Exposes a Portable Semantics Tree Across Accessibility Platforms](<https://devfeed.tech/articles/accessibility-semantics-the-ui-tree-you-cannot-see-19189.md>)

Original publisher: [Read original article](<https://www.codenameone.com/blog/accessibility-semantics/>)

Author: Shai Almog

Published: 2026-07-20T00:00:00Z

Content type: release

Language: en

Sources: [CodeName One](<https://devfeed.tech/sources/codename-one.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [ui](<https://devfeed.tech/topics/ui.md>), [aria](<https://devfeed.tech/topics/aria.md>), [API](<https://devfeed.tech/topics/api.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [api](<https://devfeed.tech/tags/api.md>), [aria](<https://devfeed.tech/tags/aria.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

Codename One introduces a portable semantics tree alongside its visual component tree, allowing platform accessibility APIs such as VoiceOver, TalkBack, Windows UI Automation, Linux AT-SPI, Java accessibility, and web ARIA to expose roles, states, values, actions, and virtual children. Standard controls infer semantics, while custom controls can extend or replace them.

### Source excerpt

Codename One now exposes a portable semantics tree to VoiceOver, TalkBack, UI Automation, AT-SPI, Java accessibility, and web ARIA.

## Building accessibility into a canvas-based product

DevFeed: [Building accessibility into a canvas-based product](<https://devfeed.tech/articles/building-accessibility-into-a-canvas-based-product-9554.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/building-accessibility-into-a-canvas-based-product/>)

Author: David Winslow; Elynn Lee

Published: 2026-07-01T17:56:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [Figma](<https://devfeed.tech/topics/figma.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [React](<https://devfeed.tech/topics/react.md>), [Data structures](<https://devfeed.tech/topics/data-structures.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [figma](<https://devfeed.tech/tags/figma.md>), [html](<https://devfeed.tech/tags/html.md>), [infinite](<https://devfeed.tech/tags/infinite.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

Figma explains how it added accessibility to its canvas-based product, whose browser-rendered accessibility tree is largely absent because the editor does not use traditional HTML and DOM for rendering. The solution combines an internal accessibility tree, a synchronized Mirror DOM React component, and selection synchronization so screen-reader and keyboard users can navigate and edit designs.

### Source excerpt

Building on a canvas unlocks performance that a traditional HTML web app can't touch. It also strips away any accessibility the browser gives you for free. Here's how we built it back in.

## Announcing Angular v22

DevFeed: [Announcing Angular v22](<https://devfeed.tech/articles/announcing-angular-v22-18908.md>)

Original publisher: [Read original article](<https://blog.angular.dev/announcing-angular-v22-c52bb83a4664?source=rss----447683c3d9a3---4>)

Author: Angular

Published: 2026-06-03T16:14:58Z

Content type: release

Language: en

Sources: [Angular](<https://devfeed.tech/sources/angular.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Forms](<https://devfeed.tech/topics/forms.md>), [aria](<https://devfeed.tech/topics/aria.md>), [reactive](<https://devfeed.tech/topics/reactive.md>), [angular material](<https://devfeed.tech/topics/angular-material.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [angular-material](<https://devfeed.tech/tags/angular-material.md>), [angular-release](<https://devfeed.tech/tags/angular-release.md>), [angular-v22](<https://devfeed.tech/tags/angular-v22.md>), [new-features](<https://devfeed.tech/tags/new-features.md>), [quality](<https://devfeed.tech/tags/quality.md>), [reactive-forms](<https://devfeed.tech/tags/reactive-forms.md>), [release](<https://devfeed.tech/tags/release.md>)

### AI overview

Angular v22 is released with updates focused on stability and developer ergonomics. The release moves Signal Forms, Angular Aria, and the Asynchronous Reactivity APIs to production-ready status. Signal Forms also receive documentation, community feedback updates, and Angular Material and Angular Aria integration support.

### Source excerpt

Today, we are thrilled to announce the release of Angular v22. We continue to be proud of the work we do with each release. Our goal is to maintain a high quality stream of features and improvements that make the workflows for developers smooth no matter how they build Angular applications. Angular is the solid foundation upon which you can build what's next on the web. This release features updates across stability, ergonomics and more. We want Angular to be a sort of launch pad that you can use as you build your next great application. There's some great features to discuss, so let's dive in. Production Ready is the Name of the Game On the Angular team, we take a lot of joy and pride in our ability to update our APIs to bring great new features to Angular. When bringing new features to the table, we typically release a feature as experimental or developer preview. This gives the team time to gather feedback and iterate on new features. During this time, features will undergo refinement with the intention of delivering the best possible version to the community. This is great except that it means some features will not be production ready even though developers are excited and ready to use them immediately. In this release, we're excited to be bringing 3 significant Angular features to production-ready, stable status: Signal Forms, Angular Aria and the Asynchronous Reactivity APIs. Signal Forms: Composable, Reactive and Ready to go We designed Signal Forms to be the new, robust forms API. Signal forms combine the best parts of Reactive forms, the value of strongly typed forms, as well as the things developers love about template driven forms and reactivity of signals. We put all of that together to make a reactive, composable and declarative form solution. When we launched Signal Forms in v21, we received strong signals (pun intended) from teams inside and outside of Google that we were on the right track. Since then, we've updated Signal Forms by: Adding a complet

## Designing Stable Interfaces For Streaming Content

DevFeed: [Designing Stable Interfaces For Streaming Content](<https://devfeed.tech/articles/designing-stable-interfaces-for-streaming-content-4277.md>)

Original publisher: [Read original article](<https://smashingmagazine.com/2026/05/designing-stable-interfaces-streaming-content/>)

Author: hello@smashingmagazine.com (Joas Pambou)

Published: 2026-05-01T08:00:00Z

Content type: article

Language: en

Sources: [Articles on Smashing Magazine -- For Web Designers And Developers](<https://devfeed.tech/sources/articles-on-smashing-magazine-for-web-designers-and-developers.md>)

Topics: [Streaming](<https://devfeed.tech/topics/streaming.md>), [real-time](<https://devfeed.tech/topics/real-time.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [AI Chat](<https://devfeed.tech/topics/ai-chat.md>), [aria](<https://devfeed.tech/topics/aria.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [coding](<https://devfeed.tech/tags/coding.md>), [performance](<https://devfeed.tech/tags/performance.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [streaming](<https://devfeed.tech/tags/streaming.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ux](<https://devfeed.tech/tags/ux.md>)

### AI overview

This article examines how to design stable interfaces for streaming content. It explains how continuously changing content affects scrolling, layout stability, rendering frequency, and interaction, using chat, log-feed, and transcription demos as examples.

### Source excerpt

Streaming UIs are an easy concept on the surface, but are quite complicated in practice. There are many considerations that need to be accounted for, from layout shifts and motion preferences to proper markup and various states, that may not be instantly obvious. What happens if the stream is interrupted? Can users tab through the UI on the keyboard as it shifts? What ARIA attributes might be needed?

## Getting from tested to battle-tested

DevFeed: [Getting from tested to battle-tested](<https://devfeed.tech/articles/getting-from-tested-to-battle-tested-20169.md>)

Original publisher: [Read original article](<https://blog.janestreet.com/getting-from-tested-to-battle-tested/>)

Author: Doug Patti

Published: 2025-12-03T00:00:00Z

Content type: article

Language: en

Sources: [Jane Street](<https://devfeed.tech/sources/jane-street.md>)

Topics: [Testing](<https://devfeed.tech/topics/testing.md>), [Software](<https://devfeed.tech/topics/software.md>), [Availability](<https://devfeed.tech/topics/availability.md>), [incident](<https://devfeed.tech/topics/incident.md>), [aria](<https://devfeed.tech/topics/aria.md>), [systems](<https://devfeed.tech/topics/systems.md>), [Network](<https://devfeed.tech/topics/network.md>)

Tags: [automated](<https://devfeed.tech/tags/automated.md>), [availability](<https://devfeed.tech/tags/availability.md>), [development](<https://devfeed.tech/tags/development.md>), [distributed-system](<https://devfeed.tech/tags/distributed-system.md>), [high-availability](<https://devfeed.tech/tags/high-availability.md>), [incident](<https://devfeed.tech/tags/incident.md>), [latency](<https://devfeed.tech/tags/latency.md>), [low-latency](<https://devfeed.tech/tags/low-latency.md>), [software](<https://devfeed.tech/tags/software.md>), [systems](<https://devfeed.tech/tags/systems.md>), [testing](<https://devfeed.tech/tags/testing.md>), [tests](<https://devfeed.tech/tags/tests.md>)

### AI overview

The article explains how Jane Street works to make testing more effective for reliable, high-availability software. It focuses on Aria, an internal distributed low-latency message bus, and introduces Antithesis as an end-to-end automated testing platform used to uncover critical scenarios that conventional tests may miss.

### Source excerpt

Testing is an essential part of building reliable software. It's a form of documentation, a reminder of mistakes of the past, and a boost of confidence when you want to refactor. But mostly, testing is a way of showing that your code is correct and resilient. Because it's so important, we've invested a lot of effort at Jane Street to develop techniques that make tests clearer, more effective, and more pleasant to write.

## and popover: Baseline layered UI patterns

DevFeed: [and popover: Baseline layered UI patterns](<https://devfeed.tech/articles/and-popover-baseline-layered-ui-patterns-4156.md>)

Original publisher: [Read original article](<https://web.dev/articles/baseline-in-action-dialog-popover?hl=en>)

Author: David A Herron Homepage

Published: 2025-11-25T08:00:00Z

Content type: article

Language: en

Sources: [web.dev: Articles](<https://devfeed.tech/sources/web-dev-articles.md>)

Topics: [dialog](<https://devfeed.tech/topics/dialog.md>), [aria](<https://devfeed.tech/topics/aria.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Web](<https://devfeed.tech/topics/web.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [dialog](<https://devfeed.tech/tags/dialog.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [modal](<https://devfeed.tech/tags/modal.md>), [ui](<https://devfeed.tech/tags/ui.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [user-interface](<https://devfeed.tech/tags/user-interface.md>), [web-applications](<https://devfeed.tech/tags/web-applications.md>)

### AI overview

This article explains how to build modal and popover UI patterns with features built into modern web browsers. It demonstrates a sign-up modal that appears when a user tries to save an image to a favorites list without being logged in, and discusses the accessibility behavior required for modal dialogs.

### Source excerpt

Learn how to build UI patterns for modal windows and prompts using the and popover web features.

## ARIA Isn't A Solution for Every Digital Accessibility Issue

DevFeed: [ARIA Isn't A Solution for Every Digital Accessibility Issue](<https://devfeed.tech/articles/aria-isn-t-a-solution-for-every-digital-accessibility-issue-36121.md>)

Original publisher: [Read original article](<https://www.boia.org/blog/aria-isnt-a-solution-for-every-digital-accessibility-issue>)

Author: Sarah

Published: 2025-10-20T19:45:00Z

Content type: tutorial

Language: en

Sources: [Blog-Main](<https://devfeed.tech/sources/blog-main.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [digital accessibility](<https://devfeed.tech/topics/digital-accessibility.md>), [Web Accessibility (a11y)](<https://devfeed.tech/topics/web-accessibility.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessibility-guidelines](<https://devfeed.tech/tags/accessibility-guidelines.md>), [aria](<https://devfeed.tech/tags/aria.md>), [developer](<https://devfeed.tech/tags/developer.md>), [developers](<https://devfeed.tech/tags/developers.md>), [digital-accessibility](<https://devfeed.tech/tags/digital-accessibility.md>), [html](<https://devfeed.tech/tags/html.md>), [semantic](<https://devfeed.tech/tags/semantic.md>), [web-accessibility](<https://devfeed.tech/tags/web-accessibility.md>)

### AI overview

The article explains that WAI-ARIA is not a universal solution for digital accessibility. It describes evidence associating ARIA usage with more detected accessibility errors while noting that correlation does not prove causation, and recommends using semantic HTML instead when appropriate.

### Source excerpt

Many digital accessibility initiatives fail -- or, at least, they're less successful than they could be -- because they're assigned solely to a single developer or group of developers. Regardless of the size of your business or your industry, every person on your team needs to understand the importance of accessibility. That includes content creators, designers, and customer service representatives.

## Vanilla JavaScript support for Tailwind Plus

DevFeed: [Vanilla JavaScript support for Tailwind Plus](<https://devfeed.tech/articles/vanilla-javascript-support-for-tailwind-plus-3505.md>)

Original publisher: [Read original article](<https://tailwindcss.com/blog/vanilla-js-support-for-tailwind-plus>)

Published: 2025-07-25T14:30:00Z

Content type: release

Language: en

Sources: [Tailwind CSS Blog](<https://devfeed.tech/sources/tailwind-css-blog.md>)

Topics: [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [Vanilla JavaScript](<https://devfeed.tech/topics/vanilla-js.md>), [ui](<https://devfeed.tech/topics/ui.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [HTML](<https://devfeed.tech/topics/html.md>), [aria](<https://devfeed.tech/topics/aria.md>), [dialog](<https://devfeed.tech/topics/dialog.md>), [cross-platform](<https://devfeed.tech/topics/cross-platform.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [component](<https://devfeed.tech/tags/component.md>), [cross-platform](<https://devfeed.tech/tags/cross-platform.md>), [dialog](<https://devfeed.tech/tags/dialog.md>), [framework](<https://devfeed.tech/tags/framework.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

Tailwind Plus now provides fully functional, accessible, and interactive UI blocks for projects that do not use React or Vue. Its new Elements library offers headless custom elements for building interactive interfaces with HTML, utility classes, or custom CSS.

### Source excerpt

Every UI block in Tailwind Plus is now fully functional, accessible, and interactive, even if you don't use a framework like React or Vue.

## Up and Coming ARIA

DevFeed: [Up and Coming ARIA](<https://devfeed.tech/articles/up-and-coming-aria-9445.md>)

Original publisher: [Read original article](<https://webaim.org/blog/up-and-coming-aria/>)

Author: John Northup

Published: 2025-05-30T18:19:41Z

Content type: tutorial

Language: en

Sources: [WebAIM Blog](<https://devfeed.tech/sources/webaim-blog.md>)

Topics: [aria](<https://devfeed.tech/topics/aria.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Accessibility (a11y)](<https://devfeed.tech/topics/web-accessibility.md>), [Web](<https://devfeed.tech/topics/web.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [android](<https://devfeed.tech/tags/android.md>), [aria](<https://devfeed.tech/tags/aria.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [edge](<https://devfeed.tech/tags/edge.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [ios](<https://devfeed.tech/tags/ios.md>), [macos](<https://devfeed.tech/tags/macos.md>), [safari](<https://devfeed.tech/tags/safari.md>), [uncategorized](<https://devfeed.tech/tags/uncategorized.md>), [web](<https://devfeed.tech/tags/web.md>), [web-accessibility](<https://devfeed.tech/tags/web-accessibility.md>), [windows](<https://devfeed.tech/tags/windows.md>), [windows-11](<https://devfeed.tech/tags/windows-11.md>)

### AI overview

This article surveys emerging ARIA 1.3 features, including aria-errormessage, aria-description, aria-details, and aria-keyshortcuts. It explains their intended uses and reports varying support across browsers, screen readers, and operating systems tested in May 2025.

### Source excerpt

If you work in web accessibility, you've probably spent a lot of time explaining and implementing the ARIA roles and attributes that have been around for years--things like aria-label, aria-labelledby, and role="dialog". But the ARIA landscape isn't static. In fact, recent ARIA specifications (especially ARIA 1.3) include a number of emerging and lesser-known features that [...]

## What's new in Svelte: October 2024

DevFeed: [What's new in Svelte: October 2024](<https://devfeed.tech/articles/what-s-new-in-svelte-october-2024-3120.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/whats-new-in-svelte-october-2024>)

Author: Dani Sandoval

Published: 2024-10-01T00:00:00Z

Content type: news

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Svelte](<https://devfeed.tech/topics/svelte.md>), [migration](<https://devfeed.tech/topics/migration.md>), [Server-side rendering](<https://devfeed.tech/topics/server-side-rendering.md>), [aria](<https://devfeed.tech/topics/aria.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Maintainers](<https://devfeed.tech/topics/maintainers.md>), [Caching](<https://devfeed.tech/topics/caching.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [caching](<https://devfeed.tech/tags/caching.md>), [cli](<https://devfeed.tech/tags/cli.md>), [maintainers](<https://devfeed.tech/tags/maintainers.md>), [migration](<https://devfeed.tech/tags/migration.md>), [news](<https://devfeed.tech/tags/news.md>), [release](<https://devfeed.tech/tags/release.md>), [ssr](<https://devfeed.tech/tags/ssr.md>), [svelte](<https://devfeed.tech/tags/svelte.md>)

### AI overview

This October 2024 Svelte update covers work toward the Svelte 5 release, including migration tooling, performance improvements, SSR changes, accessibility warnings, debugging enhancements, CLI size reduction, and SvelteKit typed-array support. It also highlights community-built Svelte apps, resources, and libraries.

### Source excerpt

It's October! Which can only mean one thing... Svelte Summit Fall is only 19 days away! Stay up to date with the latest Svelte Summit news by subscribing to its official newsletter or follow along during the stream on the Discord. Thanks to the number of folks who have been trying the Svelte 5 release candidates, the maintainers have been hard at work in addressing bugs and implementing performance improvements for the upcoming release. This month, we'll cover the most notable changes along with the many apps, resources and libraries that the community has created over the last few weeks. What's new in Svelte Have you been wanting to migrate your project to Svelte 5? Want to test out the migration tool and give the team feedback? Then you should give the svelte-migrate tool a try! npx svelte-migrate svelte-5 is all you need to get started. If you run into any problems, please file an issue. Here's what else is new... Legacy components can now be manually instantiated asynchronously with the sync option (5.0.0-next.237, #12970) The each block is now much better in SSR mode - removing an unnecessary declaration and caching the length of the array before iterating over it (5.0.0-next.242, #13060) A callstack will now appear if an infinite loop is detected - with the last ten effects printed out - in development mode (5.0.0-next.246, #13231) Projects that use @sveltejs/enhanced-img should see a much smaller bundle thanks to module variables being inlined into the template (5.0.0-next.246, #13075) There are now a11y warnings for <button> / <a> elements that are missing an aria-label and content (5.0.0-next.250, #13130) Animations now take into account zoom when calculating transforms (5.0.0-next.254, #13317) <svelte:self> is now deprecated in runes mode. It's not necessary since components can now import themselves (5.0.0-next.256, #13333) svelte-check, the CLI is used by almost every Svelte project, is now much smaller (repo, post) Curious to see all that the maintainer

## Astro 4.1

DevFeed: [Astro 4.1](<https://devfeed.tech/articles/astro-4-1-3188.md>)

Original publisher: [Read original article](<https://astro.build/blog/astro-410/>)

Author: Erika; Emanuele Stoppa; Matthew Phillips; Nate Moore; Bjorn Lu

Published: 2024-01-04T00:00:00Z

Content type: release

Language: en

Sources: [The Astro Blog](<https://devfeed.tech/sources/the-astro-blog.md>)

Topics: [Astro](<https://devfeed.tech/topics/astro.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [releases](<https://devfeed.tech/topics/releases.md>), [Release notes](<https://devfeed.tech/topics/release-notes.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [astro](<https://devfeed.tech/tags/astro.md>), [audit](<https://devfeed.tech/tags/audit.md>), [bug](<https://devfeed.tech/tags/bug.md>), [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [features](<https://devfeed.tech/tags/features.md>), [improvements](<https://devfeed.tech/tags/improvements.md>), [release](<https://devfeed.tech/tags/release.md>), [release-notes](<https://devfeed.tech/tags/release-notes.md>), [upgrade](<https://devfeed.tech/tags/upgrade.md>)

### AI overview

Astro 4.1 is a smaller release focused on bug fixes and improvements. It adds accessibility audit rules, extends the `client:visible` directive with viewport margins, and supports custom cookie encoding and decoding.

### Source excerpt

Astro 4.1, our first release of the new year, is here! This release includes new accessibility audit rules, an extended `client:visible` directive, and more.

## A guide to troublesome UI components

DevFeed: [A guide to troublesome UI components](<https://devfeed.tech/articles/a-guide-to-troublesome-ui-components-9362.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/a-guide-to-troublesome-ui-components/>)

Author: Martin Lexelius

Published: 2023-02-14T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>), [User experience (UX)](<https://devfeed.tech/topics/ux.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Code quality](<https://devfeed.tech/topics/code-quality.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [code-quality](<https://devfeed.tech/tags/code-quality.md>), [guide](<https://devfeed.tech/tags/guide.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ux](<https://devfeed.tech/tags/ux.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

A guide to designing and implementing troublesome UI components accessibly. It explains why accessibility should be planned early and highlights keyboard interaction, focus management, screen-reader announcements, correct HTML elements, ARIA attributes, and code quality.

### Source excerpt

A common opinion is that accessibility is expensive, and that if you think accessibility is expensive, you can deal with it later. Here's the twist: it will be expensive if you deal with it later. However, accessibility is not expensive if you discuss it as a team early in the process. It is possible to build just about anything, it comes down to time and money. But no client ever has said, "Hey, we have a lot of time and money!" Accessibility is not expensive if you proactively plan for it. That's why you need to learn how to avoid some of the common pitfalls. Before we start User interface (UI) elements are the parts we use to build apps or websites, such as links, accordions and checkboxes etc. Some UI components are more complicated than other components. And some components are really complicated. All roles that build for the web (product owners, UX designers, art directors, developers, QA engineers) must know this. The challenges The components in this article all have the following challenges in common: Keyboard interaction. Everything that can be done with a mouse, must be possible to do with a keyboard. This includes navigating, opening and closing items, activating, stopping, starting, selecting, etc. Focus appearance and management. Users navigating by keyboard must know where they are. Always show the user's current position in the interface. The focus order should be logical and intuitive. Consistent announcements. All events and interactions should correspond as understandable and relevant audio feedback in screen readers. Buttons should describe themselves as buttons, links as links, etc. Code quality. Using the correct elements and ARIA attributes, as well as valid HTML. The components Following are some UI components that have non-trivial considerations to use in an accessible way: Custom selects Native HTML <select> elements (sometimes referred to as dropdowns, not to be confused with disclosures) has the most understandable and usable experience a

## Aria-Label is Not Always the Answer

DevFeed: [Aria-Label is Not Always the Answer](<https://devfeed.tech/articles/aria-label-is-not-always-the-answer-38440.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2021-11-29/aria-label-is-not-always-the-answer/>)

Author: Eevis Panula

Published: 2023-01-03T08:57:28.550000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>), [W3C](<https://devfeed.tech/topics/w3c.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessible](<https://devfeed.tech/tags/accessible.md>), [aria](<https://devfeed.tech/tags/aria.md>), [details](<https://devfeed.tech/tags/details.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [w3c](<https://devfeed.tech/tags/w3c.md>)

### AI overview

This tutorial explains that aria-label is not universally appropriate or consistently supported across HTML elements. It describes when to use aria-label, when aria-labelledby is preferable, and the element types where aria-label works consistently with assistive technologies.

### Source excerpt

Okay, you've learned about accessibility and that there is sometimes a need to make, for example, the link text more descriptive for screen reader users. You've learned about the aria-label-attribute, and its powers. It's the answer to everything! I'm afraid I have to say that it is not. It doesn't work with all HTML elements. In this blog post, I'll dig a bit deeper into the aria-label-attribute, and its usage and limitations, and options. What Is aria-label? So, let's first talk about the specification and where to use it. W3C Recommendation for Accessible Rich Internet Applications (WAI-ARIA)-document defines aria-label as "a string value that labels the current element." You can use it to provide a recognizable name of the object if there is no visible text on the screen that could be used as the label. If there was, aria-labelledby should be used. The most important thing, and the reason I'm writing this article, is that developers should use it only with the following elements: interactive elements (such as links, buttons, inputs et cetera) Elements that have a landmark role Elements that have an ARIA-widget role img or iframe-elements Source: Short note about aria-label, aria-labelledby and aria-describedby by Léonie Watson. aria-label on these elements works consistently with assistive technologies. The support is inconsistent if you use it with any other tag, such as div or span. More about that in Aria-label and non-supported elements. Let's look into each one of these elements a bit more. Interactive Elements Interactive elements are tags intended for user interaction. It means, for example, button, a (when href-attribute is present), input , details and others. The main idea is that users can interact with them. Elements with Landmark Role Elements can have landmark roles either implicitly or explicitly. Having an implicit role means that some of the HTML elements have roles set to them natively. The explicit role, on the other hand, is set with role-att

## Don't Develop Just for Yourself - A Developer's Checklist to Accessibility

DevFeed: [Don't Develop Just for Yourself - A Developer's Checklist to Accessibility](<https://devfeed.tech/articles/don-t-develop-just-for-yourself-a-developer-s-checklist-to-accessibility-38434.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2021-05-28/dont-develop-just-for-yourself-a-developers-checklist-to-accessibility/>)

Author: Eevis Panula

Published: 2023-01-03T08:57:24.089000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [keyboard](<https://devfeed.tech/topics/keyboard.md>), [Usability](<https://devfeed.tech/topics/usability.md>), [alt text](<https://devfeed.tech/topics/alt-text.md>), [aria](<https://devfeed.tech/topics/aria.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [alt-text](<https://devfeed.tech/tags/alt-text.md>), [aria](<https://devfeed.tech/tags/aria.md>), [authoring](<https://devfeed.tech/tags/authoring.md>), [automated](<https://devfeed.tech/tags/automated.md>), [blog-post](<https://devfeed.tech/tags/blog-post.md>), [developer](<https://devfeed.tech/tags/developer.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [testing](<https://devfeed.tech/tags/testing.md>), [usability](<https://devfeed.tech/tags/usability.md>), [web](<https://devfeed.tech/tags/web.md>), [website](<https://devfeed.tech/tags/website.md>)

### AI overview

A beginner-oriented accessibility checklist for developers. It recommends manually testing keyboard navigation, focus visibility, and other website interactions after automated testing, while noting that the process does not guarantee full accessibility.

### Source excerpt

We, as developers, tend to develop sites unconsciously for people like ourselves. If we don't actively pay attention, the sites are often accessible only for certain types of people: Sighted mouse-users, who have good fine motor skills and are good at using computers. It leads to moments where no one who navigates the web with only a keyboard (or keyboard simulating device) can access and interact with the site. It is a pretty big group of people! We have a responsibility to make sites that work for all of our users. In some cases, it is required by law, but it is not the only reason we should care. This blog post is aimed for those at the beginning of their accessibility journey. You might know some things, like "always provide an alt-text for an image," but are unsure what to write there. Or you don't have any idea how to know if your site is accessible at all. Following this blog post won't make your site 100% accessible! The goal of this post is to provide some information about some things to check manually after using some automated testing. Keyboard Navigation First of all, abandon your mouse for a second. Don't use it. Try to navigate through the website using only the keyboard. Try to complete every task user needs to be able to complete on the website. Can you do it? Can you see where you are at the moment? Is the focus indicator (yes, that thing many designers and developers like to remove) visible enough? If you can't use the whole website with only a keyboard, that is an accessibility and usability problem. However, one thing to note here is that keyboard interaction is not necessarily accomplished with just tab and enter, as it has been at some point. The general pattern goes, as WAI-ARIA Authoring Practices state: A primary keyboard navigation convention common across all platforms is that the tab and shift+tab keys move focus from one UI component to another while other keys, primarily the arrow keys, move focus inside of components that include mult

## What is WAI? The Web Accessibility Initiative

DevFeed: [What is WAI? The Web Accessibility Initiative](<https://devfeed.tech/articles/what-is-wai-the-web-accessibility-initiative-9426.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/what-is-wai/>)

Author: Ilknur Eren

Published: 2022-07-18T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Web Accessibility (a11y)](<https://devfeed.tech/topics/web-accessibility.md>), [Web](<https://devfeed.tech/topics/web.md>), [Web Content Accessibility Guidelines](<https://devfeed.tech/topics/web-content-accessibility-guidelines.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [FIRST](<https://devfeed.tech/topics/first.md>), [Internet](<https://devfeed.tech/topics/internet.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>), [image slider](<https://devfeed.tech/topics/image-slider.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [applications](<https://devfeed.tech/tags/applications.md>), [aria](<https://devfeed.tech/tags/aria.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [community](<https://devfeed.tech/tags/community.md>), [content](<https://devfeed.tech/tags/content.md>), [development](<https://devfeed.tech/tags/development.md>), [education](<https://devfeed.tech/tags/education.md>), [evaluation](<https://devfeed.tech/tags/evaluation.md>), [internet](<https://devfeed.tech/tags/internet.md>), [standards](<https://devfeed.tech/tags/standards.md>), [support](<https://devfeed.tech/tags/support.md>), [tools](<https://devfeed.tech/tags/tools.md>), [web](<https://devfeed.tech/tags/web.md>), [web-accessibility](<https://devfeed.tech/tags/web-accessibility.md>), [web-content-accessibility-guidelines](<https://devfeed.tech/tags/web-content-accessibility-guidelines.md>)

### AI overview

This article explains the Web Accessibility Initiative (WAI), a W3C initiative launched in 1997 to improve Web accessibility for people with disabilities. It describes W3C's role in developing Web standards, WAI's accessibility guidelines and resources, and its contributions to WCAG and WAI-ARIA.

### Source excerpt

The Web Accessibility Initiative is W3C's effort to improve accessibility of the Web for people with disabilities. What is the World Wide Consortium? In order to know about the Web Accessibility Initiative, we must first talk about the World Wide Consortium, also known as W3C. Founded in 1994 and currently led by director Tim Berners-Lee and CEO Jeffrey Jaff, W3C is an international community where organizers develop international standards for the Web. As described by W3's website, "W3C's mission is to lead the Web to its full potential." Organizers from all around the world, involved in many different fields, join W3C to develop guidelines that ensure long-term growth for the Web. The Web Accessibility Initiative is one initiative that was launched by W3C. What is the Web Accessibility Initiative? The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the World Wide Web W3C launched The Web Accessibility Initiative, (WAI), in 1997, with support from the White House. The Web Accessibility Initiative's main goal is to make the internet accessible for people with disabilities. WAI brings people from disability organizations, governments, and research labs from all around the world to develop guidelines and resources to make the Web accessible to people with disabilities. This includes: auditory, cognitive, neurological, physical, speech and visual disabilities. In short, WAI develops accessibility standards and offers implementation guidance. As described by W3C Website, WAI "pursues accessibility of the web through these primary activities": Ensuring that W3C standards support accessibility Developing accessibility guidelines for web content and applications, browsers, and authoring tools Developing resources to improve web accessibility evaluation processes and tools Supporting education and outreach on web accessibility Coordinating with research and development

## An in-depth guide to ARIA roles

DevFeed: [An in-depth guide to ARIA roles](<https://devfeed.tech/articles/an-in-depth-guide-to-aria-roles-9369.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/an-indepth-guide-to-aria-roles/>)

Author: Duncan Jimbo

Published: 2020-08-20T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [browser](<https://devfeed.tech/tags/browser.md>), [developers](<https://devfeed.tech/tags/developers.md>), [guide](<https://devfeed.tech/tags/guide.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>)

### AI overview

This guide explains ARIA roles, their six categories, and how they supplement HTML semantics when native elements are unavailable or insufficiently supported. It covers usage guidance, document structure roles, and landmark roles, with attention to browser and assistive technology support.

### Source excerpt

The ARIA specification is divided into categories of attributes, one of which is Roles, and the other being States & Properties. ARIA roles, which are covered in this article, are generally used to describe elements: that may not exist within HTML, which may not have full cross-browser support, which may have implementation gaps in screen readers and other assistive technologies. For instance, ARIA roles can be useful in situations where native HTML semantics are not understood in legacy user agents (e.g., browsers). Usage ARIA roles are added to elements using the role="<ROLE_TYPE>" attribute, where ROLE_TYPE represents the specific role being added. Once an ARIA role is set on an element, it should not be changed, regardless of the state of the element. In some cases, roles have to be paired with the appropriate ARIA state or property. However, this article's examples have reduced markup to limit the scope to just ARIA roles. ARIA roles are broken down into six categories: Abstract Roles Document Structure Roles Landmark Roles Live Region Roles Widget Roles Window Roles Abstract roles Abstract roles are only intended for use by browsers to help organize and streamline a document. They should not be used by developers writing HTML markup. Doing so will not result in any meaningful information being conveyed to assistive technologies or to users. Document Structure roles Document roles are used to provide a structural description for a section of content. A majority of the available roles in this category resemble available semantic HTML tags and it is recommended to only use them when an appropriate native tag is not available. The roles in this category are also not typically interactive in nature. However, they may be used to contain other roles that are interactive. The following examples of toolbar and tooltip roles, serve as good examples of when to use Document Structure roles to provide information to assistive technologies when the equivalent native HTML ta

## ARIA has perfect support

DevFeed: [ARIA has perfect support](<https://devfeed.tech/articles/aria-has-perfect-support-9371.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/aria-has-perfect-support/>)

Author: Eric Bailey

Published: 2020-05-13T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [browser](<https://devfeed.tech/topics/browser.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Frameworks](<https://devfeed.tech/topics/frameworks.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [browser](<https://devfeed.tech/tags/browser.md>), [frameworks](<https://devfeed.tech/tags/frameworks.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [web-apps](<https://devfeed.tech/tags/web-apps.md>)

### AI overview

The article explains ARIA as an HTML extension that adds roles, states, and properties to improve communication between websites or web apps, browsers, and assistive technology. It describes dynamic JavaScript usage, framework compatibility, and compatibility limitations involving browsers, operating systems, and assistive technology.

### Source excerpt

Accessible Rich Internet Applications (ARIA) is an extension of HTML. It is a technology that adds roles, states, and properties that are designed to help with the accessibility of websites and web apps. Background ARIA works by supplementing, adding, removing, or overriding information the browser uses to communicate with assistive technology. For example, adding aria-hidden="true" to a HTML element will tell the browser not to report the element, or any of its children to assistive technology. aria-hidden="true" can be useful for situations where you want to remove something that might normally get reported, such as a SVG icon inside a button. If the button already has a text label, removing the icon helps make sure that the experience is easy to understand by removing unnecessary information that would otherwise be exposed by the decorative icon: <button type="button"> <svg aria-hidden="true" focusable="false"> <!-- SVG code --> </svg> Save </button> ARIA can also be used for interactive controls such as an accordions, tabs, and modals. A thoughtful, skilled application of ARIA can help communicate things like if an accordion panel is in an expanded state, which tab's corresponding tab panel is currently visible, or what is and is not modal content. Nearly all ARIA should be inserted and updated dynamically via JavaScript. Very little of it is "hard coded" into the HTML it is manipulating. There are many ways to add ARIA to your website or web app using JavaScript. You can use "vanilla" JavaScript, or specialized frameworks such as Ember, Angular, React, Vue, Svelte, etc. ARIA is compatible with all these frameworks because it is a standard they observe. Compatibility issues All web technology has compatibility issues. Compatibility issues are created when there is an interaction between: The kind of operating system, The version of the operating system, The kind of browser running on the operating system, The version of browser running on the operating system, A

## Accessible range slider

DevFeed: [Accessible range slider](<https://devfeed.tech/articles/accessible-range-slider-37233.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/accessible-range-slider/>)

Author: Stanko

Published: 2019-05-01T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Code](<https://devfeed.tech/topics/code.md>), [Library](<https://devfeed.tech/topics/library.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessible](<https://devfeed.tech/tags/accessible.md>), [aria](<https://devfeed.tech/tags/aria.md>), [callback](<https://devfeed.tech/tags/callback.md>), [code](<https://devfeed.tech/tags/code.md>), [demo](<https://devfeed.tech/tags/demo.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [features](<https://devfeed.tech/tags/features.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [libraries](<https://devfeed.tech/tags/libraries.md>), [library](<https://devfeed.tech/tags/library.md>), [react](<https://devfeed.tech/tags/react.md>)

### AI overview

The article describes a small range slider built for a React project after existing options lacked a combination of touch support, accessibility, callbacks, and easy styling. It presents the slider as an accessibility-first JavaScript library with ARIA and keyboard support, touch-friendly interaction, tooltips, a user-controlled buffer bar, callbacks, and styling options. A React wrapper was planned, and the code was released under the MIT license.

### Source excerpt

This time I want to share a small range slider (progress bar) I built. Check the demo. Code and documentation are available here. Same story again, on a React project we needed a media progress bar, and I ended up writing one myself. Why I didn't like anything I found? Well, everything I tried was missing one of the things we considered mandatory - good touch support, accessibility (aria attributes, keyboard control), callbacks or easy styling. On this specific project we went with Material-UI's slider, but it is still in their beta (lab) phase and it has couple of glitches. Soon we are going to replace it with the one I built. Accessibility # This range slider is the first library I wrote with accessibility-first mindset. That is something that I want to pursue and promote more. If you start with basic accessibility and build features around it, it will be much easier than just adding accessibility stuff when library is complete.Similar like it goes with tests. I do it myself, too - I get excited about the problem, start hacking, and couple of hours later I have a decent codebase and zero tests. Features # I started using this example and added more features. And I would love to mention a few: Fully accessible (aria attributes and keyboard control) Great touch support, actual hitbox area is bigger than track and handle Two tooltips, one for the current value, and the other shown on hover which shows the value that will be set on click Additional "buffer bar" that is controlled by the user (great for media players) Callback system Easy to style (I plan to add more themes) At the moment, only plain JavaScript version is available, but I plan to add a React wrapper. And while we are talking about accessible React libraries, you should check David Clark's work: react-aria-modal react-aria-menubutton react-aria-tabpanel He has a bunch of other great libraries, be sure to check them out. As usual it is released under MIT license and code is available on GitHub. Let me kn

## ARIA properties

DevFeed: [ARIA properties](<https://devfeed.tech/articles/aria-properties-9373.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/aria-properties/>)

Published: 2018-07-30T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [aria](<https://devfeed.tech/topics/aria.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>)

### AI overview

This article explains ARIA properties, which are generally static attributes applied to elements to provide accessibility information. It introduces their HTML syntax, gives an example using aria-haspopup, and describes four W3C categories: widget, live region, drag-and-drop, and relationship attributes.

### Source excerpt

ARIA 1.1 defines multiple "properties" that can be applied to elements. Unlike ARIA states, most properties are likely to stay static when a page is loaded instead of changing with user interaction. Properties are inserted into elements as follows: <element aria-property="value"></element> . Example: <button aria-haspopup="true"> Options. </button> A screenreader will announce this button with 'Options, button menu' or something similar. There are 38 properties that can be used in ARIA. They fall into 4 categories as defined by the W3C. The categories are: Widget Attributes Properties that give information about user input elements. Live Region Attributes Properties that are specific to regions that will update while the page is being viewed. Drag-and-Drop Attributes Properties of drag-and-drop input elements. Relationship Attributes Properties that give information about elements' relationships to other elements. Note: ARIA is constantly being updated by the W3C. Read the latest working draft. The properties are given below, along with their category, brief description, and allowed value lists or type of input allowed. List of ARIA properties Property (links to WAI-ARIA 1.1 specs) Category Description Allowed Values (default values bolded) aria-activedescendant Relationship attributes Currently active descendant of a composite widget String - ID of descendant aria-atomic Live region attributes Indicates whether assistive technologies will present the entire element (or only parts of it) when the element is changed false, true aria-autocomplete Widget attributes Defines if and how autocomplete suggestions are shown none, both, inline, list aria-colcount Relationship attributes Defines the total number of columns in a table, grid, or treegrid integer aria-colindex Relationship attributes Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid integer aria-colspan Relationship attributes Defines the n

## ARIA states

DevFeed: [ARIA states](<https://devfeed.tech/articles/aria-states-9374.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/aria-states/>)

Author: Alex Brenon

Published: 2018-07-30T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [aria](<https://devfeed.tech/topics/aria.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>)

### AI overview

An overview of ARIA states, including how they are applied to elements, their three categories, and their allowed values. It covers widget, live region, and drag-and-drop attributes, with examples such as aria-busy.

### Source excerpt

ARIA 1.1 defines multiple "states" that can be applied to elements. States are likely to change as the user interacts with the page. States are inserted into elements as follows: <element aria-state="value"></element>. Example: <span aria-busy="true"> This element is currently being updated. </span> There are 10 states that can be used in ARIA. They fall into 3 categories as defined by the W3C. The categories are: Widget attributes States that give information about user input elements. Live region attributes States that are specific to regions that will update while the page is being viewed. Drag-and-drop attributes States of drag-and-drop input elements. Note: ARIA is constantly being updated by the W3C. Read the latest working draft. The states are given below, along with their category, brief description, and allowed value lists. Many states allow for either true or false, and when "undefined" is chosen it means the state is not applicable to the current element. List of ARIA states State (links to WAI-ARIA 1.1 specs) Category Description Allowed Values (default values bolded) aria-busy Live region attributes The element is currently being updated false, true aria-checked Widget attributes The input item is checked undefined, false, mixed, true aria-current Widget attributes Indicates the element that represents the current item within a container or set of related elements page, step, location, date, time, true, false aria-disabled Widget attributes The element is visible but not interactive false, true aria-expanded Widget attributes The element is expanded undefined, false, true aria-grabbed Drag-and-Drop attributes Deprecated The element is selected for dragging undefined, false, true aria-hidden Widget attributes The element is invisible to all users (including assistive technologies) false, true aria-invalid Widget attributes The element contains a value that doesn't match the expected format false, grammar, spelling, true aria-pressed Widget attributes Th

## WAI-ARIA support limitations and accessibility best practices

DevFeed: [WAI-ARIA support limitations and accessibility best practices](<https://devfeed.tech/articles/wai-aria-and-its-true-impact-on-assistive-technologies-32015.md>)

Original publisher: [Read original article](<https://tech.finn.no2017/06/07/wai-aria-and-its-true-impact-on-assistive-technologies/>)

Author: Tor-Martin Storsletten

Published: 2017-06-07T12:00:00Z

Content type: article

Language: en

Sources: [Finn.no](<https://devfeed.tech/sources/finn-no.md>)

Topics: [aria](<https://devfeed.tech/topics/aria.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [User experience (UX)](<https://devfeed.tech/topics/ux.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [best-practices](<https://devfeed.tech/tags/best-practices.md>), [ux](<https://devfeed.tech/tags/ux.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

### AI overview

This article explains how WAI-ARIA affects assistive technologies, emphasizing that support remains inconsistent across implementations. It recommends focusing on reliable accessibility fixes and universal design rather than depending on specific screen readers or ARIA features for UX improvements.

### Source excerpt

1. Introduction This article is intended for web developers who want to improve their understanding of the effect that WAI-ARIA has on assistive technologies. It will therefore be assumed that you already have basic knowledge about terms such as ARIA and screen readers. 1.1. Generalize screen readers From the perspective of web development, it serves no purpose to delve into technical details about specific brands of screen reading software. There are several reasons for this: We can't programmatically detect which assistive technologies our users are using. There are several good reasons for this, including privacy concerns pertaining to confidential information regarding personal health and diagnostics. Universal design means design for everyone, regardless of which type of assistive technology is being used. Therefore we won't talk about specific brands of screen reading software in this article. We will focus on best practices with universal design in mind. 1.2. The main issues with ARIA Firstly, support for ARIA in assistive technologies is still partial at best. A consequence of this is that only a handful of ARIA features are reliable across different implementations, and that is if we don't count older assistive technologies that have no support for ARIA at all. Therefore it becomes important to differentiate between ARIA features that we can reliably use for correcting accessibility issues versus ARIA features that we should only use for improving UX. I.e. to a certain degree we can accept that UX will differ depending on which screen reader is being used, but keeping parts of our applications inaccessible to everyone except those who are fortunate enough to use the right screen reader is unacceptable. Naturally this is something that will slowly but surely sort itself out as makers of assistive technologies continue to work on their ARIA implementations, but for the time being we ought to remain mindful of this. The second issue related to ARIA is that man

[Next page](<https://devfeed.tech/topics/aria.md?cursor=WyIyMDE3LTA2LTA3VDEyOjAwOjAwKzAwOjAwIiwgIjc1Y2M3OThlLTc5ZWItNDI1Ny04MzlhLTA1NDZiMGNiMGE3MyJd>)