2.13 Tabs do not provide expected keyboard navigation, announcements, or focus management (Positive)

2.13.1 WCAG 1.3.1 (A), 2.4.3 (A), 4.1.2 (A) - Desktop, Mobile, iPad

On the Deputy reports dashboard, the tabs component is not behaving as expected for an accessible tab interface. Firstly, keyboard users cannot move between tabs using the arrow keys; they can only use the Tab key. This is unexpected and can make navigation slower for users navigating using a keyboard.

Additionally, when a tab is selected, the page reloads and focus is returned to the top of the page. This forces users to navigate back down to locate the updated content, which is again unexpected and inefficient. Selecting a tab is meant to dynamically change content only within the tabpanel, which users should be able to navigate to directly after selecting a tab.

This occurs because although the tabs have the correct roles, there is no JavaScript to implement arrow key navigation and focus management. Tab–panel relationships are also missing: tabs link to full URLs (e.g. /org/?status=) rather than the IDs for associated panels, and there are no role="tabpanel" elements. This prevents assistive technologies from determining which content each tab controls, leading to page reloads and unexpected navigation.

Finally, the numbers showing how many items are in each category (e.g. “Clients – 11”) are not announced together with the tab name. Screen reader users hear only “Clients, tab” instead of “Clients, 11 items, tab”, creating a mismatch between the visual and non-visual experience.

These issues collectively mean the tabs are slower, less predictable, and more confusing to use for keyboard and screen reader users, and they do not meet the WAI-ARIA requirements for tab interfaces.

Tabs highlighted on the Deputy reports dashboard with NVDA speech viewer activated

FIGURE 2.19: Tabs highlighted on the Deputy reports dashboard with NVDA speech viewer activated

2.13.2 Code Snippet

<div class="govuk-tabs">
  <ul class="govuk-tabs__list" role="tablist">
    <li class="govuk-tabs__list-item">
      <a href=".../org/?status=" role="tab" tabindex="0">
        Clients
      </a>
      <span>11</span>
    </li>
    <li class="govuk-tabs__list-item">
      <a href=".../org/?status=notStarted" role="tab" tabindex="0">
        Not started
      </a>
      <span>11</span>
    </li>
    <!-- other tabs... -->
  </ul>
</div>

2.13.3 Recommendation

Update the tabs component so that they conform to GDS recommendations on implementing tab controls.

Each tab should have a unique id and be linked to its associated panel via aria-controls, while each panel should have role="tabpanel" and reference the correct tab using aria-labelledby. The active tab must be identified with aria-selected="true" and tabindex="0", with all inactive tabs set to aria-selected="false" and tabindex="-1".

Additionally, tabs should be linked using fragment identifiers (e.g. href="#clients") rather than full URLs, to allow focus to remain within the page without triggering a page reload.

Finally, to ensure that screen reader users hear the count values, either move the <span> containing the count inside the tab link or associate it with the tab using aria-describedby.

<div class="govuk-tabs">
  <ul class="govuk-tabs__list" role="tablist">
    <li class="govuk-tabs__list-item">
      <a id="tab-clients" href="#panel-clients" role="tab"
         aria-controls="panel-clients" aria-selected="true" 
         tabindex="0">
        Clients <span class="govuk-tag govuk-tag--blue">11</span>
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a id="tab-not-started" href="#panel-not-started" role="tab"
         aria-controls="panel-not-started" aria-selected="false" 
         tabindex="-1">
        Not started <span class="govuk-tag govuk-tag--grey">11</span>
      </a>
    </li>
  </ul>
...
</div>

2.13.5 Spot Check: February 2026

This issue has been resolved. The component has been updated from tabs to a filters interface, where users can select a radio button (Any, Not started, In progress) and search using those filters.

Note that the page still reloads and focus begins at the top of the page; managing focus more directly may be more efficient, as suggested in [Error summary does not receive focus on form submission:::::::::::::: (Observation)].

This has been updated from a ‘Medium’ severity issue to a ‘Positive’ finding.