Web accessibility: The push for native CSS visually hidden features

Web developers are discussing the need for a native CSS feature to handle visually hidden text, a common requirement for maintaining web accessibility. Currently, developers use custom utility classes, such as .sr-only or .visually-hidden, to hide text from sighted users while ensuring it remains available to assistive technologies like screen readers.

Using standard properties like display: none is insufficient because it removes content from assistive technology entirely. While various CSS clipping techniques have been used to solve this, they often rely on complex combinations of properties like position and overflow. These workarounds can lead to inconsistencies and bugs, such as a known issue in Firefox where certain property combinations prevent label text from being exposed as an accessible name for form controls.