[CATO] Accessible website tabs examples?

[Monica Olsson]

Hi Meridith,

You are correct that the designers and developers at Modern Campus are responsible for ensuring their Tab patterns are accessible and usable, especially because this is something at the CMS template level, not content that we create or have configurable control over on our end.

The Web Accessibility Initiative (WAI) publishes the ARIA Authoring Practice Guides and has an entire section dedicated to accessible Tab design<https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/>. I then located this video from 2023 titled Create Accessible Tabs with HTML, CSS, and JS<https://www.youtube.com/watch?v=fI9VM5zzpu8> that may be helpful for developers.

Also, a big thank you to Vicki for sharing your research with us!
Monica


[Title: SBCTC logo - Description: Compass]

Monica M. Olsson (she/her/hers)

Policy Associate – Accessible IT Coordinator

Washington State Board for Community and Technical Colleges

•Email: molsson at sbctc.edu<mailto:molsson at sbctc.edu> • Phone: 360-704-3922



The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

[cid:b14956ee-cc57-46c8-bdf6-aef5d55707ea]<https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature>                Book time to meet with me<https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature>

________________________________
From: CATO <cato-bounces at lists.ctc.edu> on behalf of Meridith Hatch via CATO <cato at lists.ctc.edu>
Sent: Monday, August 26, 2024 10:47 AM
To: cato at lists.ctc.edu <cato at lists.ctc.edu>
Cc: Meridith Hatch <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/20240827/d94c8482/attachment-0001.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Outlook-Title_ SBC.png
Type: image/png
Size: 8105 bytes
Desc: Outlook-Title_ SBC.png
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240827/d94c8482/attachment-0003.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Outlook-Title_ SBC.png
Type: image/png
Size: 22672 bytes
Desc: Outlook-Title_ SBC.png
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240827/d94c8482/attachment-0004.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Outlook-3y2iqfwv.png
Type: image/png
Size: 528 bytes
Desc: Outlook-3y2iqfwv.png
URL: <http://lists.ctc.edu/pipermail/cato_lists.ctc.edu/attachments/20240827/d94c8482/attachment-0005.png>