The tab component on the design system currently has a few accessibility issues, including:
The visually hidden heading "Contents" is inappropriate and does not describe the tab container. In this case, a more suitable heading might be "Further education support". This would need to change depending on the purpose.
The container with role="tablist" does not have an accessible name. This should reference the heading using aria-labelledby.
The tab panel container does not use role="tabpanel".
The tab panel container does not have an accessible name.
The page is automatically scrolling upon arrowing between tabs. This could make navigating between tabs disorientating for users. This also occurs upon selecting a tab with the mouse.
As well, the <nav> region is not required and is not used in the ARIA Authoring Practices.
Description of the issue
The tab component on the design system currently has a few accessibility issues, including:
role="tablist"does not have an accessible name. This should reference the heading usingaria-labelledby.role="tabpanel".As well, the
<nav>region is not required and is not used in the ARIA Authoring Practices.Steps to reproduce the issue
Screenshots
Environment