Question

我有一个angular2应用程序，我将一些动态文本绑定到ARIA-LABEl以获得嵌套的DIV。但是当我使用JAWS阅读器在页面上找到DIV时，它并没有读取指定的文本。这是我试图阅读的文本 - attr.aria-label =“{productDetails？.ProductName}}的产品详细信息“

此外，如果我为此div指定了标题角色，它会读取动态文本，但不会在文本前面加上“产品详细信息”的前缀

<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>

Answer 1

您的描述缺少详细信息或工作示例，因此我可以提供的解决方案不是试图提供解决方案，而是aria-label不适用于<div>或<span>。

<div>和<span>既不是地标，也不是互动内容。 <{1}}将不会被屏幕阅读器读取（这是正确的）。

在不知情的情况下，我有两条建议可能有所帮助：

将aria-label直接放在控件上（知道它会覆盖控件的文本）。
如果您希望屏幕阅读器用户仅使用，请使用屏幕外文字。

使用离屏技术：

aria-label

CSS可能看起来像这样（也就是RTL语言）：

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

There are other techniques，但它们的价值取决于您的受众及其技术资料。

您对.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; }使用autofocus让我感到紧张。我希望你不要将它们用作交互式控件（如按钮）。理想情况下never use a div as interactive content。

Answer 2

上面所说的是正确的，但是有一个适当的解决方案：

<div>和<span>既不是地标，也不是交互式内容。屏幕阅读器不会读取aria-label。（正确）。

让JAWS或NVDA之类的阅读器读取<div>的正确方法是添加一个role标签和一个aria-label。

例：

<div role=navigation" aria-label="Main">
  <!-- list of links to main website locations -->
</div>

这里有2个链接，其中应添加各种角色的广泛列表：

Answer 3

我找到了一个答案，这个答案对我来说效果更好，没有任何自定义 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 不会在标题上读取，但如果它是标题内的内容，则会读取。

DIV ARIA-LABEl没有被JAWS阅读

3 个答案: