<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:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@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;}
/* 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;}
h2
{mso-style-priority:9;
mso-style-link:"Heading 2 Char";
margin-top:2.0pt;
margin-right:0in;
margin-bottom:0in;
margin-left:0in;
page-break-after:avoid;
font-size:13.0pt;
font-family:"Cambria",serif;
color:black;
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.Heading2Char
{mso-style-name:"Heading 2 Char";
mso-style-priority:9;
mso-style-link:"Heading 2";
font-family:"Cambria",serif;
color:black;
font-weight:bold;}
span.EmailStyle23
{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;}
/* List Definitions */
@list l0
{mso-list-id:1620918948;
mso-list-type:hybrid;
mso-list-template-ids:-1175176262 67698703 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l0:level1
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1
{mso-list-id:1623458454;
mso-list-template-ids:-504040574;}
@list l1:level1
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:"Courier New";
mso-bidi-font-family:"Times New Roman";}
@list l1:level3
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:1.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l1:level4
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l1:level5
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l1:level6
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:3.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l1:level7
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l1:level8
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l1:level9
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:4.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l2
{mso-list-id:1981302761;
mso-list-template-ids:-662529848;}
@list l2:level1
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level2
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level3
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:1.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level4
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level5
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level6
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:3.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level7
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level8
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level9
{mso-level-number-format:bullet;
mso-level-text:;
mso-level-tab-stop:4.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l3
{mso-list-id:2123650810;
mso-list-template-ids:291260670;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1028" />
</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">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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!!!!<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><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"><b><img width="540" height="4" style="width:5.625in;height:.0416in" id="Picture_x0020_6" src="cid:image001.gif@01DAF943.E36BF880"><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 width="540" height="4" style="width:5.625in;height:.0416in" id="Picture_x0020_7" src="cid:image001.gif@01DAF943.E36BF880"><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="_x0000_s1027" 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:251661312;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@01DAF943.E36BF880" 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:image005.png@01DAF943.E375BC80" align="left" hspace="12" alt="Title: SBCTC logo - Description: Compass " v:shapes="_x0000_s1027"><![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_9" src="cid:image004.gif@01DAF943.E36BF880"><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>Vicki Walton via CATO<br>
<b>Sent:</b> Tuesday, August 27, 2024 12:31 PM<br>
<b>To:</b> Distribution List for the Committee for Accessible Technology Oversight <cato@lists.ctc.edu><br>
<b>Cc:</b> Vicki Walton <vwalton@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>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Hello CATO,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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.
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Recording of my experience with a screen reader of the Modern Campus tabs:
<b><a href="https://drive.google.com/file/d/1PAnDgyswulYdkfDXW8ZM2L3QHsB6Ck9j/view">Tab Navigation Retest on August 27</a>
<o:p></o:p></b></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<h2>Start of links I have been researching:<o:p></o:p></h2>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><a href="https://accessuse.eu/en/tabbed-interfaces.html#:~:text=The%20screen%20reader%20then%20announces,to%20focus%20the%20next%20tab."><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Tabbed interfaces</span></b></a><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p></o:p></span></b></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">This one is a good read<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><a href="https://inclusive-components.design/tabbed-interfaces/"><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Keyboard behavior on Tabs and Tab Panels</span></b></a><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p></o:p></span></b></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Google Chrome AI Overview</span></b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Screen readers can navigate tabs and tab panels on webpages using a combination of arrow keys, the tab key, and other keyboard shortcuts:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"> <o:p></o:p></span></p>
<ul style="margin-top:0in" type="disc">
<li class="MsoNormal" style="mso-list:l1 level1 lfo3"><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Tab key</span></b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">: 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. <o:p></o:p></span></li><li class="MsoNormal" style="mso-list:l1 level1 lfo3"><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Arrow keys</span></b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">: 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. <o:p></o:p></span></li><li class="MsoNormal" style="mso-list:l1 level1 lfo3"><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Enter</span></b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">: Selects an item. <o:p></o:p></span></li></ul>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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. <o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><a href="https://stackoverflow.com/questions/38309795/navigating-tabs-in-a-web-page-using-jaws-screen-reader"><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Navigating Tabs in a Web Page Using JAWS Screen Reader</span></b></a><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p></o:p></span></b></p>
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></b></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Q:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">A:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Within tabs, users will expect to use left/right arrow to navigate between tabs.<o:p></o:p></span></p>
<ol style="margin-top:0in" start="1" type="1">
<li class="MsoNormal" style="mso-list:l0 level1 lfo6"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">User press tab key to focus to the tab strip; the first tab item gets focus.<o:p></o:p></span></li><li class="MsoNormal" style="mso-list:l0 level1 lfo6"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Then will use left/right arrow to jump between tabs.<o:p></o:p></span></li><li class="MsoNormal" style="mso-list:l0 level1 lfo6"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Pressing tab key again, will move the focus out of the tab strip to the next focusable element<o:p></o:p></span></li></ol>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><a href="https://accessuse.eu/en/tabbed-interfaces.html#:~:text=The%20screen%20reader%20then%20announces,to%20focus%20the%20next%20tab."><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">Screen reader users and tab panels</span></b></a><b><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p></o:p></span></b></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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).<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Verdana",sans-serif;mso-ligatures:standardcontextual">End of links.<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">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.<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@01DAF943.E36BF880"><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_2" src="cid:image001.gif@01DAF943.E36BF880"></span><span style="font-size:11.0pt"><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: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@01DAF943.E36BF880" 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:image006.png@01DAF943.E375BC80" 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"><a href="mailto:vwalton@sbctc.edu•">vwalton@sbctc.edu•</a></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:
</span><a href="https://www.sbctc.edu/default.aspx"><span lang="ES-MX" style="font-family:"Franklin Gothic Book",sans-serif;color:#0563C1;mso-ligatures:standardcontextual">www.sbctc.edu</span></a><u><span lang="ES-MX" style="font-family:"Franklin Gothic Book",sans-serif;color:#003764;mso-ligatures:standardcontextual"><o:p></o:p></span></u></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@01DAF943.E36BF880"><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 <<a href="mailto:cato-bounces@lists.ctc.edu">cato-bounces@lists.ctc.edu</a>>
<b>On Behalf Of </b>Meridith Hatch via CATO<br>
<b>Sent:</b> Monday, August 26, 2024 10:48 AM<br>
<b>To:</b> <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?<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-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="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="image_0" src="cid:image008.png@01DAF943.E36BF880" 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"> </span><a href="mailto:mhatch@sbctc.edu"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451">mhatch@sbctc.edu</span></a><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451"> •
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"> </span><a href="https://www.sbctc.edu/"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451">sbctc.edu</span></a><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451"> •
</span><span style="font-family:"Cambria Math",serif;color:#002451">𝕏</span><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451">:
</span><a href="https://x.com/SBCTCWashington" title="https://x.com/SBCTCWashington"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451">@SBCTCWashington</span></a><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451"> •
Facebook: </span><a href="https://www.facebook.com/wasbctc/"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451">@WASBCTC</span></a><o:p></o:p></p>
<p><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451"> </span><a href="https://form.asana.com/?k=ceLwZ_RiflYfoym6Hvy6rg&d=1202058492250252"><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451">Submit a web work request
ticket</span></a><span style="font-family:"Franklin Gothic Book",sans-serif;color:#002451"> </span><o:p></o:p></p>
</div>
</div>
</div>
</div>
</body>
</html>