I want an HTML attribute that hides an element visually while keeping it accessible to screen readers

I want an HTML attribute that declaratively marks an element as screen-reader-only, hiding it visually while keeping it fully accessible to assistive technology -- without requiring any CSS.

Adding meaningful labels for assistive technology often requires placing text in the page that should not be visible to sighted users. For example, an icon-only button needs a description that a screen reader can announce. The two most common solutions today each come with significant drawbacks.

aria-label is the obvious choice, but it is not translated by browser translation features and machine-translation extensions, which means users who rely on translation software may not hear a meaningful label. It is also not surfaced by search engines or accessible to tools that parse page text.

The other option is the well-known "visually hidden" CSS pattern (sometimes called .sr-only):

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

This works, but it:

• Requires every project to copy-paste a non-obvious, fragile set of declarations.
• May break in the future if browsers start optimizing away elements they detect as invisible.
• Forces a CSS dependency that is not always available (e.g., in HTML emails or certain rendering environments).

A dedicated HTML attribute -- something like hidden="visually" or visually-hidden -- would:

• Be immediately understandable and easy to communicate to teammates.
• Be forward-compatible, with browsers maintaining its semantics as rendering engines evolve.
• Allow browsers to avoid computing layout for the element, since it will never be rendered visually.
• Work inline in HTML without any external stylesheet.

This small addition would make accessible, screen-reader-only labelling trivially easy for all web developers.