[CATO] Accessible website tabs examples?

Wed Aug 28 12:14:38 PDT 2024

Just an FYI, I reached out to Monica and Doug to show them the tabs and they are working properly now.  As for me, I think I have been overthinking this because this has been a long process to get to this point.

I need to remember I have colleagues and a team I can reach out to for input and advice!! And what a great team you all are!!!!

Please note my summer hours from June 16 - August 31:
8:00 a.m. to 5:30 p.m., Monday through Thursday and 8:00 a.m. to noon on Friday.

[Title: SBCTC logo - Description: Compass]Vicki Walton
Pronouns: they/them
Web Accessibility Specialist/IT Quality Assurance Tester
Washington State Board for Community and Technical Colleges
vwalton at sbctc.edu• office: 360-704-4343• website: www.sbctc.edu<https://www.sbctc.edu/default.aspx>
Accessibility is a fundamental right

Accessibility is not a checkbox. Accessibility is a mindset that can lead to a very powerful sense of inclusion.
~ Maayan Ziv founder and CEO AccessNow

From: CATO <cato-bounces at lists.ctc.edu> On Behalf Of Vicki Walton via CATO
Sent: Tuesday, August 27, 2024 12:31 PM
To: Distribution List for the Committee for Accessible Technology Oversight <cato at lists.ctc.edu>
Cc: Vicki Walton <vwalton at sbctc.edu>
Subject: Re: [CATO] Accessible website tabs examples?

[Sent from outside SBCTC]

Hello CATO,

I have been working closely with Meridith and Modern Campus as they update our SBCTC website using templates, and we came across the problem with tabs and tab panels on one of their pages. Therefore, I have spent a considerable amount of time doing research on tabs and tab panels.  The information below is what I found to help me understand how they are to be developed and navigated with the screen reader. Yet, because I'm not a developer I can only share with Modern Campus what I'm experiencing while using a screen reader.

Full disclosure, I have not come across many tabs in my testing, so these tabs are new to me.  The first time I had an experience with tabs was in our Canvas Micro Courses that we ended up changing out to the accordion style because no matter what Paul Kreemer did, he could not get them to work. Sure, Canvas is a separate LMS that has its own criteria for what you can and can't do with in that platform.

Recording of my experience with a screen reader of the Modern Campus tabs: Tab Navigation Retest on August 27<https://drive.google.com/file/d/1PAnDgyswulYdkfDXW8ZM2L3QHsB6Ck9j/view>

Start of links I have been researching:

Tabbed interfaces<https://accessuse.eu/en/tabbed-interfaces.html#:~:text=The%20screen%20reader%20then%20announces,to%20focus%20the%20next%20tab.>
This one is a good read

Keyboard behavior on Tabs and Tab Panels<https://inclusive-components.design/tabbed-interfaces/>

Google Chrome AI Overview:
Screen readers can navigate tabs and tab panels on webpages using a combination of arrow keys, the tab key, and other keyboard shortcuts:

  *   Tab key: Moves focus to a tab, triggering applications mode. This mode allows the screen reader to use the arrow keys to navigate through tabs instead of moving focus one character at a time. Pressing the tab key again moves focus to the first focusable element in the tab panel, or to the next focusable item on the page if there are none in the tab panel.
  *   Arrow keys: When focus is on a tab, the left and right arrow keys move focus to the previous and next tabs, respectively. The up and down arrow keys can also be used to navigate between tabs.
  *   Enter: Selects an item.

To make tab panels accessible to screen readers, web developers can add the onKeyDown() function to the functions to enable arrow key navigation. They can also use Accessible Rich Internet Applications (ARIA) to add attributes to HTML documents that create accessibility semantics for tab panels.

Navigating Tabs in a Web Page Using JAWS Screen Reader<https://stackoverflow.com/questions/38309795/navigating-tabs-in-a-web-page-using-jaws-screen-reader>

Q:
What keystrokes should one use to navigate tabs on a web page using JAWS Screen Reader? I'm talking about tabs within a web page, not separate web pages opened in different tabs. Such tabs usually appear in the middle of web pages.

What I want to know is how to navigate from one tab to its associated content area. Also, once I'm done reading the tab's content, I want to go back to tab titles, switch to another tab, and then read that second tab content.
I help to build websites that are accessible to screen reader users. An answer to this question would allow us to test what we develop.

A:
Within tabs, users will expect to use left/right arrow to navigate between tabs.

  1.  User press tab key to focus to the tab strip; the first tab item gets focus.
  2.  Then will use left/right arrow to jump between tabs.
  3.  Pressing tab key again, will move the focus out of the tab strip to the next focusable element

Screen reader users and tab panels<https://accessuse.eu/en/tabbed-interfaces.html#:~:text=The%20screen%20reader%20then%20announces,to%20focus%20the%20next%20tab.>

When a screen reader encounters a tablist element (or rather, the focus is moved inside a tablist element) it goes into forms/application mode, a mode in which screen reader navigation (with arrow keys / short cut keys) is unavailable.

This makes a tabpanel element with no focusable elements more difficult to discover by a screen reader user because they have to manually force the screen reader out of forms/application mode once they have activated a tab.

This is why the idea of putting tabindex="0" on a tabpanel element has been floated and can be acceptable in this particular context (it is not ideal, because it represents an element which is focusable but has no interactive properties).

The solution to use JavaScript to send focus to the tabpanel as soon as the corresponding tab is focused is not recommended. This is like having an onchange event in a dropdown that automatically sends focus elsewhere. Imagine that the tab the user wants to activate is the last in a list of 5 tabs. You don't want the user to have to press the arrow key, then shift-tab to get back to the tablist, and repeat this four times to get to the desired tab.

End of links.

As Meridith mentioned, any input that might help us explain to Modern Campus how these tabs should work with screen readers will be most gratefully appreciated.

Please note my summer hours from June 16 - August 31:
8:00 a.m. to 5:30 p.m., Monday through Thursday and 8:00 a.m. to noon on Friday.

[Title: SBCTC logo - Description: Compass]Vicki Walton
Pronouns: they/them
Web Accessibility Specialist/IT Quality Assurance Tester
Washington State Board for Community and Technical Colleges
vwalton at sbctc.edu•<mailto:vwalton at sbctc.edu•> office: 360-704-4343• website: www.sbctc.edu<https://www.sbctc.edu/default.aspx>
Accessibility is a fundamental right

Accessibility is not a checkbox. Accessibility is a mindset that can lead to a very powerful sense of inclusion.
~ Maayan Ziv founder and CEO AccessNow

From: CATO <cato-bounces at lists.ctc.edu<mailto:cato-bounces at lists.ctc.edu>> On Behalf Of Meridith Hatch via CATO
Sent: Monday, August 26, 2024 10:48 AM
To: cato at lists.ctc.edu<mailto:cato at lists.ctc.edu>
Cc: Meridith Hatch <mhatch at sbctc.edu<mailto:mhatch at sbctc.edu>>
Subject: [CATO] Accessible website tabs examples?

[Sent from outside SBCTC]

Howdy!
Anyone know of any examples of website tabs that work right with screen readers, voice on mobile and with voice command navigation? Any examples?

I like tabs, we paid for tabs from Modern Campus, but thus far their tabs fail to function correctly with assistive technology.

Hoping y'all can help me find examples of success because it feels like they're leaving it on us to make their stuff accessible (and we're not developers).

Thanks in advance.

[Title: SBCTC logo - Description: Compass]

 Meridith Hatch, MBA

 Website Administrator

 Washington State Board for Community and Technical Colleges

 mhatch at sbctc.edu<mailto:mhatch at sbctc.edu> • o: 360-704-3951 • c: 253-397-7003

 sbctc.edu<https://www.sbctc.edu/> • 𝕏: @SBCTCWashington<https://x.com/SBCTCWashington> • Facebook: @WASBCTC<https://www.facebook.com/wasbctc/>

 Submit a web work request ticket<https://form.asana.com/?k=ceLwZ_RiflYfoym6Hvy6rg&d=1202058492250252>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240828/b80c004a/attachment-0001.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image001.gif
Type: image/gif
Size: 1073 bytes
Desc: image001.gif
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240828/b80c004a/attachment-0002.gif>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image002.png
Type: image/png
Size: 18063 bytes
Desc: image002.png
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240828/b80c004a/attachment-0004.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image004.gif
Type: image/gif
Size: 278 bytes
Desc: image004.gif
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240828/b80c004a/attachment-0003.gif>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image008.png
Type: image/png
Size: 8105 bytes
Desc: image008.png
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240828/b80c004a/attachment-0005.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image005.png
Type: image/png
Size: 8117 bytes
Desc: image005.png
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240828/b80c004a/attachment-0006.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image006.png
Type: image/png
Size: 8124 bytes
Desc: image006.png
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240828/b80c004a/attachment-0007.png>