P粉4929595992023-08-23 15:43:06
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 Chromevox1 and NVDA2 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.
1Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn 2NVDA https://www.nvaccess.org/
P粉5949413012023-08-23 10:57:50
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:
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.
.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.
.screenreader {
position: absolute;
left:-9999px;
}
<div>星期三<span class="screenreader">，2014年9月24日</span></div>
.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.
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.
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.