{
"name": "utilities/visually-hidden",
"title": "Visually Hidden",
"description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.",
"docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/visually-hidden/",
"sections": [
{
"heading": "Visually Hidden",
"markdown": "> \"There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead.\" — [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/)\n\nSince visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as otherwise sighted keyboard users wouldn't be able to determine where the focus indicator is.\n\n```html\n
\n```"
},
{
"heading": "Examples",
"markdown": "### Links That Open in New Windows\n\nIn this example, the link will open a new window. Screen readers will announce \"opens in a new window\" even though the text content isn't visible to sighted users.\n\n```html\n\n Visit External Page\n \n opens in a new window\n\n```\n\n### Content Conveyed By Context\n\nAdding a label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.\n\n```html\n\n Personal Info\n \n \n\n```\n\n### Visually Hidden Input Parts\n\nSometimes you want a form control to have a cleaner, more minimal appearance by hiding the `label` or `hint` visually. However, removing these elements entirely would make the form inaccessible to users with assistive devices.\n\nInstead, you can hide them visually while keeping them available to screen readers by adding the `ed-visually-hidden-label` or `ed-visually-hidden-hint` class.\n\n`ed-visually-hidden-hint` reaches the hint and nothing else. A validation message renders in its own element and stays visible — an error a sighted user can see but not read fails [WCAG 3.3.1 Error Identification](https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html), which asks for the error to be \"described to the user in text\". Where a message genuinely has no room, say so deliberately: set `error` as a bare attribute for the border and icon without any text, and reveal the reason another way. See [Error styling without a message](https://test-apps.eurodata.de/a/eurodata-ui/docs/form-controls#error-styling-without-a-message).\n\n```html\n\n \n\n\n\n \n\n\n\n United States\n Canada\n Mexico\n United Kingdom\n Germany\n France\n Wakanda\n Genovia\n Elbonia\n \n\n\n\n \n\n```\n\n### Force Visually Hidden\n\nThere are cases where you want to _always_ visually hide certain content, even when it's focused. For example when hiding a checkbox to render a custom one:\n\n```html\n\n\n\n```"
}
]
}