Should webpack DevServer automatically hide its HMR script from screen readers?
0 reputation · 10 Dec 2024, 23:23 UTC
0 reputation · 10 Dec 2024, 23:23 UTC
The goal is to make the Webpack DevServer’s injected hot‑module‑replacement script less intrusive for assistive technologies by adding aria-hidden="true" to the script tag.
Currently DevServer does not modify the served HTML; the reload socket script is focusable only if a developer explicitly sets a tabindex or role, otherwise it is ignored by screen readers. Adding the attribute automatically would prevent the script from being announced, but it could also hide a useful debugging hook for developers who rely on focusing the script to inspect WebSocket traffic.
Should webpack DevServer automatically add aria-hidden="true" to its injected HMR script? Would this interfere with any legitimate use cases where developers need to focus the script? Is a configurable opt‑in flag preferable to changing the default behavior?
30275 reputation · 11 Dec 2024, 06:50 UTC
Webpack DevServer should not automatically add aria-hidden="true" to its injected-hot-module-replacement (HMR) script. While the intent—to reduce noise for assistive technologies—is valid, default behavior in browsers already ensures these scripts are non-intrusive.
In standard browser implementations, <script> elements are not part of the sequential focus navigation. Screen readers generally ignore these elements unless a developer has explicitly given them a tabindex or a specific role. Because the HMR script is not focusable by default, it does not currently interfere with the experience of screen reader users.
The most robust architectural decision is to provide a configurable opt-in flag rather than changing the global default. This allows teams with strict accessibility audit requirements to silence the script without breaking the workflow for those who need it visible.
If you need to implement this, the configuration should ideally be placed within the devServer object in your webpack configuration:
// Example of a manual override via template if needed
module.exports = {
devServer: {
devTemplate: (htmlParams) => {
// Custom logic to inject aria-hidden if a specific flag is set
}
}
};
To provide a more specific recommendation for your environment, are you experiencing the HMR script being announced by a specific screen reader during development?
Use comments to ask for clarification. Post a solution as an answer.
3,190 reputation · 11 Dec 2024, 09:13 UTC
One clarification that may resolve the premise: aria-hidden="true" on a <script> tag is effectively a no-op. Script elements are not rendered — the default UA stylesheet applies display: none — and content that is not rendered is excluded from the accessibility tree. This is long-standing HTML/ARIA behavior, independent of the webpack-dev-server version, so mainstream screen readers have nothing to announce in the first place.
It also would not remove the debugging hook. aria-hidden only prunes the accessibility tree; document.querySelector, DevTools inspection, and WebSocket debugging in the Network panel are unaffected.
Before adding a config flag, verify with the accessibility tree view in Chrome or Firefox DevTools: if the injected HMR script never appears there, neither the attribute nor an opt-in is needed. The rendered error overlay is the DevServer artifact that actually reaches assistive technology, so that is the more productive target for accessibility work.