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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Edit 2020: Currently
display:noneorvisibility:hiddenseems 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.htmlUnless stated otherwise in the accepted answer, at leastChromevox1and NVDA2will also read files with
display:noneorvisibility:hiddenCSS property of the element ifaria-hidden=falseis 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:
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.
1Chromevoxhttps://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn2NVDAhttps://www.nvaccess.org/
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 witharia-labelledby, which extracts the accessible name from another element's text) is used to add off-screen descriptive content to an element , similar to thealt=attribute, which adds off-screen descriptive content to the image and is used when the image cannot be displayed.The difference is that
aria-labelcan be used for non-image elements.Add the
aria-hiddenattribute 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; }星期三，2014年9月24日 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:0pxSame 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: