<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=us-ascii">
<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:"Franklin Gothic Book";
panose-1:2 11 5 3 2 1 2 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ligatures:standardcontextual;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri",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="#0563C1" vlink="#954F72" style="word-wrap:break-word">
<div class="WordSection1">
<p class="MsoNormal">Vicki,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">What is the intent of the blank rectangle in the dropdown menu? Would someone pick one of the 34 colleges in our system or the grey box to indicate something else?<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<p class="MsoNormal"><span style="mso-ligatures:none">Doug Hayman<o:p></o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:none">IT Accessibility Coordinator<o:p></o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:none">Information Technology<o:p></o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:none">Olympic College<o:p></o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:none"><a href="mailto:dhayman@olympic.edu"><span style="color:#0563C1">dhayman@olympic.edu</span></a><o:p></o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:none">(360) 475-7632 <o:p></o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:none"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:none"><o:p> </o:p></span></p>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal"><b><span style="mso-ligatures:none">From:</span></b><span style="mso-ligatures:none"> athen-list <athen-list-bounces@mailman12.u.washington.edu>
<b>On Behalf Of </b>Vicki Walton<br>
<b>Sent:</b> Thursday, November 2, 2023 3:38 PM<br>
<b>To:</b> athen-list@u.washington.edu<br>
<b>Subject:</b> [EXTERNAL] - [Athen] Drop down menu/ Flyout menu advice needed<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div style="border:solid #030303 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt">
<p class="MsoNormal" style="mso-line-height-alt:10.0pt;background:#FFCC66"><span style="font-size:12.0pt;font-family:"Arial",sans-serif;color:black;mso-ligatures:none">CAUTION: This email came from a non-OC system or external source. Beware of phishing and
social engineering!<o:p></o:p></span></p>
</div>
<p class="MsoNormal"><span style="mso-ligatures:none"><o:p> </o:p></span></p>
<div>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif">I have been asked a question that I am not sure how to answer. I am looking for advice. Thank you in advance.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif">Just a bit about me. I am a functional accessibility tester. I am not a developer.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif">Question:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif">In the screenshot I included, because Bates Technical College is first alphabetically, it shows as the immediate option at the top of the list. It also has the gray engaged shading and dashed
box around it. The enhancement request asks for a blank space at the beginning of the dropdown instead. So the drop-down would change from the current behavior to look something like this after:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif;mso-ligatures:none"><img border="0" width="555" height="203" style="width:5.7833in;height:2.1166in" id="Picture_x0020_8" src="cid:image001.png@01DA0DA3.2411D630" alt="Image displaying the current institution dropdown menu on the left with Bates Technical College first, and an updated dropdown on the right with a blank space firs. "></span><span style="font-family:"Verdana",sans-serif"><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif">Our concern was that having a blank space at the top of the list may not be the best option for accessibility, even if the dropdown was functioning as expected for screen readers. With this
in mind, would it be recommended to have the top of the list read “Select a value” or something similar instead of blank?<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-family:"Verdana",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="mso-ligatures:none"><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:image006.png@01DA0DA3.240A8330" o:title=" Compass " />
<w:wrap type="square"/>
</v:shape><![endif]--><![if !vml]><img width="60" height="113" style="width:.625in;height:1.175in" src="cid:image002.png@01DA0DA3.2411D630" 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">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">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-size:12.0pt;font-family:"Franklin Gothic Book",sans-serif;color:#003764">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">Washington State Board for Community and Technical Colleges<o:p></o:p></span></p>
<p class="MsoNormal"><u><span style="font-family:"Franklin Gothic Book",sans-serif;color:#003764"><a href="mailto:vwalton@sbctc.edu•">vwalton@sbctc.edu•</a></span></u><span style="font-family:"Franklin Gothic Book",sans-serif;color:#003764"> office: 360-704-4343•
</span><span lang="ES-MX" style="font-family:"Franklin Gothic Book",sans-serif;color:#003764">website:
<u><a href="https://www.sbctc.edu/default.aspx">www.sbctc.edu</a><o:p></o:p></u></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><span style="mso-ligatures:none"><img border="0" width="433" height="3" style="width:4.5083in;height:.0333in" id="Picture_x0020_1" src="cid:image008.gif@01DA0DA3.240A8330"></span><o:p></o:p></p>
<p class="MsoNormal"><b><span style="font-size:14.0pt">Digital Equity: Push for Universal Design. Build more of that in</span></b><span style="font-family:"Verdana",sans-serif">. ~ Paul Grossman<o:p></o:p></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</div>
</body>
</html>