<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" style="display:none;"><!-- P {margin-top:0;margin-bottom:0;} --></style>
</head>
<body dir="ltr">
<style type="text/css" style="display:none;"><!-- P {margin-top:0;margin-bottom:0;} --></style>
<div id="divtagdefaultwrapper" style="font-size:11pt;color:#000000;font-family:Helvetica,Arial,sans-serif;" dir="ltr">
<p>I'll follow-up my email with my personal recommendation.</p>
<p><br>
</p>
<p>Option 2 seems to be the first step. The issue here is whether any of the Wordpress plugins provide enough functionality to let us use CSS customizations and UI Options.</p>
<p><span style="font-size: 11pt;"><br>
</span></p>
<p><span style="font-size: 11pt;">If such plugins do not exist, then </span><span style="font-size: 11pt;">we will have to go with Option 3 where we have to make our own solution.</span></p>
<p><span style="font-size: 11pt;"><br>
</span></p>
<p><span style="font-size: 11pt;">- Jon.</span></p>
<div id="Signature">
<div id="divtagdefaultwrapper" dir="ltr" style="font-size: 12pt; color: rgb(0, 0, 0); font-family: Calibri, Arial, Helvetica, sans-serif, Arial, EmojiFont, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Segoe UI Symbol", "Android Emoji", EmojiSymbols;">
<p></p>
<div>---<br>
Jonathan Hung, Inclusive Designer<br>
Email: jhung@ocadu.ca<br>
OCAD University<br>
Inclusive Design Research Centre</div>
<br>
<p></p>
</div>
</div>
</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> fluid-work <fluid-work-bounces@lists.idrc.ocad.ca> on behalf of Hung, Jonathan <jhung@ocadu.ca><br>
<b>Sent:</b> October 19, 2017 2:19:17 PM<br>
<b>To:</b> Fluid Work<br>
<b>Cc:</b> Roberts, Vera; Pereyra, David<br>
<b>Subject:</b> Social media feeds update - a11y issues and more</font>
<div> </div>
</div>
<div>
<div id="divtagdefaultwrapper" style="font-size:11pt;color:#000000;font-family:Helvetica,Arial,sans-serif;" dir="ltr">
<p>Hi everyone,</p>
<p><br>
</p>
<p>This email is concerning the BIG IDeA website, and some issues uncovered with the accessibility of the social media feeds we've implemented. Since this may have some impact on other projects, I saw this relevant to discuss openly with the community.</p>
<p><br>
</p>
<p>Erica has helped implement the social media feeds on the development site for Big Idea. You can see it here: <a href="https://dev.bigidea.one/" class="OWAAutoLink" style="font-size: 11pt;">https://dev.bigidea.one/</a></p>
<p><br>
</p>
<p>I did some initial testing of it and a number of issues come up; here some of the major ones:</p>
<p><br>
</p>
<p></p>
<ol style="margin-bottom: 0px; margin-top: 0px;">
<li>The social media feeds provide default styling, but the defaults aren't all WCAG compliant, and do not work with UI Options.</li><li>There is a keyboard focus trap in the Facebook feed where you can tab into the FB panel, and you can't exit the panel because FB keeps adding more and more content.</li><li>Window / device scaling doesn't happen nicely if you resize the window. This may not be a huge issue as it seems to only happen if the user resizes the window (and it fixes itself when you reload the page).</li></ol>
<div><br>
</div>
<div><br>
</div>
<div>Fixing these problems will take some extra time. Here are the possible options:</div>
<div><br>
</div>
<div>
<ol style="margin-bottom: 0px; margin-top: 0px;">
<li><span style="font-size: 11pt;"></span>Don't fix things and go with it as-is. We can try to fence off the social media feeds with some ARIA to keep ATs from accessing those feeds, but it can be very confusing for some users (i.e if someone has partial vision
 they will be confused as to why they can't access areas with their screen reader even though they can see content there).</li><li>Try to find a way to fix the issues using the 3rd party API or find a Wordpress plugin that enables us to override the CSS so we can do some customization. I estimate it will take 4-6 days to do the research and the implementation, plus ongoing maintenance
 ensuring plugin gets updated regularly and that it doesn't break our integration. (Does anyone know of any FB, Twitter, and Instagram plugin which has customizable CSS and is accessible?).</li><li>Roll our own solution using their developer API that will be more customizable, accessible, and transformable. Going this way may be relevant to Floe as we can create a resource which can be reused by ourselves and by our partners. A very rough estimate
 8 to 10 days + ongoing maintenance.</li><li>Other options? I'm open to suggestions.</li></ol>
<div><br>
</div>
<div>I hope I have provided enough detail. I welcome your input in how we might go forward with this.</div>
</div>
<div><br>
</div>
<div>- Jon.</div>
<div><br>
</div>
<p></p>
<div id="Signature">
<div id="divtagdefaultwrapper" dir="ltr" style="font-size: 12pt; color: rgb(0, 0, 0); font-family: Calibri, Arial, Helvetica, sans-serif, Arial, EmojiFont, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Segoe UI Symbol", "Android Emoji", EmojiSymbols;">
<p></p>
<div>---<br>
Jonathan Hung, Inclusive Designer<br>
Email: jhung@ocadu.ca<br>
OCAD University<br>
Inclusive Design Research Centre</div>
<br>
<p></p>
</div>
</div>
</div>
</div>
</body>
</html>