为什么HTML元素的tabindex重写为-1?

时间:2018-05-07 14:22:22

标签: html angular accessibility tabindex

我已将HTML元素的标签索引设置为' 0'但在UI中加载时,它变为' -1'自动。

以下是我使用Angular4代码的实际逻辑

<div *ngFor="let employee of employees; let i = index">
        <h4  id="name" tabindex="0" aria-label="{{employee.name}}">{{employee.name}}</h4>
        <p tabindex="0" aria-label="{{employee.id}}">{{employee.id}}</p>
        <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="0">Show Details</a></p>
        <button  role="button"  aria-label="Move Next" tabindex="0">Move Next</button>
</div>

对于每个元素我都将tabindex添加为&#39; 0&#39;

* ngFor只不过是一个迭代循环。

我在员工数组中有4个对象。

所以它在UI中被迭代并加载

前3次出现按预期加载tabindex =&#34; 0&#34;对于div中的所有四个元素。

但是对于第四次出现的tabindex并改为&#34; -1&#34;。所以可访问性不适用于这两个元素。

查找浏览器中加载的元素

    <div >
    <h4  id="name" tabindex="0" aria-label="Employee1">Employee1</h4>
    <p tabindex="0" aria-label="10001">10001</p>
    <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="0">Show Details</a></p>
    <button  role="button"  aria-label="Move Next" tabindex="0">Move Next</button>
</div>
<div >
    <h4  id="name" tabindex="0" aria-label="Employee2">Employee2</h4>
    <p tabindex="0" aria-label="10002">10002</p>
    <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="0">Show Details</a></p>
    <button  role="button"  aria-label="Move Next" tabindex="0">Move Next</button>
</div>
<div >
    <h4  id="name" tabindex="0" aria-label="Employee3">Employee3</h4>
    <p tabindex="0" aria-label="10003">10003</p>
    <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="0">Show Details</a></p>
    <button  role="button"  aria-label="Move Next" tabindex="0">Move Next</button>
</div>
<div >
    <h4  id="name" tabindex="0" aria-label="Employee4">Employee4</h4>
    <p tabindex="0" aria-label="10004">10004</p>
    <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="-1">Show Details</a></p>
    <button  role="button"  aria-label="Move Next" tabindex="-1">Move Next</button>
</div>

查看第4个div tabindex的差异并更新为&#34; -1&#34;

一切都是剩下的循环按预期工作但为什么不是最后一次出现?

任何人都可以澄清我

0 个答案:

没有答案