首页  >  问答  >  正文

如何为屏幕阅读器用户提供无障碍文本在HTML中的实现方法?

<p>我有一个网站,其中有带有数字的彩色div,例如一个红色的块内部有数字2。颜色对于理解很重要。一个盲人用户给我发了电子邮件,问我是否可以让屏幕阅读器读出"2 red"。</p> <p>我尝试将其添加为alt="2 red",但他说这没有任何作用。他认为这可能只会读取图像的alt标签。</p> <p>有没有一种好的方法来做到这一点,适用于div元素?</p>
P粉426780515P粉426780515446 天前481

全部回复(2)我来回复

  • P粉492959599

    P粉4929595992023-08-23 15:43:06

    编辑2020年: 目前 display:nonevisibility:hidden 似乎普遍导致内容在视觉上和屏幕阅读器上不可见(在Firefox和Chrome中使用NVDA进行测试),所以下面的陈述是无效的。 目前,将内容移出屏幕似乎是为屏幕阅读器用户提供内容的唯一方式,也请参阅以下表格: http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html


    除非在接受的答案中另有说明,至少 Chromevox1 和 NVDA2 也会读取具有 display:nonevisibility:hidden CSS 属性的元素,如果设置了 aria-hidden=false。然而,目前只有在 Chrome(65)中,而不是在 Firefox 或 Edge 中(根据我的测试)。

    所以(目前仅在 Chrome 中可行),也可以像这样做:

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

    其中 Chromevox 和 NVDA 会读取第一个和第二个标题。 还请参阅:https://jsfiddle.net/4y3g6zr8/6/

    如果所有浏览器都同意这种行为,那将是比其他解决方案中提出的所有 CSS 技巧更清洁的解决方案。

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

    回复
    0
  • P粉594941301

    P粉5949413012023-08-23 10:57:50

    关于alt文本,你是正确的,它只适用于图像。但是你可以使用aria-label来替代非图像元素的alt属性,如下所示:

    有效的解决方案

    ARIA标签 ★ ★ ★ ★ ★ ★

    aria-label(不要与aria-labelledby混淆,后者从另一个元素的文本中提取可访问名称)用于为元素添加屏幕外描述性内容,类似于alt=属性为图像添加屏幕外描述性内容,当图像无法显示时使用。

    不同之处在于,aria-label可以用于非图像元素。

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

    添加aria-hidden属性可以隐藏内部文本。

    定位 + 裁剪 + 折叠 ★ ★ ★ ★

    .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); /* 其他所有浏览器 */
    }

    裁剪用于完全隐藏1像素 x 1像素的元素,否则它仍然会在屏幕上可见。

    定位 ★ ★ ★

    .screenreader {
        position: absolute;
        left:-9999px;
    }
    
    <div>星期三<span class="screenreader">,2014年9月24日</span></div>

    缩进 ★

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

    实际的缩进值并不重要,只要它超出页面布局的范围即可。示例将内容向左移动5,000像素。

    此解决方案仅适用于完整的文本块。它在锚点、表单、从右到左的语言或与其他文本混合的特定内联文本上效果不佳。

    不起作用

    visibility: hidden; 和/或 display:none;

    这些样式将隐藏文本,使其对所有用户都不可见。文本从页面的视觉流中移除,并被屏幕阅读器忽略。如果要让内容被屏幕阅读器读取,请不要使用此CSS。但是,如果要让内容不被屏幕阅读器读取,请使用它。

    width:0px;height:0px

    与上述相同,因为没有高度或宽度的元素会从页面流中移除,大多数屏幕阅读器将忽略此内容。HTML的宽度和高度可能会产生相同的结果。如果要让内容被屏幕阅读器读取,请不要将内容大小设置为0像素。

    更多信息:

    回复
    0
  • 取消回复