WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple tabs

for

From: tim.harshbarger
Date: Jul 18, 2023 8:05AM

If all the tabs in both groups display their content in the same location and also replace the content displayed by any other tab selected in either group, then just make all 6 tab buttons a single tab group. This will simplify the problem because most screen reader users who have encountered tab controls before will assume that the content for the tab panel starts immediately after the last tab in the group.

If your concern is that screen readers might not know that new content is displayed, make sure the selected state of the tab panel is conveyed to the user. Again, screen reader users who have encountered tab controls will assume that if the screen reader indicates a tab is currently selected, the content below will have changed to reflect that.

if your concern is that the screen reader user will not know when they have found the tab panel, there are some techniques you can use to help with this. One technique is to place a heading at the beginning of the tab panel that reflects the name of the tab. Another is to wrap the tab panel in a landmark region whose name reflects the name of the selected tab.

If you absolutely must ensure the tab buttons are in 2 seperate groups, then make sure to use the techniques I mentioned above for the tab panels. However, if the only reason the tab buttons are in 2 seperate groups is because they reflect different categories of things, still make them a single tab group but just use the accessible name for each tab button to reflect that additional information.

If you do use live regions, don't have the live region announce all the contents of the tab panel when the user selects a new tab. if the only information you are trying to convey with a live region is that the contents for the tab panel have changed, then communicate exactly that information. Certainly reading all the new contents does something similar, but it is not a great user experience if the only thing the person needs to know is that the contents were updated. When you have the live region read all the contents, the screen reader user typically figures that out after the first couple of words. They don't need to know all the details of the content to figure that out.

Thanks,
Tim