JAWS 未读取 DIV ARIA-LABEl [英] DIV ARIA-LABEl not being read by JAWS

查看:54
本文介绍了JAWS 未读取 DIV ARIA-LABEl的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 angular2 应用程序,我正在将一些动态文本绑定到嵌套 DIV 的 ARIA-LABEl.但是当我使用 JAWS 阅读器在页面上定位 DIV 时,它没有读取指定的文本.这是我正在尝试阅读的文本 - attr.aria-label="Product details for {{productDetails?.ProductName}}"

另外,如果我给这个 div 分配一个标题角色,它会读取动态文本,但不会在文本前添加Product details for"前缀

<div [ngClass]="getDescClass()" class="prdDetails-div" aria-label="some text"><div autofocus attr.aria-label="{{productDetails?.ProductName}} 的产品详情" class="productDetails-name" style="cursor:default!important" role="heading" >{{productDetails?.ProductName}} </div><div autofocus class="products-result-compare"><!--{{getDescription(productDetails?.Description)}}-->小说明

解决方案

您的描述缺乏细节或工作示例,因此我不能尝试提供解决方案,而是:aria-label 不适用于

.

A

既不是地标也不是交互式内容.aria-label 不会被屏幕阅读器读取(这是正确的).

在不知道用途的情况下,我有两个建议可能会有所帮助:

  1. aria-label 直接放在控件上(知道它会覆盖控件的文本).

  2. 如果您希望屏幕阅读器用户遇到它,请使用一些屏幕外文本.

使用离屏技术:

这里是多余的或无关的内容

CSS 可能看起来像这样(也考虑到 RTL 语言):

.SRonly {位置:绝对!重要;剪辑:矩形(1px 1px 1px 1px);/* IE6, IE7 */剪辑:矩形(1px,1px,1px,1px);顶部:自动;左:-9999px;宽度:1px;高度:1px;溢出:隐藏;}html[dir=rtl] .SRonly {左:继承;左:未设置;右:-9999px;}

还有其他技术,但它们的价值取决于关于您的受众及其技术概况.

你在那些

上使用 autofocus 让我很紧张.我希望您不要将它们用作交互式控件(如按钮).理想情况下 永远不要使用 div 作为互动内容.

I have an angular2 application and I am binding some dynamic text to ARIA-LABEl for a nested DIV. But when I use the JAWS reader to locate DIVs on the page , it is not reading the assigned text.This is the text I am trying to read - attr.aria-label="Product details for {{productDetails?.ProductName}}"

Also if I give assign a role of heading to this div, it reads the dynamic text but doesn't prefix "Product details for " before the text

<div [ngClass]="getDescClass()" class="prdDetails-div" aria-label="some text">
<div autofocus attr.aria-label="Product details for {{productDetails?.ProductName}}" class="productDetails-name" style="cursor:default!important" role="heading" >{{productDetails?.ProductName}}   </div>
        <div autofocus class="products-result-compare">
            <!--{{getDescription(productDetails?.Description)}}-->
            Small description
        </div>

解决方案

Your description lacks detail or a working example, so instead of trying to offer a solution all I can offer is this: aria-label does not work on <div> nor <span>.

A <div> and <span> are neither landmarks nor interactive content. An aria-label will not be read by a screen reader (and rightly so).

Without knowing the use, I have two suggestions which might help:

  1. Put the aria-label directly on the control (knowing it will override the text of the control).

  2. Use some off-screen text if you want it to be encountered only by screen reader users.

Use an off-screen technique:

<div class="sr-only">
Here be redundant or extraneous content
</div>

The CSS might look like this (accounting for RTL languages too):

.SRonly {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  top: auto;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html[dir=rtl] .SRonly {
  left: inherit;
  left: unset;
  right: -9999px;
}

There are other techniques, but their value depends on your audience and its technology profile.

Your use of autofocus on those <div> makes me nervous. I hope you are not using them as interactive controls (like buttons). Ideally never use a div as interactive content.

这篇关于JAWS 未读取 DIV ARIA-LABEl的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆