Tabs inaccessible to Voice Control on Safari

[shabana-ali]

Seen on

• Self assessments repayments
• Income Tax and View Change

When using Voice Control with the Safari browser, numbers are not assigned to the tabs, so the user cannot use them. A user can however use the grid command to activate the tab.

<ul class="govuk-tabs__list" role="tablist">
    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected" role="presentation">
      <a class="govuk-tabs__tab" href="#in-progress" id="tab_in-progress" role="tab" aria-controls="in-progress" aria-selected="true" tabindex="0">
        In progress
      </a>
    </li>
    <li class="govuk-tabs__list-item" role="presentation">
      <a class="govuk-tabs__tab" href="#history" id="tab_history" role="tab" aria-controls="history" aria-selected="false" tabindex="-1">
        History
      </a>
    </li>
</ul>

This browser bug issue was raised to the team for awareness and told that we do not expect them to action any fixes at the moment.

Removing the role="tab" from the <a> elements fixes this but then:

1. this is not valid syntax for the role="tablist" used on the container <ul> element
2. screen reader users are not made aware of the tabs / number of tabs; these are just declared as links

[ashfaqhussain357]

Using the grid option on voice recognition software works as does using the 'tab' command which sets focus on the required element. Issue fixed.