Re: Tabs on web Pages

Jonathan COHN



A set of tabs should have an associated tab panels where there is one tab for each tab panel. When a tab is activated the associated tab panel should become visible to both the sighted and blind user. The group of tabs in is usually  called a tablist.




Please try the following from an accessibility consulting firm. It has a simple tab list with tabpanels that follows the ARIA authoring practices. If you can manipulate this set of tab but not ones one site, then I would suggest that the site you are visiting is probably forgetting about some of the functionality that is described in linked documents.


Generally, a tab panel should be changed to different information based on the tab that is currently selected. The “aria-selected” attribute on the web page should be modified to show which tab is currently selected. Either clicking on a tab with mouse, space while in focus, or using arrow keys in “focus mode” should change the active panel. The authoring practices recommends that the list of tabs use only one tab stop, and that pressing tab from within any of the tabs in the tablist should move you to the visible tab panel, or the first interactive component in the tab panel. Often this practice is ignored and each tab can be reached with the tab key.


Also, though recommended that the tab panels all be after the all of the tabs, this does not always occur.

From: <> On Behalf Of Andy
Sent: Monday, July 08, 2019 7:04 PM
Subject: [nvda] Tabs on web Pages
Importance: Low


I am noticing that more and more web pages are using tabs to organize their content.  For example, a restaurant web site may use separate tabs on a web page displaying their menu for breakfast, lunch items, etc.  When I hit ENTER or the spacebar on these tabs I hear nothing unless I leave the tab.  I can't read items within the tab, or move among items within the tab.  What keystrokes to I need to use to work with these tabsf?




Join to automatically receive all group messages.