Topics

Tabs on web Pages

Andy
 

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?
 
Andy
 

 

A few example sites would prove very helpful to those trying to assist.

--

Brian - Windows 10 Pro, 64-Bit, Version 1903, Build 18362  

The color of truth is grey.

           ~ André Gide

 

 

Abbie Taylor
 

If your restaurant site is like the Amazon ALEXA site, once you've selected the desired tab, simply press H to navigate by heading to the content in that tab. I hope that helps.
--
Abbie Johnson Taylor, Author
http://www.abbiejohnsontaylor.com
http://abbiescorner.wordpress.com
abbietaylor945@...

Cohn, Jonathan
 

Hello,

 

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.

http://pauljadam.com/demos/aria-tabpanel.html

 

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: nvda@nvda.groups.io <nvda@nvda.groups.io> On Behalf Of Andy
Sent: Monday, July 08, 2019 7:04 PM
To: nvda@nvda.groups.io
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?

 

Andy

 

Andy
 


Most recently the American Express site, but you would have to log in to get to the page where the problem occurred.
 
Andy
 

----- Original Message -----
Sent: Tuesday, July 09, 2019 8:08 AM
Subject: Re: [nvda] Tabs on web Pages

A few example sites would prove very helpful to those trying to assist.

--

Brian - Windows 10 Pro, 64-Bit, Version 1903, Build 18362  

The color of truth is grey.

           ~ André Gide

 

 

Sarah k Alawami
 

Another example is libsyn.com and once you log in you will see the tabs. He are indeed accessible to get to and use.

Sarah Alawami, owner of TFFP. . For more info go to our website. This is also our libsyn page as well.
For stuff we sell, mac training materials and  tutorials go here.
and for hosting options go here
to subscribe to the feed click here

Our telegram channel is also a good place for an announce onlt to.y in regard to podcasts, contests, etc.

Finally, to become a patron and help support the podcast go here

On 9 Jul 2019, at 11:43, Cohn, Jonathan wrote:

Hello,

 

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.

http://pauljadam.com/demos/aria-tabpanel.html

 

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: nvda@nvda.groups.io <nvda@nvda.groups.io> On Behalf Of Andy
Sent: Monday, July 08, 2019 7:04 PM
To: nvda@nvda.groups.io
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?

 

Andy

 

 

Hmmm is libsyn a good choice, I have started my podcast on anchor but found out that when I put it on podbean you only got 5 hours audio, is libsyn a good second feed choice or am I wasting my time.



On 10/07/2019 7:43 AM, Sarah k Alawami wrote:

Another example is libsyn.com and once you log in you will see the tabs. He are indeed accessible to get to and use.

Sarah Alawami, owner of TFFP. . For more info go to our website. This is also our libsyn page as well.
For stuff we sell, mac training materials and  tutorials go here.
and for hosting options go here
to subscribe to the feed click here

Our telegram channel is also a good place for an announce onlt to.y in regard to podcasts, contests, etc.

Finally, to become a patron and help support the podcast go here

On 9 Jul 2019, at 11:43, Cohn, Jonathan wrote:

Hello,

 

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.

http://pauljadam.com/demos/aria-tabpanel.html

 

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: nvda@nvda.groups.io <nvda@nvda.groups.io> On Behalf Of Andy
Sent: Monday, July 08, 2019 7:04 PM
To: nvda@nvda.groups.io
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?

 

Andy

 

Sarah k Alawami
 

I can't answer that for you. but I personally love and use them, and have for years.

Take care. and hope that page illustrates the right way to use tabs.

Sarah Alawami, owner of TFFP. . For more info go to our website. This is also our libsyn page as well.
For stuff we sell, mac training materials and  tutorials go here.
and for hosting options go here
to subscribe to the feed click here

Our telegram channel is also a good place for an announce only in regard to podcasts, contests, etc.

Finally, to become a patron and help support the podcast go here

On 9 Jul 2019, at 13:18, Shaun Everiss wrote:

Hmmm is libsyn a good choice, I have started my podcast on anchor but found out that when I put it on podbean you only got 5 hours audio, is libsyn a good second feed choice or am I wasting my time.



On 10/07/2019 7:43 AM, Sarah k Alawami wrote:

Another example is libsyn.com and once you log in you will see the tabs. He are indeed accessible to get to and use.

Sarah Alawami, owner of TFFP. . For more info go to our website. This is also our libsyn page as well.
For stuff we sell, mac training materials and  tutorials go here.
and for hosting options go here
to subscribe to the feed click here

Our telegram channel is also a good place for an announce onlt to.y in regard to podcasts, contests, etc.

Finally, to become a patron and help support the podcast go here

On 9 Jul 2019, at 11:43, Cohn, Jonathan wrote:

Hello,

 

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.

http://pauljadam.com/demos/aria-tabpanel.html

 

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: nvda@nvda.groups.io <nvda@nvda.groups.io> On Behalf Of Andy
Sent: Monday, July 08, 2019 7:04 PM
To: nvda@nvda.groups.io
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?

 

Andy

 

Tony Malykh
 

Not quite answering your question, but related to the question of tabs navigation:

My add-on BrowserNav adds browse mode shortcuts Y and Shift+Y to jump to next/previous tab on web pages.

Then of course you can press Enter to select that tab.

You can download it on the official NVDA add-ons website:

https://addons.nvda-project.org/addons/browsernav.en.html


Best

Tony



On 7/8/2019 4:04 PM, Andy wrote:
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?
 
Andy