<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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">
Hi Heather,</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">
The way my inbox is filtering ATHEN email is awful right now, so I don' have a good sense on the response you have already received. I want to echo Dan Comden's sentiment here. You don't need to know much about HTML or CSS to do a very basic accessibility/usability
audit of the flip card tool for Canvas. Instead, use your keyboard. Set your computer mouse far away from your computer or unplug it! After you open up the flip card tool, use your keyboard to see if you can navigate the keyboard's focus appropriately around
the flip card's elements, and then test to see if you can use your keyboard to "flip" the card.</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">
<a href="https://webaim.org/techniques/keyboard/#testing" title="https://webaim.org/techniques/keyboard/#testing" data-loopstyle="linkonly">WebAIM Keyboard Testing</a></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">
I am guessing you may encounter roadblocks, sadly, which will indicate accessibility issues. Just today I was on a call with a vendor about the flip card design they use in their LMS. It is not accessible and I'm advocating they remove it entirely and provide
us an alternative accessible way to interact with the content.</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:385b6ff1-fff5-4fca-848e-d1bd3e0788fc"></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;"><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:07c9ca0f-cba8-4e8c-9425-480e78f099e9"></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);"><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> athen-list <athen-list-bounces@mailman12.u.washington.edu> on behalf of Dan Comden <danc@uw.edu><br>
<b>Sent:</b> Thursday, June 22, 2023 2:17 PM<br>
<b>To:</b> Access Technology Higher Education Network <athen-list@u.washington.edu><br>
<b>Cc:</b> The EDUCAUSE IT Accessibility Community Group Listserv <EDUCAUSE-ITACCESS@connectedcommunity.org>; WebAIM Discussion List <webaim-forum@list.webaim.org><br>
<b>Subject:</b> Re: [Athen] Flip Cards in Canvas</font>
<div> </div>
</div>
<div>
<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 dir="ltr">
<div>Can't speak to the accessibility of this specific Canvas widget, but keyboard testing is something most anyone can do.</div>
<div><br>
</div>
<div>Check out <a href="http://nomouse.org">nomouse.org</a> for more details.</div>
<div><br>
</div>
<div>Make sure the same functionality for mouse users is present for keyboard-only folks.</div>
<div><br>
</div>
<div>-*- Dan<br>
</div>
<div><br>
</div>
<div><br>
</div>
</div>
<br>
<div class="x_gmail_quote">
<div dir="ltr" class="x_gmail_attr">On Thu, Jun 22, 2023 at 1:08 PM Heather Mariger <<a href="mailto:heather.mariger@chemeketa.edu">heather.mariger@chemeketa.edu</a>> wrote:<br>
</div>
<blockquote class="x_gmail_quote" style="margin:0px 0px 0px 0.8ex; border-left:1px solid rgb(204,204,204); padding-left:1ex">
<div dir="ltr">Greetings,
<div><br>
</div>
<div>I apologize for the cross posting (I need all the help I can get)...</div>
<div><br>
</div>
<div>I have a faculty member who wants to use flip cards in Canvas. He found this article: <a href="https://urldefense.com/v3/__https://www.howtocanvas.com/theme-editor/flipcard__;!!K-Hz7m0Vt54!jGpW6nBeNIE4998Ztm4cEw5tAl9tfMByozWvdhXQbGo4DaOjXCnAIWUtoURvQUr2SKu0W03bVF2H82Sf_1mH4kSxtepsYvGQcA$" target="_blank">Create
CSS Flip cards in Canvas</a> <br>
<div><br>
</div>
<div>While I have a <i style="font-weight:bold">very</i> basic understanding of CSS and HTML, I am in no way qualified to determine if this technique is fully keyboard accessible (I rather suspect not).</div>
<div><br>
</div>
<div>So, I am reaching out to you brilliant people to ask if these instructions are actually accessible or if you know of a way to make accessible flip cards in Canvas.</div>
<div><br>
</div>
<div>Thanks so much!</div>
<div>H.</div>
<div><br>
</div>
<div><br>
</div>
<div><br>
</div>
<div><br>
</div>
<div>
<div>
<div dir="ltr" class="x_gmail_signature">
<div dir="ltr">
<div>
<div dir="ltr">
<div>
<div dir="ltr">
<div>
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div><span style="font-family:"helvetica neue",Helvetica,Arial,sans-serif"><b><font size="4" color="#38761d">Heather Mariger</font></b></span></div>
<div><span style="font-family:"helvetica neue",Helvetica,Arial,sans-serif; font-size:14px"><b><font color="#38761d">Digital Accessibility Advocate</font></b></span><br>
</div>
<div>
<div><i><font face="arial, sans-serif"><font color="#333333">Pronouns: She/Her</font><br>
</font></i></div>
<div><i><font><font color="#333333"><br>
</font></font></i></div>
<div style="color:rgb(34,34,34); font-family:arial,sans-serif; font-size:12.8px">
<i style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif; font-size:small"><font size="1">Center for Academic Innovation</font></i><br>
</div>
<div style="color:rgb(34,34,34); font-family:arial,sans-serif"><span style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif"><i><font size="1">Chemeketa Community College</font></i></span></div>
</div>
<div style="color:rgb(34,34,34); font-family:arial,sans-serif"><i><font size="1"><span style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif">4000 Lancaster Drive NE - </span><span style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif">9/126A</span></font></i></div>
<div style="color:rgb(34,34,34); font-family:arial,sans-serif"><span style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif"><i><font size="1">Salem, OR 97305</font></i></span></div>
<div style="color:rgb(34,34,34); font-family:arial,sans-serif"><span style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif"><i><font size="1"><br>
</font></i></span></div>
<div style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif">
503.589.7832<br>
</div>
<div style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif">
<br>
</div>
<div style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif; font-size:14px">
<span style="color:rgb(51,51,51); font-family:"helvetica neue",Helvetica,Arial,sans-serif; font-size:14px">*****************</span></div>
<font face="arial, helvetica, sans-serif"><i>Diversity is being invited to the party; inclusion is being asked to dance. </i></font></div>
<div dir="ltr"><font face="arial, helvetica, sans-serif">Verna Myers, author and speaker </font></div>
<div dir="ltr"><font face="arial, helvetica, sans-serif"><br>
</font></div>
<div dir="ltr"><img width="200" height="88" style="font-family:arial,helvetica,sans-serif" src="https://ci3.googleusercontent.com/mail-sig/AIorK4wz2gxtvjQyMTpC_0WG-EazWKiKpKpBmV7xR5EAWQiTKtGrsvFIo9MV_3-jAopcCt5HPEuWGpw"><br>
</div>
<div dir="ltr"><br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
_______________________________________________<br>
athen-list mailing list<br>
<a href="mailto:athen-list@mailman12.u.washington.edu" target="_blank">athen-list@mailman12.u.washington.edu</a><br>
<a href="http://mailman12.u.washington.edu/mailman/listinfo/athen-list" rel="noreferrer" target="_blank">http://mailman12.u.washington.edu/mailman/listinfo/athen-list</a><br>
</blockquote>
</div>
</div>
</div>
</body>
</html>