How to provide accessible text in HTML for screen reader users?

Question

I have a website that has colored divs with numbers on them, for example a red block with the number 2 inside. Color is important for understanding. A blind user emailed me and asked if I could have a screen reader read "2 red".

I tried adding it as alt="2 red" but he said it didn't do anything. He thought this might just read the alt tag of the image.

Is there a good way to do this, that works with div elements?

Answer 1

Edit 2020: Currently display:none or visibility:hidden seems to generally cause content to be invisible both visually and to screen readers (tested with NVDA in Firefox and Chrome), so the following statement it is invalid. Currently, moving content off the screen appears to be the only way to serve content to screen reader users, see also the following table: http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

---

Unless stated otherwise in the accepted answer, at least Chromevox¹ and NVDA² will also read files with display:none or visibility:hidden CSS property of the element if aria-hidden=false is set. However, this is currently only in Chrome (65) and not in Firefox or Edge (based on my testing).

So (currently only possible in Chrome), you can also do this:

<h1 aria-hidden="false" style="display: none;">仅供屏幕阅读器使用的标题</h1>
<h1 aria-hidden="false" style="visibility: hidden;">仅供屏幕阅读器使用的第二个标题</h1>
<h1 aria-hidden="true">仅供屏幕使用的标题</h1>

Where Chromevox and NVDA will read the first and second headers. See also: https://jsfiddle.net/4y3g6zr8/6/

If all browsers agreed on this behavior, it would be a cleaner solution than all the CSS tricks proposed in other solutions.

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

Answer 2

Regarding alt text, you are correct, it only works with images. But you can use aria-label to replace the alt attribute of non-image elements, as follows:

Effective solution

ARIA tag ★ ★ ★ ★ ★ ★

aria-label (not to be confused with aria-labelledby, which extracts the accessible name from another element's text) is used to add off-screen descriptive content to an element , similar to the alt= attribute, which adds off-screen descriptive content to the image and is used when the image cannot be displayed.

The difference is that aria-label can be used for non-image elements.

<div aria-label="测试A"><p aria-hidden="true">测试B</p></div>
<!--
     结果（屏幕阅读器）：测试A
     结果（常规）：测试B
-->

Add the aria-hidden attribute to hide the internal text.

Position Crop Fold ★ ★ ★ ★

.screenreader {
    position: absolute !important; /* 脱离文档流 */
    height: 1px; width: 1px; /* 几乎折叠 */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* 仅IE 7+支持不带逗号的clip */
    clip: rect(1px, 1px, 1px, 1px); /* 其他所有浏览器 */
}

Cropping is used to completely hide a 1 pixel x 1 pixel element that would otherwise still be visible on the screen.

Positioning ★ ★ ★

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

<div>星期三<span class="screenreader">，2014年9月24日</span></div>

Indent ★

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

The actual indentation value does not matter as long as it exceeds the scope of the page layout. Example moves content 5,000 pixels to the left.

This solution only works for complete blocks of text. It doesn't work well with anchors, forms, right-to-left language, or specific inline text mixed with other text.

Not working

visibility: hidden; and/or display:none;

These styles will hide the text so that it is not visible to all users. The text is removed from the visual flow of the page and ignored by screen readers. If you want the content to be read by screen readers, do not use this CSS. However, use it if you want the content to be unreadable by screen readers.

width:0px;height:0px

Same as above, since elements with no height or width are removed from the page flow, most screen readers will ignore this content. HTML width and height may produce the same result. If you want the content to be read by screen readers, do not set the content size to 0 pixels.

More information:

• WebAIM Disability Center
• Fangs Mozilla Screen Reader Emulator