How to Hide a Text and Make It Accessible by Screen Reader

.aria-invisible {      border: 0;       clip: rect(0 0 0 0);       height: 1px;        margin: -1px;      overflow: hidden;      padding: 0;      position: absolute;      width: 1px;    }

<span class="aria-invisible">5 selections have been made. </span>

In HTML, how can I hide text that is only accessible for screen readers on hover?

First off, kudos for trying a combination that is rarely tested by accessibility professionals. Using mouse tracking with a screen reader is certainly a combination that some users require but it's not often tested.

I think you found this NVDA bug - https://github.com/nvaccess/nvda/issues/12047

Your original code and @graham's code both work with JAWS on Firefox, Chrome, and Edge. I hear "edit e-mail" when I hover the mouse over the button. You have to enable mouse echo in JAWS to hear the text under the mouse hover because mouse echo is not on by default.

However, with NVDA, it only works on Firefox. Both Chrome and Edge don't read the "edit e-mail" text with mouse hover. (Edge is based on the chromium engine so it makes sense that if Chrome doesn't work, Edge won't work either. The NVDA bug mentioned at the top also says it doesn't work in Edge).

By default, NVDA has mouse tracking on. You can toggle it with Ins+M or go into Settings and toggle the "Enable mouse tracking" checkbox.

The accessibility properties of the "edit e-mail" button are correct on Chrome.

Notice the "Name" (which is the accessible name) is "edit e-mail" and comes from "Contents". The accessible name should be read when the element receives focus. As you noted originally, it works fine with TAB but not with mouse hover.

So if the accessibility properties look correct in Chrome and JAWS works correctly with Chrome by announcing "edit e-mail" when you hover with the mouse, why doesn't NVDA read the text? NVDA certainly has access to the accessible name. NVDA reads the accessible name just fine in Firefox. So why does NVDA work on Firefox but not Chrome? I'm not sure (sorry). Potentially Chrome is not surfacing some information that NVDA needs, although JAWS works perfectly fine without this other information, which is why I think this is an NVDA bug.

So now you have to decide if you want to code around the NVDA bug. Sometimes that can lead to very messy code that potentially causes other problems. My recommendation is to use the code you currently have, since it's coded properly, and update the aforementioned NVDA bug.

In HTML, how can I have text that is only accessible for screen readers (i.e. for blind people)?

As far as alt text, you are correct, that only works for images.. But you can use aria-label in place of the alt attribute for non-image elements like so:

Solutions that work

ARIA Labels ★ ★ ★ ★ ★ ★

aria-label (not to be confused with aria-labeledby, a related tag that instead pulls the accessible name from the text of another element) is used to add off-screen descriptive content to an element much in the way an alt= attribute adds off-screen descriptive content to images to be used when the images are not displayable.

The difference is, aria-label can be used on non-image elements.

<div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
     result (screenreaders):  test A
     result (regular):        test B
-->

The addition of the aria-hidden attribute hides the inner text.

Position + Clip + Collapse ★ ★ ★ ★

.screenreader {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

The clip is used to hide the 1px x 1px element completely, otherwise it will still be visible on the screen.

Position ★ ★ ★

.screenreader {
    position: absolute;
    left:-9999px;
}

<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>

Indent ★

.screenreader {
    text-indent: -5000px;
}

The actual indent value is not important as long as it's outside of the range of your pages layout. The example will move the content to the left 5,000 pixels.

This solution only works for full blocks of text. It won't work well on anchors or forms, or right-to-left languages, or specific inline-text intermixed with other text.

Will not work

visibility: hidden; and/or display:none;

These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you don't want read by screen readers.

width:0px;height:0px

As above, because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result. Do not size content to 0 pixels if you want the content to be read by a screen reader.

Further:

• WebAIM Center for Persons with Disabilities
• Fangs Screen Reader Emulator for Mozilla

Accessibility: Using media queries to hide text

I don't know if this is less "hacky", but it's certainly a little simpler. If an element is referenced by aria-labelledby or aria-describedby and that element is hidden, it will still be used in the accessible name calculation.

So instead of using an sr-only class to hide the text, you can really hide it.

<span id="foo" style="display:none;">you can't see me</span>
...
<a href="#" id="myself" aria-labelledby="myself foo">hello</a>

When you navigate to the link, the screen reader will say: "hello you can't see me"

Hide text ONLY for screen readers

aria-hidden should be used to hide any non-focusable content on a page from screen readers. All major screen readers current versions support this well.

In oder to satisfy WCAG 2 AA, a feature only needs to be supported on the common or at least one widely distributed free assistive technology. NVDA and Firefox on Windows, VoiceOver on OS X and iOS and Talkback with Firefox on Android all support this feature.

How to hide a link from a screen-reader?

Use aria-hidden this way for the content:

<p aria-hidden="true">Screen readers will not read this!</p>

How to hide any text from sighted user and search engine but not from screen reader?

The jQuery UI CSS framework does this by positioning elements far off-screen, e.g.

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }

---

Related Topics