The standard method for hiding text visually to retain a clean design but provide context for screen reader users is to use the CSS clip technique. Due to browser bugs with the
clip property, other declarations are used to make this technique work correctly across different browsers.
Two of the properties used in the additional declarations for the clip technique are
overflow. Unfortunately, due to a bug with Firefox, when these two properties are used together in a rule applied to the label element (regardless of property value), they cause the label text to not be exposed as the accessible name for the corresponding form control. The
overflow properties are also used in other techniques for hiding text visually, but this bug means the accessible name will not be available for screen reader users when applied to a label element.
Author: Gez Lemon
There are times when things make sense visually, but context would be useful for screen reader users. For example, "read more" links might make sense visually, but when tabbing through content with a screen reader, the user needs to investigate the surrounding content to get the context for each "read more" link; whereas, "read more about The Beatles" provides the context within the link phrase. To avoid disrupting a clean design, accessibility aware developers provide the context so that it's available for screen readers, but hidden visually. The following markup example provides the context for a "read more" link in a
span element in the above example can then be targeted with CSS so that it isn't visually displayed, but announced to screen reader users for context.
Techniques for hiding text visually
There have been several techniques used to hide content so that it is still available for screen reader users, but the clip technique is generally agreed to be the best solution as it satisfies the requirements of hiding the text while ensuring the text is still readable with a screen reader, and works with left-to-right and right-to-left languages. If browser support for CSS was implemented correctly across browsers, the following CSS rule would be all that's required to hide content visually.
Unfortunately, other CSS properties are needed to overcome rendering bugs in some browsers. For example, Safari, Chrome, and Opera sometimes introduce scrollbars depending on the size of the element and its position on the page. IE6 and IE7 do not support the correct syntax for the
clip property. The following is an example of the CSS rule with other declarations to ensure it works correctly across browsers.
Firefox label bug
When the CSS properties
overflow are used together in a rule that is applied to the
label element with any valid property value, the label text isn't exposed as the accessible name for the corresponding form control in Firefox; even if the values are the default values for the property (
position: static and
overflow: visible). This means that when a screen reader user navigates to the corresponding form control for the label, they do not hear the accessible name that should be provided by the label; instead, they simply hear the role of the form control. For example, without an accessible name a screen reader might announce an edit box as, "Edit, type in text", rather than the label text to provide the purpose for the edit box. The label can be navigated to virtually in NVDA and JAWS, but the label isn't exposed as the accessible name for the form control as it should be.
My colleague, Hans Hillen, filed this is as bug with Firefox last year, but the bug hasn't been assigned to anyone yet. As the
overflow properties are used together in several techniques for providing invisible context for accessibility purposes, it is important developers are aware of this bug and that it is fixed soon in Firefox.
We generally recommend the
title attribute or the aria-label attribute if there is no visible label at all (such as checkboxes arranged in grids that make sense visually). We only recommend using the CSS clip technique when the rule is applied to some of the label, rather than the entire label. Until this bug is addressed in Firefox, using the
title attribute or
aria-label attribute are the recommended techniques for providing a programmatic label for form controls that do not have a visible label.
If the label approach must be used and then visually hidden, apply the CSS rule to a
span element within the
label element, as the bug is only triggered when the rule is applied to the