Question

我正在尝试使引导选项卡可访问 - 屏幕阅读器应将选项卡读为http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml（第1页/第1页，共1页中的选项卡），但引导选项卡始终显示为所有选项卡的第1页，共1条标签项。如果我将role =“tab”赋予li项，它将读取为5/5之中的5等，但它不能正确读取展开和折叠状态。如果我给role =“tab”来锚定项目，扩展＆amp;在屏幕阅读器中正确读取折叠状态bu标签计数被错误地读取为1的1。任何想法/见解都会非常有用。

在下面找到我的标记：

<ul class="nav nav-tabs nav-fill nav-tabs-horizontal slider tab-bar" id="secondary-tab" role="tablist">
    <li role="presentation" class="nav-item" >
        <a class="nav-link active" id="summary-tab" data-toggle="tab" href="#summary-details" role="tab"  aria-controls="summary-details">Summary</a>
    </li>
    <li role="presentation" class="nav-item" >
        <a class="nav-link" id="coverage-tab" data-toggle="tab" href="#coverage" role="tab" aria-controls="coverage">Details</a>
    </li>
    <li role="presentation" class="nav-item" >
        <a class="nav-link" id="payment-tab" data-toggle="tab" href="#payment" onclick="getPaymentHistory()" role="tab" aria-controls="payment">Transactions</a>
    </li>
    <li role="presentation" class="nav-item" >
        <a class="nav-link" id="loans-tab" data-toggle="tab" href="#loanstab" role="tab" aria-controls="loanstab">Loan</a>
    </li>
    <li role="presentation" class="nav-item" >
        <a class="nav-link" id="correspondence-tab" data-toggle="tab" href="#correspondence" role="tab" aria-controls="correspondence" >Statements</a>
    </li>
</ul>

Answer 1

您应该删除父role="presentation"。我认为a role="tab"应该是role="tablist"的直接孩子......

<ul class="nav nav-tabs nav-fill nav-tabs-horizontal slider tab-bar" id="secondary-tab" role="tablist">
        <a class="nav-link nav-item active" id="summary-tab" data-toggle="tab" href="#summary-details" role="tab" aria-controls="summary-details">Summary</a>
        <a class="nav-link nav-item" id="coverage-tab" data-toggle="tab" href="#coverage" role="tab" aria-controls="coverage">Details</a>
        <a class="nav-link nav-item" id="payment-tab" data-toggle="tab" href="#payment" onclick="getPaymentHistory()" role="tab" aria-controls="payment">Transactions</a>
        <a class="nav-link nav-item" id="loans-tab" data-toggle="tab" href="#loanstab" role="tab" aria-controls="loanstab">Loan</a>
        <a class="nav-link nav-item" id="correspondence-tab" data-toggle="tab" href="#correspondence" role="tab" aria-controls="correspondence" >Statements</a>
</ul>

Answer 2

我可以通过在li的标签中添加“ aria-label”，使屏幕阅读器宣布“摘要标签1 of 5”。根据您的代码，它可以是： var $tabList=$("li[role='presentation']"), len= $tabList.length, count=0; $tabList.each(function(){ count++; var $linkName=$(this).find("a").text(); $(this).attr("aria-label",$linkName+" tab"+count+" of"+len); });

...

辅助功能 - 屏幕阅读器无法读取标签计数

2 个答案: