<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">
<style type="text/css" style="display:none;"> P {margin-top:0;margin-bottom:0;} </style>
</head>
<body dir="ltr">
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 14pt; color: rgb(0, 0, 0);" class="elementToProof">
<span class="x_elementToProof" style="font-size:14pt;margin:0px;background-color:rgb(255, 255, 255)">Hello all,</span></div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 14pt; color: rgb(0, 0, 0);" class="elementToProof">
<div class="x_elementToProof" style="font-size:14pt;margin:0px;background-color:rgb(255, 255, 255)">
<br>
</div>
<div class="x_elementToProof" style="font-size:14pt;margin:0px;background-color:rgb(255, 255, 255)">
I am working with a Web and Communications team at one of the schools in my state. They have asked me for best practices and examples of accessibly designed employee directories that are public facing on a college website.</div>
<div class="x_elementToProof" style="font-size:14pt;margin:0px;background-color:rgb(255, 255, 255)">
<br>
</div>
<div class="x_elementToProof" style="font-size:14pt;margin:0px;background-color:rgb(255, 255, 255)">
<b>Can you point me towards good examples that you are aware of, code snippets, or any other educational resources?</b></div>
<div class="x_elementToProof" style="font-size:14pt;margin:0px;background-color:rgb(255, 255, 255)">
<br>
</div>
<div class="x_elementToProof" style="font-size:14pt;margin:0px;background-color:rgb(255, 255, 255)">
I'm aware that employee directories are different that static web pages and present additional accessibility items for us to consider, though since I am not a developer myself, I would appreciate any help this group can offer me! Things I understand that a
dev team needs to consider include:</div>
<div class="x_elementToProof" style="font-size:14pt;margin:0px;background-color:rgb(255, 255, 255)">
<ul>
<li>Directories pull from a back-end database that is constantly changing and being updated.</li><li>Public-facing directors likely require additional security.</li><li>The search bar/button functionality is critical and must be labeled correctly for accessibility.</li><li>If developed by an in-house team, developers may only have access to limited libraries and frameworks</li><li>The results page layout is critical for usability and may not function as a traditional results page, I think?<span> </span><b>What is the most accessible and usable way to develop and design a results page for an employee directory?</b></li></ul>
</div>
<div style="font-size:15px;font-family:"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;margin:0px;color:rgb(32, 31, 30);background-color:rgb(255, 255, 255)">
<span class="x_elementToProof" style="font-size:14pt;font-family:Calibri, Helvetica, sans-serif;margin:0px;color:rgb(0, 0, 0)">Thank you!</span></div>
</div>
<div>
<div id="Signature">
<div>
<div style="font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)">
</div>
<div style="font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)">
<p style="color:rgb(32,31,30); text-align:start; background-color:rgb(255,255,255); font-size:11pt; font-family:Calibri,sans-serif; margin:0px">
</p>
<div style="margin:0px; font-size:15px; color:rgb(32,31,30); text-align:start; background-color:rgb(255,255,255)">
<p style="font-size:11pt; font-family:Calibri,sans-serif; margin:0px"><img align="left" alt="Title: SBCTC logo - Description: Compass" style="width: 60px; height: 113px; max-width: initial;" width="60" height="113" data-outlook-trace="F:1|T:1" src="cid:f2f80efa-aeca-4154-8dc5-329b269a5c97"></p>
<p style="font-size:11pt; font-family:Calibri,sans-serif; margin:0px"><b><span style="margin: 0px; font-size: 14pt; font-family: "Franklin Gothic Book", sans-serif, serif, EmojiFont; color: rgb(0, 32, 96);">Monica M. Olsson (she/her/hers)</span></b></p>
<p style="font-size:11pt; font-family:Calibri,sans-serif; margin:0px"><span style="margin:0px; font-size:12pt; font-family:"Franklin Gothic Book",sans-serif,serif,EmojiFont; color:rgb(0,32,96)">Policy Associate – Accessible IT Coordinator</span></p>
<p style="font-size:11pt; font-family:Calibri,sans-serif; margin:0px"><span style="margin:0px; font-size:12pt; font-family:"Franklin Gothic Book",sans-serif,serif,EmojiFont; color:rgb(0,32,96)">Washington State Board for Community and Technical Colleges</span></p>
<p style="font-size:11pt; font-family:Calibri,sans-serif; margin:0px"><u><span style="margin:0px; font-size:12pt; font-family:"Franklin Gothic Book",sans-serif,serif,EmojiFont; color:rgb(5,99,193)"><a href="mailto:molsson@sbctc.edu" target="_blank" rel="noopener noreferrer" style="margin:0px"><span style="margin:0px"><b>molsson@sbctc.edu</b></span></a></span></u><span style="margin:0px; font-size:12pt; font-family:"Franklin Gothic Book",sans-serif,serif,EmojiFont; color:rgb(0,32,96)"><span><b> </b></span>•
o: 360-704-3922 • c: 206-914-7187</span></p>
<p style="font-size:11pt; font-family:Calibri,sans-serif; margin:0px"><span style="margin:0px; font-size:12pt; font-family:"Franklin Gothic Book",sans-serif,serif,EmojiFont; color:rgb(0,32,96)"><a href="https://www.sbctc.edu/" target="_blank" rel="noopener noreferrer" style="margin:0px">sbctc.edu</a><span> </span>•
Twitter:<span> </span><a href="https://twitter.com/SBCTCWashington" target="_blank" rel="noopener noreferrer" style="margin:0px"><b>@SBCTCWashington</b></a><span> </span>• Facebook:<b><span> </span><a href="https://www.facebook.com/wasbctc/" target="_blank" rel="noopener noreferrer" style="margin:0px">@WASBCTC</a></b></span></p>
</div>
<br>
</div>
</div>
</div>
</div>
</body>
</html>