<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: 11pt; color: rgb(0, 0, 0);" class="elementToProof">
<span class="x_elementToProof ContentPasted2" style="font-size: 12pt; margin: 0px; background-color: rgb(255, 255, 255);">Hi Amy,</span>
<div class="x_elementToProof" style="font-size: 11pt; margin: 0px; background-color: rgb(255, 255, 255);">
<br class="ContentPasted2">
</div>
<div class="x_elementToProof" style="font-size: 11pt; margin: 0px; background-color: rgb(255, 255, 255);">
<span style="font-size: 12pt;">I don't know if others have responded to you or not. My thoughts are below...</span></div>
<div class="x_elementToProof ContentPasted2" style="font-size: 11pt; margin: 0px; background-color: rgb(255, 255, 255);">
<br>
</div>
<div class="x_elementToProof ContentPasted2" style="font-size: 11pt; margin: 0px; background-color: rgb(255, 255, 255);">
<span style="font-size: 12pt;">While I think it is worth considering if the use of red text is good practice or not, I don't think a technical WCAG violation has occurred. I'll explain my thoughts below, and hope that other CATO folks can weigh in too.</span></div>
<div class="x_elementToProof" style="font-size: 11pt; margin: 0px; background-color: rgb(255, 255, 255);">
<br class="ContentPasted2">
</div>
<div class="x_elementToProof ContentPasted2" style="font-size: 11pt; margin: 0px; background-color: rgb(255, 255, 255);">
<span style="font-size: 12pt;">The red text is real text on an HTML web page with a bulleted list accompanying. So, the words of the text will convey the alert's meaning when a user hears the text read aloud by a screen reader. The message is not
<i>solely relying on the color red</i></span><i><span class="ContentPasted2"><span class="ContentPasted2" style="font-size: 12pt;"> </span></span><span style="font-size: 12pt;"><span class="ContentPasted2">alone to convey its meaning</span></span></i><span style="font-size: 12pt;">,
like say, a red graphic of an "X" with no associated text or label alongside a green graphic "check mark" also with no associated text or label.</span></div>
<div class="x_elementToProof" style="font-size: 11pt; margin: 0px; background-color: rgb(255, 255, 255);">
<br class="ContentPasted2">
</div>
<div class="x_elementToProof ContentPasted2" style="font-size: 11pt; margin: 0px; background-color: rgb(255, 255, 255);">
<span style="font-size: 12pt;">The red text against the white background also does appear to meet minimum contrast requirements.</span></div>
<div class="x_elementToProof" style="font-size: 11pt; margin: 0px; background-color: rgb(255, 255, 255);">
<br class="ContentPasted2">
</div>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 11pt; color: rgb(0, 0, 0);" class="elementToProof">
<span class="x_elementToProof ContentPasted2" style="font-size: 12pt; margin: 0px; background-color: rgb(255, 255, 255);">So, while I don't think a technical WCAG violation has occurred, I do think it's worth asking if this meets accessibility best practices,
in my humble opinion.</span></div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 11pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 11pt; color: rgb(0, 0, 0);" class="elementToProof">
<span style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 12pt; display: inline !important; color: rgb(36, 36, 36); background-color: rgb(255, 255, 255);" class="ContentPasted1">Perhaps
there needs to be a section heading at the top of the announcement that says something like,
</span><span style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 12pt; display: inline !important; color: rgb(36, 36, 36); background-color: rgb(255, 255, 255);" class="ContentPasted1"><b>"ctcLink
Alert Message" </b></span><span style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 12pt; display: inline !important; color: rgb(36, 36, 36); background-color: rgb(255, 255, 255);" class="ContentPasted1">which
I could request.</span><br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 11pt; color: rgb(0, 0, 0);" class="elementToProof">
<span style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 15px; display: inline !important; color: rgb(36, 36, 36); background-color: rgb(255, 255, 255);" class="ContentPasted1"><br>
</span></div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 11pt; color: rgb(0, 0, 0);" class="elementToProof">
<span style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 12pt; display: inline !important; color: rgb(36, 36, 36); background-color: rgb(255, 255, 255);" class="ContentPasted1">Hoping
that others chime in.</span></div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 11pt; color: rgb(0, 0, 0);" class="elementToProof">
<span style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 12pt; display: inline !important; color: rgb(36, 36, 36); background-color: rgb(255, 255, 255);" class="ContentPasted1">~Monica</span></div>
<div class="elementToProof">
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 11pt; color: rgb(0, 0, 0);">
<br>
</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="text-align: start; font-size: 11pt; font-family: Calibri, sans-serif; margin: 0px; color: rgb(32, 31, 30); background-color: rgb(255, 255, 255);">
<br>
</p>
<div style="margin: 0px; font-size: 15px; text-align: start; color: rgb(32, 31, 30); 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:7734bb99-dea2-4320-8c19-381de540b0d5"></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"><span style="margin: 0px; font-size: 12pt; font-family: "Franklin Gothic Book", sans-serif, serif, EmojiFont; color: rgb(5, 99, 193);"><span style="font-weight: 400; display: inline !important; color: rgb(0, 32, 96); background-color: rgb(255, 255, 255);">•Email: </span><a href="mailto:molsson@sbctc.edu" target="_blank" rel="noopener noreferrer" style="text-decoration-line: underline; margin: 0px;" data-loopstyle="link"><span style="margin:0px"><b>molsson@sbctc.edu</b></span></a></span><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>•
Phone: 360-704-3922</span><b style="font-family: "Franklin Gothic Book", sans-serif, serif, EmojiFont; font-size: 12pt; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; color: rgb(0, 32, 96);"></b></p>
</div>
<br>
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<p style="margin: 0in; font-size: 11pt; font-family: Calibri, sans-serif; text-align: start; color: rgb(36, 36, 36); background-color: rgb(255, 255, 255);">
<span style="font-size: 12pt;"><b><i class="ContentPasted0">The power of the Web is in its universality.</i></b></span><b><i class="ContentPasted0"><br class="ContentPasted0">
</i></b><span style="font-size: 12pt;"><b><i class="ContentPasted0">Access by everyone regardless of disability is an essential aspect.</i></b></span></p>
<p style="margin: 0in; font-size: 11pt; font-family: Calibri, sans-serif; text-align: start; color: rgb(36, 36, 36); background-color: rgb(255, 255, 255);">
<span style="font-size: 11pt; margin: 0px;" class="ContentPasted0">Tim Berners-Lee, W3C Director and inventor of the World Wide Web</span></p>
<br>
</div>
<table id="pbpsiglinktable">
<tbody>
<tr>
<td><a href="https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature"><img data-outlook-trace="F:1|T:1" src="cid:3041f087-2409-42fb-811a-db46d510f29b"></a></td>
<td></td>
<td><a href="https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature" style="text-decoration: none; color: rgb(0, 120, 212);" data-loopstyle="link"><span style="color: rgb(12, 100, 192);">Book time to meet
with me</span></a></td>
<td>
<table>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="appendonsend"></div>
<hr style="display:inline-block;width:98%" tabindex="-1">
<div id="divRplyFwdMsg" dir="ltr"><font face="Calibri, sans-serif" style="font-size:11pt" color="#000000"><b>From:</b> CATO <cato-bounces@lists.ctc.edu> on behalf of Rovner, Amy via CATO <cato@lists.ctc.edu><br>
<b>Sent:</b> Tuesday, May 2, 2023 3:39 PM<br>
<b>To:</b> Monica Olsson via CATO <cato@lists.ctc.edu><br>
<b>Cc:</b> Rovner, Amy <arovner@shoreline.edu><br>
<b>Subject:</b> [CATO] Red Text on ctcLink Homepage</font>
<div> </div>
</div>
<style>
<!--
@font-face
{font-family:"Cambria Math"}
@font-face
{font-family:Calibri}
@font-face
{font-family:"Calibri Light"}
p.x_MsoNormal, li.x_MsoNormal, div.x_MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Calibri",sans-serif}
span.x_EmailStyle17
{font-family:"Calibri",sans-serif;
color:windowtext}
.x_MsoChpDefault
{font-family:"Calibri",sans-serif}
@page WordSection1
{margin:1.0in 1.0in 1.0in 1.0in}
div.x_WordSection1
{}
-->
</style>
<div lang="EN-US" link="#0563C1" vlink="#954F72">
<div id="x_footer" style="background-color:white; width:100%; border:2px solid #c00000; padding:2pt; border-style:solid; border-color:#c00000; color:#c00000">
<b>
<center>[Sent from outside SBCTC] </b></center>
</div>
<br>
<div>
<div class="x_WordSection1">
<p class="x_MsoNormal">Hi All,</p>
<p class="x_MsoNormal"><br>
Per my request, one of our Business Analysts submitted a tix to Solar Winds re: the use of red text when they want to “alert” us to information that’s important on the ctcLink Gateway page.
</p>
<p class="x_MsoNormal"><span style="font-size:11.0pt"> </span></p>
<p class="x_MsoNormal"><span style="font-size:11.0pt"><img width="727" height="462" id="x_Picture_x0020_3" style="width:7.5729in; height:4.8125in" data-outlook-trace="F:1|T:1" src="cid:image001.png@01D97D0C.48491950"></span><span style="font-size:11.0pt"></span></p>
<p class="x_MsoNormal"><span style="font-size:11.0pt"><br>
</span>I was not happy with the response we received and am frustrated on a variety of levels. I thought perhaps CATO should chime in on this to help me with my reply. BUT also, perhaps we need to do some training/share info on reasons to make things accessible/usable
with the ctcLink PS Admins that are referred to in the response.</p>
<p class="x_MsoNormal"> </p>
<p class="x_MsoNormal">Here is the response from the SBCTC Support Rep (I removed their name).
</p>
<p class="x_MsoNormal"><span style="color:black; background:white"> </span></p>
<p class="x_MsoNormal" style="margin-left:.5in"><span style="color:black; background:white">Hi Douglas, </span><span style="color:black"><br>
<span style="background:white">Thanks for the ticket, we welcome all accessibility related conversations... I'm interested in learning what tools your colleague used to determine that the font color for the temporary outage messaging is inaccessible. According
to WAVE and ANDI, even at 9pt, the unbolded font (color:#bf2817) exceeds wcag AA standards of 4.5:1. at 5.94:1. Color is also not being used as the only means to convey a message (ie a required field on a form, and the only way you can tell it's required,
is the red color).</span><br>
<br>
<span style="background:white">As a former ux dev, I know that from a physiological perspective, the human eye finds dark blue, purple, greens more visible and easier to perceive, but from a cultural/philosophical perspective red conveys "Stop or Emergency",
which our PS Admins seem to be more in favor of in this scenario.</span><br>
<br>
<span style="background:white">Unfortunately, we cannot make a global change that effects every institution in the system without a violation or guideline to point to. If you have best practices or validation evidence that says otherwise, please attach, and
I can work with the admins that maintains the messaging to reevaluate the request.</span><br>
<br>
</span><span style="font-size:11.0pt"></span></p>
<p class="x_MsoNormal"><span style="font-size:11.0pt"> </span></p>
<p class="x_MsoNormal"><span style="font-size:11.0pt">Welcome your feedback,</span></p>
<p class="x_MsoNormal"><span style="font-size:11.0pt">Amy</span></p>
<p class="x_MsoNormal" style=""><b><span style="font-size:11.0pt; color:#00685E"><br>
Amy Rovner, M.P.H., R.D.</span></b><span style="font-size:10.0pt; color:black"><br>
Director eLearning Services<br>
Accessible IT Coordinator</span></p>
<p class="x_MsoNormal" style=""><b><span style="font-size:10.0pt; color:black">Shoreline Community College</span></b><span style="font-size:10.0pt; color:black"><br>
www.shoreline.edu | 206.546.6937<br>
eLearning Office: 206.546-6966<br>
Pronouns: she, her, hers</span></p>
<p class="x_MsoNormal" style=""><a href="https://shoreline.edu/"><span style="font-size:10.0pt; color:#0074B3; text-decoration:none"><img border="0" width="100" height="76" id="x_Picture_x0020_1" alt="Shoreline Community College logo" style="width:1.0416in; height:.7916in" data-outlook-trace="F:1|T:1" src="cid:image002.png@01D97D0C.48491950"></span></a><span style="font-size:10.0pt; color:black"></span></p>
<p class="x_MsoNormal"><span style="font-size:11.0pt"> </span></p>
<p class="x_MsoNormal"><span style="font-family:"Calibri Light",sans-serif; color:black; border:none windowtext 1.0pt; padding:0in; background:white">The </span><span style="font-family:"Calibri Light",sans-serif; color:#1F4E79; border:none windowtext 1.0pt; padding:0in; background:white">C</span><span style="font-family:"Calibri Light",sans-serif; color:black; border:none windowtext 1.0pt; padding:0in; background:white">ollege
has been affected by a ransomware incident that is temporarily impacting certain on-campus operations, so it may take longer to respond to your message. Your patience is appreciated. We deeply regret the inconvenience this has caused our Shoreline community,
and we continue to work diligently to resolve this issue. We are committed to a culture of transparency and honesty in the Shoreline community and will continue to provide additional updates as appropriate. Please visit the Support website <a href="https://support.shoreline.edu/TDClient/141/Portal/Home/" target="_blank"><span style="color:#0563C1; text-decoration:none">here</span></a> for resources.</span><span style="font-family:"Calibri Light",sans-serif; color:black; background:white"> </span></p>
<p class="x_MsoNormal"> </p>
</div>
</div>
</div>
</body>
</html>