<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Aptos;}
@font-face
{font-family:Cambria;
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:"Franklin Gothic Book";
panose-1:2 11 5 3 2 1 2 2 2 4;}
@font-face
{font-family:Georgia;
panose-1:2 4 5 2 5 4 5 2 3 3;}
@font-face
{font-family:"Franklin Gothic Medium";
panose-1:2 11 6 3 2 1 2 2 2 4;}
@font-face
{font-family:"Century Gothic";
panose-1:2 11 5 2 2 2 2 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
font-size:12.0pt;
font-family:"Aptos",sans-serif;}
h1
{mso-style-priority:9;
mso-style-link:"Heading 1 Char";
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:24.0pt;
font-family:"Aptos",sans-serif;
font-weight:bold;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
span.Heading1Char
{mso-style-name:"Heading 1 Char";
mso-style-priority:9;
mso-style-link:"Heading 1";
font-family:"Cambria",serif;
color:black;
font-weight:bold;}
span.EmailStyle22
{mso-style-type:personal-reply;
font-family:"Verdana",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;
mso-ligatures:none;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1027" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="blue" vlink="purple" style="word-wrap:break-word">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Trust me when I say, Monica, that I have sent them the
<a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/">
Example of Tabs</a> and other helpful input yet they just aren't getting it. <o:p>
</o:p></span></p>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif;mso-ligatures:standardcontextual"> <o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif;mso-ligatures:standardcontextual"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif;mso-ligatures:standardcontextual"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif;mso-ligatures:standardcontextual"><o:p> </o:p></span></p>
<p class="MsoNormal"><b><img border="0" width="540" height="4" style="width:5.625in;height:.0416in" id="Picture_x0020_5" src="cid:image001.gif@01DAF888.D3556280"><span style="mso-ligatures:standardcontextual"><o:p></o:p></span></b></p>
<p class="MsoNormal"><b><span style="mso-ligatures:standardcontextual">Please note my summer hours from June 16 - August 31</span></b><span style="mso-ligatures:standardcontextual">:
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:standardcontextual">8:00 a.m. to 5:30 p.m., Monday through Thursday and 8:00 a.m. to noon on Friday. <b><o:p></o:p></b></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><img border="0" width="540" height="4" style="width:5.625in;height:.0416in" id="Picture_x0020_6" src="cid:image001.gif@01DAF888.D3556280"><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter" />
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0" />
<v:f eqn="sum @0 1 0" />
<v:f eqn="sum 0 0 @1" />
<v:f eqn="prod @2 1 2" />
<v:f eqn="prod @3 21600 pixelWidth" />
<v:f eqn="prod @3 21600 pixelHeight" />
<v:f eqn="sum @0 0 1" />
<v:f eqn="prod @6 1 2" />
<v:f eqn="prod @7 21600 pixelWidth" />
<v:f eqn="sum @8 21600 0" />
<v:f eqn="prod @7 21600 pixelHeight" />
<v:f eqn="sum @10 21600 0" />
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" />
<o:lock v:ext="edit" aspectratio="t" />
</v:shapetype><v:shape id="Picture_x0020_5" o:spid="_x0000_s1026" type="#_x0000_t75" alt="Title: SBCTC logo - Description: Compass " style='position:absolute;margin-left:0;margin-top:7.25pt;width:45.1pt;height:84.5pt;z-index:251659264;visibility:visible;mso-wrap-style:square;mso-width-percent:0;mso-height-percent:0;mso-wrap-distance-left:9pt;mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:0;mso-position-horizontal:left;mso-position-horizontal-relative:text;mso-position-vertical:absolute;mso-position-vertical-relative:text;mso-width-percent:0;mso-height-percent:0;mso-width-relative:page;mso-height-relative:page'>
<v:imagedata src="cid:image002.png@01DAF888.D3556280" o:title=" Compass " />
<w:wrap type="square"/>
</v:shape><![endif]--><![if !vml]><img width="60" height="113" style="width:.625in;height:1.177in" src="cid:image008.png@01DAF888.D35D78D0" align="left" hspace="12" alt="Title: SBCTC logo - Description: Compass " v:shapes="Picture_x0020_5"><![endif]><b><span style="font-size:14.0pt;font-family:"Franklin Gothic Book",sans-serif;color:#003764;mso-ligatures:standardcontextual">Vicki
Walton<o:p></o:p></span></b></p>
<p class="MsoNormal" style="line-height:10.55pt"><span style="font-size:10.0pt;font-family:"Franklin Gothic Book",sans-serif;color:#003764;mso-ligatures:standardcontextual">Pronouns: they/them<o:p></o:p></span></p>
<p class="MsoNormal" style="mso-line-height-alt:10.55pt;text-autospace:none"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#003764;mso-ligatures:standardcontextual">Web Accessibility Specialist/IT Quality Assurance Tester<o:p></o:p></span></p>
<p class="MsoNormal" style="mso-line-height-alt:10.55pt;text-autospace:none"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#003764;mso-ligatures:standardcontextual">Washington State Board for Community and Technical Colleges</span><span style="font-size:11.0pt;font-family:"Franklin Gothic Book",sans-serif;color:#003764;mso-ligatures:standardcontextual"><o:p></o:p></span></p>
<p class="MsoNormal"><u><span style="font-family:"Franklin Gothic Book",sans-serif;color:#003764;mso-ligatures:standardcontextual">vwalton@sbctc.edu</span></u><span style="font-family:"Franklin Gothic Book",sans-serif;color:#003764;mso-ligatures:standardcontextual">•
office: 360-704-4343• </span><span lang="ES-MX" style="font-family:"Franklin Gothic Book",sans-serif;color:#003764;mso-ligatures:standardcontextual">website:
<u><a href="https://www.sbctc.edu/default.aspx"><span style="color:#0563C1">www.sbctc.edu</span></a><o:p></o:p></u></span></p>
<p class="MsoNormal" style="margin-left:.9pt"><b><span style="font-family:"Georgia",serif;mso-ligatures:standardcontextual">Accessibility is a fundamental right<o:p></o:p></span></b></p>
<p class="MsoNormal"><span style="mso-ligatures:standardcontextual"><o:p> </o:p></span></p>
<p class="MsoNormal"><img border="0" width="600" height="5" style="width:6.25in;height:.052in" id="Picture_x0020_3" src="cid:image004.gif@01DAF888.D3556280"><span style="mso-ligatures:standardcontextual"><o:p></o:p></span></p>
<p class="MsoNormal"><b><span style="font-size:14.0pt;mso-ligatures:standardcontextual">Accessibility is not a checkbox. Accessibility is a mindset that can lead to a very powerful sense of inclusion.</span></b><span style="mso-ligatures:standardcontextual">
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:standardcontextual">~ Maayan Ziv founder and CEO AccessNow<o:p></o:p></span></p>
</div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">From:</span></b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"> CATO <cato-bounces@lists.ctc.edu>
<b>On Behalf Of </b>Monica Olsson via CATO<br>
<b>Sent:</b> Tuesday, August 27, 2024 1:40 PM<br>
<b>To:</b> cato@lists.ctc.edu<br>
<b>Cc:</b> Monica Olsson <molsson@sbctc.edu><br>
<b>Subject:</b> Re: [CATO] Accessible website tabs examples?<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div style="border:solid #C00000 1.5pt;padding:2.0pt 2.0pt 2.0pt 2.0pt" id="footer">
<p class="MsoNormal" align="center" style="text-align:center;background:white"><b><span style="color:#C00000">[Sent from outside SBCTC]
</span></b><span style="color:#C00000"><o:p></o:p></span></p>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Century Gothic",sans-serif;color:black">Hi Meridith,<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Century Gothic",sans-serif;color:black"><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Century Gothic",sans-serif;color:black">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.<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Century Gothic",sans-serif;color:black"><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Century Gothic",sans-serif;color:black">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/" title="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/">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.<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Century Gothic",sans-serif;color:black"><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Century Gothic",sans-serif;color:black">Also, a big thank you to Vicki for sharing your research with us!<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Century Gothic",sans-serif;color:black">Monica<o:p></o:p></span></p>
</div>
<div id="Signature">
<p style="background:white"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#201F1E"><o:p> </o:p></span></p>
<div>
<p style="background:white"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#201F1E"><img border="0" width="60" height="113" style="width:.625in;height:1.177in" id="Picture_x0020_1" src="cid:image005.png@01DAF888.D3556280" alt="Title: SBCTC logo - Description: Compass"></span><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"><o:p></o:p></span></p>
<p style="background:white"><b><span style="font-size:14.0pt;font-family:"Franklin Gothic Book",sans-serif;color:#002060">Monica M. Olsson (she/her/hers)</span></b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"><o:p></o:p></span></p>
<p style="background:white"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002060">Policy Associate – Accessible IT Coordinator</span><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"><o:p></o:p></span></p>
<p style="background:white"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002060">Washington State Board for Community and Technical Colleges</span><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"><o:p></o:p></span></p>
<p style="background:white"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002060;background:white">•Email:
</span><b><span style="font-family:"Franklin Gothic Book",sans-serif;color:#0563C1"><a href="mailto:molsson@sbctc.edu">molsson@sbctc.edu</a></span></b><b><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002060"> </span></b><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002060">•
Phone: 360-704-3922</span><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"><o:p></o:p></span></p>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<p class="MsoNormal"><span style="font-family:"Calibri",sans-serif;color:black"><o:p> </o:p></span></p>
</div>
<p style="background:white"><b><i><span style="font-family:"Calibri",sans-serif;color:#242424">The power of the Web is in its universality.</span></i></b><b><i><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#242424"><br>
</span></i></b><b><i><span style="font-family:"Calibri",sans-serif;color:#242424">Access by everyone regardless of disability is an essential aspect.</span></i></b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#242424"><o:p></o:p></span></p>
<p style="background:white"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#242424">Tim Berners-Lee, W3C Director and inventor of the World Wide Web<o:p></o:p></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
<table class="MsoNormalTable" border="0" cellpadding="0" id="pbpsiglinktable">
<tbody>
<tr>
<td style="padding:.75pt .75pt .75pt .75pt">
<p class="MsoNormal"><a href="https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature"><span style="text-decoration:none"><img border="0" width="20" height="20" style="width:.2083in;height:.2083in" id="Picture_x0020_2" src="cid:image006.png@01DAF888.D3556280"></span></a><o:p></o:p></p>
</td>
<td style="padding:.75pt .75pt .75pt .75pt"></td>
<td style="padding:.75pt .75pt .75pt .75pt">
<p class="MsoNormal"><span style="color:#0C64C0"><a href="https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature"><span style="color:#0C64C0;text-decoration:none">Book time to meet with me</span></a></span><o:p></o:p></p>
</td>
<td style="padding:.75pt .75pt .75pt .75pt"></td>
</tr>
</tbody>
</table>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Century Gothic",sans-serif;color:black"><o:p> </o:p></span></p>
</div>
<div class="MsoNormal" align="center" style="text-align:center">
<hr size="2" width="98%" align="center">
</div>
<div id="divRplyFwdMsg">
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:black">From:</span></b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:black"> CATO <<a href="mailto:cato-bounces@lists.ctc.edu">cato-bounces@lists.ctc.edu</a>>
on behalf of Meridith Hatch via CATO <<a href="mailto:cato@lists.ctc.edu">cato@lists.ctc.edu</a>><br>
<b>Sent:</b> Monday, August 26, 2024 10:47 AM<br>
<b>To:</b> <a href="mailto:cato@lists.ctc.edu">cato@lists.ctc.edu</a> <<a href="mailto:cato@lists.ctc.edu">cato@lists.ctc.edu</a>><br>
<b>Cc:</b> Meridith Hatch <<a href="mailto:mhatch@sbctc.edu">mhatch@sbctc.edu</a>><br>
<b>Subject:</b> [CATO] Accessible website tabs examples?</span> <o:p></o:p></p>
<div>
<p class="MsoNormal"> <o:p></o:p></p>
</div>
</div>
<div style="border:solid #C00000 1.5pt;padding:2.0pt 2.0pt 2.0pt 2.0pt" id="x_footer">
<p class="MsoNormal" align="center" style="text-align:center;background:white"><b><span style="color:#C00000">[Sent from outside SBCTC]</span></b><span style="color:#C00000"><o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Franklin Gothic Book",sans-serif;color:black">Howdy!<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Franklin Gothic Book",sans-serif;color:black">Anyone know of any examples of website tabs that work right with screen readers, voice on mobile and with voice command navigation? Any examples? <o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Franklin Gothic Book",sans-serif;color:black"><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Franklin Gothic Book",sans-serif;color:black">I like tabs, we paid for tabs from Modern Campus, but thus far their tabs fail to function correctly with assistive technology.<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Franklin Gothic Book",sans-serif;color:black"><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Franklin Gothic Book",sans-serif;color:black">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).<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Franklin Gothic Book",sans-serif;color:black"><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Franklin Gothic Book",sans-serif;color:black">Thanks in advance.<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Franklin Gothic Book",sans-serif;color:black"><o:p> </o:p></span></p>
</div>
<div id="x_Signature">
<h1 style="mso-margin-top-alt:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in">
<span style="font-size:12.0pt;color:#365F91;font-weight:normal"><img border="0" width="60" height="113" style="width:.625in;height:1.177in" id="x_image_0" src="cid:image007.png@01DAF888.D3556280" alt="Title: SBCTC logo - Description: Compass"></span><span style="font-size:16.0pt;font-family:"Franklin Gothic Medium",sans-serif;color:#365F91;font-weight:normal"><o:p></o:p></span></h1>
<p><span style="font-family:"Franklin Gothic Medium",sans-serif;color:#003764"> Meridith Hatch, MBA</span><o:p></o:p></p>
<p><span style="font-family:"Franklin Gothic Medium",sans-serif;color:#003764"> Website Administrator</span><o:p></o:p></p>
<p><span style="font-family:"Franklin Gothic Book",sans-serif;color:#003764"> </span><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451">Washington State Board for Community and Technical Colleges</span><o:p></o:p></p>
<p><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451"> <u><a href="mailto:mhatch@sbctc.edu"><span style="color:#002451">mhatch@sbctc.edu</span></a></u> • o: 360-704-3951 • c: 253-397-7003</span><o:p></o:p></p>
<p><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451"> <u><a href="https://www.sbctc.edu/"><span style="color:#002451">sbctc.edu</span></a></u> •
</span><span style="font-family:"Cambria Math",serif;color:#002451">𝕏</span><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451">:
<u><a href="https://x.com/SBCTCWashington" title="https://x.com/SBCTCWashington"><span style="color:#002451">@SBCTCWashington</span></a></u> • Facebook:
<u><a href="https://www.facebook.com/wasbctc/"><span style="color:#002451">@WASBCTC</span></a></u></span><o:p></o:p></p>
<p><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451"> <u><a href="https://form.asana.com/?k=ceLwZ_RiflYfoym6Hvy6rg&d=1202058492250252"><span style="color:#002451">Submit a web work request ticket</span></a></u> </span><o:p></o:p></p>
</div>
</div>
</div>
</body>
</html>