<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 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:"Calibri Light";
panose-1:2 15 3 2 2 2 4 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Cambria;
panose-1:2 4 5 3 5 4 6 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;}
h1
{mso-style-priority:9;
mso-style-link:"Heading 1 Char";
margin-top:12.0pt;
margin-right:0in;
margin-bottom:0in;
margin-left:0in;
margin-bottom:.0001pt;
page-break-after:avoid;
font-size:16.0pt;
font-family:"Calibri Light",sans-serif;
color:#2E74B5;
font-weight:normal;}
h2
{mso-style-priority:9;
mso-style-link:"Heading 2 Char";
margin-top:2.0pt;
margin-right:0in;
margin-bottom:0in;
margin-left:0in;
margin-bottom:.0001pt;
page-break-after:avoid;
font-size:13.0pt;
font-family:"Calibri Light",sans-serif;
color:#2E74B5;
font-weight:normal;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri Light",sans-serif;
color:#222A35;
font-weight:normal;
font-style:normal;}
span.EmailStyle20
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle21
{mso-style-type:personal;
font-family:"Cambria",serif;
color:#1F3864;}
span.EmailStyle22
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:windowtext;
font-weight:normal;
font-style:normal;}
span.Heading2Char
{mso-style-name:"Heading 2 Char";
mso-style-priority:9;
mso-style-link:"Heading 2";
font-family:"Calibri Light",sans-serif;
color:#2E74B5;}
span.Heading1Char
{mso-style-name:"Heading 1 Char";
mso-style-priority:9;
mso-style-link:"Heading 1";
font-family:"Calibri Light",sans-serif;
color:#2E74B5;}
.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;}
/* List Definitions */
@list l0
{mso-list-id:78721787;
mso-list-type:hybrid;
mso-list-template-ids:-16750418 67698703 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l0:level1
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
--></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="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<h1>Instructions in Visuals Could Be Listed in the Document<o:p></o:p></h1>
<p class="MsoNormal"><span style="font-size:12.0pt">I almost never include anything in an image that has words, or some information that I want to use for instructions; unless I include that text (especially application instructions, data graphs, and options)
in the structure of the document under the appropriate heading. <o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt">This ensures everyone gets the information regardless of the image, sometimes it makes it so alt text is not necessary, or only needs a brief description.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<h2>Data Visual Example<o:p></o:p></h2>
<p class="MsoNormal"><span style="font-size:12.0pt">When I have images or complex H.T.M.L. / C.S.S. visuals of graphs, I will usually say something like:
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt">This is a graph of data about something and then note that the graph information is represented in the document, being sure to note the location.
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<h2>Application Instruction Example<o:p></o:p></h2>
<p class="MsoNormal"><span style="font-size:12.0pt">For Instructions especially for applications I find it is vital to have everything in text for with proper document structure. A step by step instruction in a numbered list, with a proper description of where
the items are on a dashboard is all you really need (the visuals in many cases are almost redundant). Being consistent in language and tone when referring to parts of an application is also key to communicating these kinds of instructions.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<div>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">Dan Schipul<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">Web Developer<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">The Office of Campus Technology Services
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">Certified Web Accessibility Specialist<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black"><a href="mailto:dan.schipul@purchase.edu">dan.schipul@purchase.edu</a><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black"><a href="tel:+19142516464">914-251-6464</a><o:p></o:p></span></p>
<p class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto"><a href="https://www.purchase.edu/"><span style="font-size:12.0pt;font-family:"Times New Roman",serif;color:windowtext;text-decoration:none"><img border="0" width="243" height="90" style="width:2.5312in;height:.9375in" id="Picture_x0020_1" src="cid:image001.gif@01D454D7.DED74A20" alt="Purchase College - State University of New York"></span></a><span style="font-size:12.0pt;font-family:"Times New Roman",serif"><br>
<br>
<img border="0" width="300" height="65" style="width:3.125in;height:.677in" id="Picture_x0020_2" src="cid:image002.jpg@01D454D7.DED74A20" alt="Internation Association of Accessibility Professionals - Certified Web Accessibility Specialist (WAS)"><o:p></o:p></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal"><b>From:</b> athen-list <athen-list-bounces@mailman12.u.washington.edu>
<b>On Behalf Of </b>Karlen Communications<br>
<b>Sent:</b> Tuesday, September 25, 2018 1:27 PM<br>
<b>To:</b> 'Access Technology Higher Education Network' <athen-list@u.washington.edu><br>
<b>Subject:</b> Re: [Athen] Alt text for instructions with screenshots<o:p></o:p></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><span lang="EN-CA" style="font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864">I use the Alt Text as something supporting what my tutorials are presenting. For example, if I have the step by step instructions on how to change a font
size using the Font dialog, the Alt Text for the image would be “Font dialog showing Font Size options” and I would put focus on the Font Size settings part of the dialog when doing the screen image. Sometimes I just use “Font dialog” when I’ve given a step-by-step
overview of the Font dialog settings.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA" style="font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA" style="font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864">Cheers, Karen<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-CA" style="font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal" style="margin-left:.5in"><b>From:</b> athen-list <<a href="mailto:athen-list-bounces@mailman12.u.washington.edu">athen-list-bounces@mailman12.u.washington.edu</a>>
<b>On Behalf Of </b>Robert Beach<br>
<b>Sent:</b> Tuesday, September 25, 2018 10:45 AM<br>
<b>To:</b> Access Technology Higher Education Network <<a href="mailto:athen-list@u.washington.edu">athen-list@u.washington.edu</a>><br>
<b>Subject:</b> Re: [Athen] Alt text for instructions with screenshots<o:p></o:p></p>
</div>
</div>
<p class="MsoNormal" style="margin-left:.5in"><o:p> </o:p></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D">Alt text has a purpose which is to give the information provided by the image. I would not change this. Rather, I would add the keycommands to the general instructions since people without
disabilities may wish to use them as well. Usually key commands can be more efficient than mousing everything. This is more in line with universal design.<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D"><o:p> </o:p></span></p>
<div>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D">Robert Lee Beach<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D">Assistive Technology Specialist<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D">Kansas City Kansas Community College<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D">7250 State Avenue<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D">Kansas City, KS 66112<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D">Phone: 913-288-7671<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D">Email: <a href="mailto:rbeach@kckcc.edu">
rbeach@kckcc.edu</a><o:p></o:p></span></p>
</div>
<p class="MsoNormal" style="margin-left:.5in"><span style="color:#1F497D"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal" style="margin-left:.5in"><b>From:</b> athen-list <<a href="mailto:athen-list-bounces@mailman12.u.washington.edu">athen-list-bounces@mailman12.u.washington.edu</a>>
<b>On Behalf Of </b>Christine Robinson<br>
<b>Sent:</b> Tuesday, September 25, 2018 9:20 AM<br>
<b>To:</b> Access Technology Higher Education Network <<a href="mailto:athen-list@u.washington.edu">athen-list@u.washington.edu</a>><br>
<b>Subject:</b> [Athen] Alt text for instructions with screenshots<o:p></o:p></p>
</div>
</div>
<p class="MsoNormal" style="margin-left:.5in"><o:p> </o:p></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35">Hi all –<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35">For our campus, I’m tasked with creating instructions for various elements in Office 365. Obviously, I want to make the instructions accessible
- and I haven’t dealt with this kind of thing before.<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35">My instructions include steps such as (for example) “In the upper left corner of the Office 365 window, click the icon for the App Launcher,” followed
by a screenshot with the icon circled.<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35">It seems like the alt text should not be a description of the screenshot, however. I suspect a screen reader user doesn’t really care what the icon
<i>looks</i> like. Since alt text is supposed to convey the same information that a sighted user would obtain from an image, it makes sense to me that the alt text should offer instructions on how to accomplish the same result using keyboard commands.
<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35">For example, if my text instructions say, “in the upper left corner, click the icon…” perhaps the alt text for the image should say something like,
“Tab to the icon for the App Launcher.” ???<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35">So my questions for you all are:<o:p></o:p></span></p>
<p class="MsoListParagraph" style="margin-left:1.0in;text-indent:-.25in;mso-list:l0 level1 lfo2">
<![if !supportLists]><span style="font-family:"Calibri Light",sans-serif;color:#222A35"><span style="mso-list:Ignore">1.<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span style="font-family:"Calibri Light",sans-serif;color:#222A35">Is it correct that, in this case, alt text should provide instructions on how to navigate to the icon instead of a description of the image?<o:p></o:p></span></p>
<p class="MsoListParagraph" style="margin-left:1.0in;text-indent:-.25in;mso-list:l0 level1 lfo2">
<![if !supportLists]><span style="font-family:"Calibri Light",sans-serif;color:#222A35"><span style="mso-list:Ignore">2.<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span style="font-family:"Calibri Light",sans-serif;color:#222A35">Where can I find more instructions re. using Office 365 features via keyboard commands? I’ve searched on the Microsoft site but haven’t succeeded in finding anything.<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35">Thanks!<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-family:"Calibri Light",sans-serif;color:#222A35"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><b><span style="color:#007048">Christine Robinson</span></b><span style="color:#007048">
</span><span style="color:#222A35">| Technical Trainer/Writer | Center for Teaching Excellence<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><b><span style="color:#007048">Georgia Gwinnett College</span></b><span style="color:#222A35"> | 1000 University Center Lane| Lawrenceville, GA 30043<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><o:p> </o:p></p>
</div>
</body>
</html>