CODEWITHSUNDEEP
bootstrap-4accessibilityuiaccessibilitynvda
FlashyFuddyFuddy
FlashyFuddyFuddy

Reputation: 303

Accessibility - Screen reader not reading tabs count

I'm trying to make the bootstrap tab accessible - the screen reader should read tabs as http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml (tab 1 of 1/ tab 1 of 2) but the bootstrap tabs always reads as tab 1 of 1 for all the tab items. If I give the role="tab" to the li items, it reads as 1 of 5/ 2 of 5 etc. but it does not read the expanded and collapsed state correctly. If I give role="tab" to anchor items, expanded & collapsed state is read correctly in screen reader bu the tab count is read wrongly as 1 of 1 always. Any ideas/ insights would be really helpful.

Find my markup below:

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

Upvotes: 1

Views: 1763

Answers (2)

KenDev
KenDev

Reputation: 1

I could get screen reader to announce " Summary tab 1 of 5" by adding "aria-label" in the li's. Per your code, it can be: 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); });

...

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362720

You should remove the parent role="presentation". I think the a role="tab", should be a direct child of 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>

Upvotes: 1

Related Questions