<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" style="display:none;"> P {margin-top:0;margin-bottom:0;} </style>
</head>
<body dir="ltr">
<div class="elementToProof" style="font-family: "Century Gothic", sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
Hi Meridith,</div>
<div class="elementToProof" style="font-family: "Century Gothic", sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
<br>
</div>
<div class="elementToProof" style="font-family: "Century Gothic", sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
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.</div>
<div class="elementToProof" style="font-family: "Century Gothic", sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
<br>
</div>
<div class="elementToProof" style="font-family: "Century Gothic", sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
The Web Accessibility Initiative (WAI) publishes the ARIA Authoring Practice Guides and has an entire section dedicated to
<b><a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/" id="OWA35a20438-44f6-7334-795a-c48155cf0bda" class="OWAAutoLink" title="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/" data-auth="NotApplicable">accessible
Tab design</a></b>. I then located this video from 2023 titled <b><a href="https://www.youtube.com/watch?v=fI9VM5zzpu8" title="https://www.youtube.com/watch?v=fI9VM5zzpu8">Create Accessible Tabs with HTML, CSS, and JS</a></b> that may be helpful for developers.</div>
<div class="elementToProof" style="font-family: "Century Gothic", sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
<br>
</div>
<div class="elementToProof" style="font-family: "Century Gothic", sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
Also, a big thank you to Vicki for sharing your research with us!</div>
<div class="elementToProof" style="font-family: "Century Gothic", sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
Monica</div>
<div id="Signature">
<p style="text-align: left; background-color: rgb(255, 255, 255); margin: 0px; font-family: Calibri, sans-serif; font-size: 11pt; color: rgb(32, 31, 30);">
<br>
</p>
<div style="background-color: rgb(255, 255, 255); margin: 0px;">
<p style="text-align: left; margin: 0px; font-family: Calibri, sans-serif; font-size: 11pt;">
<span style="color: rgb(32, 31, 30);"><img alt="Title: SBCTC logo - Description: Compass" width="60" height="113" style="width: 60px; height: 113px; max-width: initial; margin-top: 0px; margin-bottom: 0px; float: left;" data-outlook-trace="F:1|T:1" src="cid:9bd8b41a-60b8-4ed6-8a9f-3331b8c5dedc"></span></p>
<p style="text-align: left; margin: 0px; font-family: Calibri, sans-serif; font-size: 11pt;">
<span style="font-family: "Franklin Gothic Book", sans-serif, serif, EmojiFont; font-size: 14pt; color: rgb(0, 32, 96);"><b>Monica M. Olsson (she/her/hers)</b></span></p>
<p style="text-align: left; margin: 0px; font-family: Calibri, sans-serif; font-size: 11pt;">
<span style="font-family: "Franklin Gothic Book", sans-serif, serif, EmojiFont; font-size: 12pt; color: rgb(0, 32, 96);">Policy Associate – Accessible IT Coordinator</span></p>
<p style="text-align: left; margin: 0px; font-family: Calibri, sans-serif; font-size: 11pt;">
<span style="font-family: "Franklin Gothic Book", sans-serif, serif, EmojiFont; font-size: 12pt; color: rgb(0, 32, 96);">Washington State Board for Community and Technical Colleges</span></p>
<p style="text-align: left; margin: 0px; font-family: Calibri, sans-serif; font-size: 11pt;">
<span style="font-family: "Franklin Gothic Book", sans-serif, serif, EmojiFont; font-size: 12pt; color: rgb(0, 32, 96); background-color: rgb(255, 255, 255);">•Email:
</span><span style="font-family: "Franklin Gothic Book", sans-serif, serif, EmojiFont; font-size: 12pt; color: rgb(5, 99, 193);"><b><a href="mailto:molsson@sbctc.edu" id="OWA37a41bcf-20ec-eb9b-58ae-bcf056e492cf" class="OWAAutoLink" style="margin: 0px;">molsson@sbctc.edu</a></b></span><span style="font-family: "Franklin Gothic Book", sans-serif, serif, EmojiFont; font-size: 12pt; color: rgb(0, 32, 96);"><b> </b>•
Phone: 360-704-3922</span></p>
</div>
<span style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);"><br>
</span>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<p style="text-align: left; background-color: rgb(255, 255, 255); margin: 0in; font-family: Calibri, sans-serif; font-size: 11pt; color: rgb(36, 36, 36);">
<span style="font-size: 12pt;"><b><i>The power of the Web is in its universality.</i></b></span><b><i><br>
</i></b><span style="font-size: 12pt;"><b><i>Access by everyone regardless of disability is an essential aspect.</i></b></span></p>
<p style="text-align: left; background-color: rgb(255, 255, 255); margin: 0in; font-family: Calibri, sans-serif; font-size: 11pt; color: rgb(36, 36, 36);">
Tim Berners-Lee, W3C Director and inventor of the World Wide Web</p>
<span style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);"><br>
</span>
<table id="pbpsiglinktable">
<tbody>
<tr>
<td><a href="https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature" id="OWA33bab051-7979-8db3-f15d-ed3d207e485d" class="OWAAutoLink" data-auth="NotApplicable"><img data-outlook-trace="F:1|T:1" src="cid:b14956ee-cc57-46c8-bdf6-aef5d55707ea"></a></td>
<td></td>
<td><span style="color: rgb(12, 100, 192);"><a href="https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature" id="OWAcc9ead4f-8479-4bbf-b5d9-5064c8c187c2" class="OWAAutoLink" data-auth="NotApplicable" style="color: rgb(12, 100, 192); text-decoration: none;">Book
time to meet with me</a></span></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="appendonsend"></div>
<div style="font-family: "Century Gothic", sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
<br>
</div>
<hr style="display: inline-block; width: 98%;">
<div id="divRplyFwdMsg" dir="ltr"><span style="font-family: Calibri, sans-serif; font-size: 11pt; color: rgb(0, 0, 0);"><b>From:</b> CATO <cato-bounces@lists.ctc.edu> on behalf of Meridith Hatch via CATO <cato@lists.ctc.edu><br>
<b>Sent:</b> Monday, August 26, 2024 10:47 AM<br>
<b>To:</b> cato@lists.ctc.edu <cato@lists.ctc.edu><br>
<b>Cc:</b> Meridith Hatch <mhatch@sbctc.edu><br>
<b>Subject:</b> [CATO] Accessible website tabs examples?</span>
<div> </div>
</div>
<div id="x_footer" style="background-color:white;width:100%;border:2px solid #c00000;padding:2pt;border-style:solid;border-color:#c00000;color:#c00000">
<center><b>[Sent from outside SBCTC]</b></center>
</div>
<div style="direction: ltr;"><br>
</div>
<div style="direction: ltr; font-family: "Franklin Gothic Book", "Avenir Next Condensed", sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
Howdy!</div>
<div style="direction: ltr; font-family: "Franklin Gothic Book", "Avenir Next Condensed", sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
Anyone know of any examples of website tabs that work right with screen readers, voice on mobile and with voice command navigation? Any examples? </div>
<div style="direction: ltr; font-family: "Franklin Gothic Book", "Avenir Next Condensed", sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="direction: ltr; font-family: "Franklin Gothic Book", "Avenir Next Condensed", sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
I like tabs, we paid for tabs from Modern Campus, but thus far their tabs fail to function correctly with assistive technology.</div>
<div style="direction: ltr; font-family: "Franklin Gothic Book", "Avenir Next Condensed", sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="direction: ltr; font-family: "Franklin Gothic Book", "Avenir Next Condensed", sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
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).</div>
<div style="direction: ltr; font-family: "Franklin Gothic Book", "Avenir Next Condensed", sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="direction: ltr; font-family: "Franklin Gothic Book", "Avenir Next Condensed", sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
Thanks in advance.</div>
<div style="direction: ltr; font-family: "Franklin Gothic Book", "Avenir Next Condensed", sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div id="x_Signature">
<h1 style="margin: 12pt 0in 0in; font-family: "Franklin Gothic Medium", sans-serif; font-size: 16pt; font-weight: normal; color: rgb(54, 95, 145);">
<span style="font-family: Aptos, sans-serif; font-size: 12pt;"><img alt="Title: SBCTC logo - Description: Compass" id="x_image_0" width="60" height="113" style="width: 60px; height: 113px; margin-top: 0px; margin-bottom: 0px; float: left;" data-outlook-trace="F:2|T:2" src="cid:2593c32a-13af-403a-9b6b-aab42065c377"></span></h1>
<p style="margin: 0in; font-family: Aptos, sans-serif; font-size: 12pt;"><span style="font-family: "Franklin Gothic Medium", sans-serif; color: rgb(0, 55, 100);"> Meridith Hatch, MBA</span></p>
<p style="margin: 0in; font-family: Aptos, sans-serif; font-size: 12pt;"><span style="font-family: "Franklin Gothic Medium", sans-serif; color: rgb(0, 55, 100);"> Website Administrator</span></p>
<p style="margin: 0in; font-family: Aptos, sans-serif; font-size: 12pt;"><span style="font-family: "Franklin Gothic Book", sans-serif; color: rgb(0, 55, 100);"> </span><span style="font-family: "Franklin Gothic Book", sans-serif; color: rgb(0, 36, 81);">Washington
State Board for Community and Technical Colleges</span></p>
<p style="margin: 0in; font-family: Aptos, sans-serif; font-size: 12pt;"><span style="font-family: "Franklin Gothic Book", sans-serif; color: rgb(0, 36, 81);"> <u><a href="mailto:mhatch@sbctc.edu" id="OWA16c5a298-cb19-eedf-710d-8becbfee59be" class="x_OWAAutoLink" style="color: rgb(0, 36, 81); margin-top: 0px; margin-bottom: 0px;">mhatch@sbctc.edu</a></u> •
o: 360-704-3951 • c: 253-397-7003</span></p>
<p style="margin: 0in; font-family: Aptos, sans-serif; font-size: 12pt;"><span style="font-family: "Franklin Gothic Book", sans-serif; color: rgb(0, 36, 81);"> <u><a href="https://www.sbctc.edu/" id="OWA5f0db714-9c15-8dd0-ea01-f65650038fe1" class="x_OWAAutoLink" data-auth="NotApplicable" style="color: rgb(0, 36, 81); margin-top: 0px; margin-bottom: 0px;">sbctc.edu</a></u> •
</span><span style="font-family: "Franklin Gothic Book", sans-serif; color: rgb(0, 36, 81); font-weight: 500;">𝕏</span><span style="font-family: "Franklin Gothic Book", sans-serif; color: rgb(0, 36, 81);">:
<u><a href="https://x.com/SBCTCWashington" id="OWA7f1193a1-bf7c-0fdf-45ff-8f2aaf1a7add" class="x_OWAAutoLink" title="https://x.com/SBCTCWashington" data-auth="NotApplicable" style="color: rgb(0, 36, 81); margin-top: 0px; margin-bottom: 0px;">@SBCTCWashington</a></u> •
Facebook: <u><a href="https://www.facebook.com/wasbctc/" id="OWA2d0c9716-94eb-68ab-6b53-52d5397c4e69" class="x_OWAAutoLink" data-auth="NotApplicable" style="color: rgb(0, 36, 81); margin-top: 0px; margin-bottom: 0px;">@WASBCTC</a></u></span></p>
<p style="margin: 0in; font-family: Aptos, sans-serif; font-size: 12pt;"><span style="font-family: "Franklin Gothic Book", sans-serif; color: rgb(0, 36, 81);"> <u><a href="https://form.asana.com/?k=ceLwZ_RiflYfoym6Hvy6rg&d=1202058492250252" id="OWAa32743b2-d75d-d2b9-1751-dc14d09eb7f1" class="x_OWAAutoLink" data-auth="NotApplicable" style="color: rgb(0, 36, 81); margin-top: 0px; margin-bottom: 0px;">Submit
a web work request ticket</a></u> </span></p>
</div>
</body>
</html>