In HTML, how can I have text that is only accessib

Question

I have a website that has colored divs with numbers, e.g. a red block with the number 2 inside of it. The color is important to understanding. A blind user emailed me asking if I could make it say "2 red" for his screen reader.

I tried adding this as an alt="2 red" but he said that didn't do anything. He thinks it might only read alt tags for images.

Is there a good way to do this for divs?

Answer 1

Regarding the question in the title: No, there is no way (in HTML or otherwise) to have text that is only accessible for screen readers. Whatever you might do, like using an img element with a nonempty alt attribute and a missing or dysfunct src attribute` or using CSS to hide something visually, will be available to any software that cares to read it (and may be inaccessible to screen readers for one reason or another).

On the other hand, if you actually use e.g.

<div class=foo>2 <img alt=red></div>

then most screen readers will read it as “two red”, but so will well-behaving normal browsers, so the effect is not limited to screen readers.

What you should do for accessibility is a different issue and depends on the context and on the purpose of using red color. Note that even when the browser displays a box as red the user might not see it as a red, due to color-blindness; in particular if it is relevant to distinguish between red and green, many people will fail to do so.

There might be a simple solution in a specific case, or it might be a tricky problem with no good solution. For general notes and various techniques, see the document How to Meet WCAG 2.0: Use of color.

Answer 2

You can put a visually hidden element inside:

<div>
    <span class="visually_hidden">2 red</span>
</div>

To "visually hide", you can borrow how HTML5 boilerplate does it:

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

Answer 3

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 focused with aria-labeledby) 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

Answer 4

Unless differently stated in the accepted answer at least Chromevox¹ and NVDA² do also read elements with style display:none or visibility: hidden CSS attributes if aria-hidden=false is set. However currently only in Chrome (65), not in Firefox or Edge (according to my tests).

So (currently unfortunately only in Chrome) its also possible to do something like this:

<h1 aria-hidden="false" style="display: none;">Heading only for Screen Readers</h1>
<h1 aria-hidden="false" style="visibility: hidden;">Second Heading only for Screen Readers</h1>
<h1 aria-hidden="true">Heading only for Screen</h1>

where Chromevox and NVDA read the first and second heading. Also see this: https://jsfiddle.net/4y3g6zr8/6/

If all browsers would agree on this behaviour it would be a much cleaner solution than all CSS tricks proposed in the other solutions.

^{1_{Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn} 2_{NVDA https://www.nvaccess.org/}}

Answer 5

How about making the font color totally transparent? I don't have a screen reader to test if this type of text is readable by screen readers.

.hovereffect a.info {
    color: #9c27b000 !important;
}