DIV ARIA-LABEl JAWS 未读取
DIV ARIA-LABEl not being read by JAWS
我有一个 angular2 应用程序,我正在将一些动态文本绑定到 ARIA-LABEl 以获得嵌套 DIV。但是当我使用 JAWS reader 在页面上定位 DIVs 时,它没有读取指定的 text.This 是我试图读取的文本 - 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="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>
您的描述缺乏细节或工作示例,因此我没有尝试提供解决方案,而是提供以下内容:aria-label
不适用于 <div>
或 <span>
。
A <div>
和 <span>
既不是地标也不是互动内容。 aria-label
不会被屏幕 reader 读取(这是正确的)。
在不知道用途的情况下,我有两个建议可能会有所帮助:
直接把aria-label
放在控件上(知道了会覆盖控件的文字)
如果您希望 仅 被屏幕 reader 用户遇到,请使用一些屏幕外文本。
使用屏幕外技术:
<div class="sr-only">
Here be redundant or extraneous content
</div>
CSS 可能看起来像这样(也考虑了 RTL 语言):
.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,但它们的价值取决于您的受众及其技术概况。
你在 <div>
上使用 autofocus
让我很紧张。我希望您不要将它们用作交互式控件(如按钮)。理想情况下 never use a div
as interactive content.
上面说的是对的,但是有一个妥善的解决办法:
A <div>
和 <span>
既不是地标也不是互动内容。 aria-label
不会被屏幕读取 reader(这是正确的)。
让 JAWS 或 NVDA 等 reader 读取 <div>
的正确解决方案是添加 role
标签以及 aria-label
。
例子:
<div role="navigation" aria-label="Main">
<!-- list of links to main website locations -->
</div>
这里有 2 个链接,其中包含应添加的各种角色的广泛列表:
我找到了一个对我来说效果更好的答案,没有任何自定义 CSS 所以想分享:
<div role="heading" aria-level="1">
<span aria-label="This is what screen-reader will say">
<!-- no content shown, but is a heading for screen reader -->
</span>
</div>
aria-label 不会在标题上阅读,但如果它是标题内的内容,则会阅读。
我有一个 angular2 应用程序,我正在将一些动态文本绑定到 ARIA-LABEl 以获得嵌套 DIV。但是当我使用 JAWS reader 在页面上定位 DIVs 时,它没有读取指定的 text.This 是我试图读取的文本 - 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="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>
您的描述缺乏细节或工作示例,因此我没有尝试提供解决方案,而是提供以下内容:aria-label
不适用于 <div>
或 <span>
。
A <div>
和 <span>
既不是地标也不是互动内容。 aria-label
不会被屏幕 reader 读取(这是正确的)。
在不知道用途的情况下,我有两个建议可能会有所帮助:
直接把
aria-label
放在控件上(知道了会覆盖控件的文字)如果您希望 仅 被屏幕 reader 用户遇到,请使用一些屏幕外文本。
使用屏幕外技术:
<div class="sr-only">
Here be redundant or extraneous content
</div>
CSS 可能看起来像这样(也考虑了 RTL 语言):
.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,但它们的价值取决于您的受众及其技术概况。
你在 <div>
上使用 autofocus
让我很紧张。我希望您不要将它们用作交互式控件(如按钮)。理想情况下 never use a div
as interactive content.
上面说的是对的,但是有一个妥善的解决办法:
A <div>
和 <span>
既不是地标也不是互动内容。 aria-label
不会被屏幕读取 reader(这是正确的)。
让 JAWS 或 NVDA 等 reader 读取 <div>
的正确解决方案是添加 role
标签以及 aria-label
。
<div role="navigation" aria-label="Main">
<!-- list of links to main website locations -->
</div>
这里有 2 个链接,其中包含应添加的各种角色的广泛列表:
我找到了一个对我来说效果更好的答案,没有任何自定义 CSS 所以想分享:
<div role="heading" aria-level="1">
<span aria-label="This is what screen-reader will say">
<!-- no content shown, but is a heading for screen reader -->
</span>
</div>
aria-label 不会在标题上阅读,但如果它是标题内的内容,则会阅读。