<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 14 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@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="1026" />
</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="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal">Hi all,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">I’m working with the University of Arizona’s Library team regarding the accessibility of their interactive tutorials. My understanding is that the code is open source and there are approximately 100 libraries across the nation either using
or wanting to use these tutorials. However the tutorial isn’t as accessible and usable as it could be which is delaying implementation on some campuses. So in an effort to create an accessible, interactive tutorial, I’m looking for some suggestions which
ensures accessibility for both assistive technology users and mobile devices….<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">The “Guide on the Side” tutorials provide step-by-step instructions on the left side of the screen while allowing users to practice using a live website (or database) on the right side of the screen. An example of the tutorial can be found
at <a href="http://www.library.arizona.edu/applications/quickHelp/tutorial/searching-academic-search-complete">
http://www.library.arizona.edu/applications/quickHelp/tutorial/searching-academic-search-complete</a> (please feel free to explore the tool and offer feedback/suggestions)<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">The column on the left is basically one page with directions. Using Javascript and iframes allows the navigation elements on the bottom of the left window and displaying the library database page on the right allowing students to interactively
follow along.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Currently, in order to get to the page on the right, as a person using the keyboard to navigate, I have to go through the entire tutorial on the left before being able to access the right side.
<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">So, one thought I had was to create a page that gives directions and then links directly to the Library page. The link would open a new tab or window (not the most accessible option) and the user would switch between the two windows to
complete the tutorial. While this isn’t optimal, it’s definitely more accessible than the current design.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">One of the key features we want to maintain include instant feedback for quiz answers and a quiz at the end that is graded automatically.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Ideas for or examples of accessible, interactive tutorials would be greatly appreciated.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Thanks!<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Dawn<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">~~<o:p></o:p></p>
<p class="MsoNormal">Dawn Hunziker<o:p></o:p></p>
<p class="MsoNormal">Coordinator, Technology Access<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Disability Resource Center<o:p></o:p></p>
<p class="MsoNormal">520-626-9409<o:p></o:p></p>
<p class="MsoNormal"><a href="mailto:hunziker@email.arizona.edu">hunziker@email.arizona.edu</a><o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</body>
</html>