[Athen] Alt text for instructions with screenshots

Iza Bartosiewicz iza.bartosiewicz at rmit.edu.au
Wed Sep 26 21:36:45 PDT 2018


Hi Christine

Here are my rules of thumb for writing instructions with screenshots for
web-based apps:

*Use but don't rely on screenshots*
Write instructions first, making sure that interface descriptions or
references to interface elements make sense without the screenshots, and
then add screenshots with a blank or minimal alt text.

*Reduce verbal clutter*
Just like visual clutter, verbal clutter can increase cognitive load and
make instructions harder to understand and follow. Avoid or minimise:

- redundant image descriptions that duplicate what's already covered in
the surrounding text;
- unnecessary descriptions that are unlikely to be useful to someone,
who won't see the interface.

*Check 'under the hood'*
What the visual label of an interface element shows may not necessarily be
what the screen reader will read out. So, when describing elements such as
image or icon buttons, always check the underlying markup and incorporate
'hidden' labels if they differ from the visible labels.

The most obvious example is a search button with a magnifying glass icon as
a visual indicator and a word 'search' as a title or alt attribute. The
easiest way to check this is to inspect the markup in a browser. You can
also try the WAVE tool and select 'No Styles' option from the sidebar
controls. This option strips the CSS, so you'll be able to compare the
markup with the visual display.

Hope this helps.

Including keyboard shortcuts will benefit many people so it is definitely
worth doing. Is this what you're looking for? Shortcut keys in Office
<https://support.office.com/en-us/article/shortcut-keys-in-office-e765366f-24fc-4054-870d-39b214f223fd>


cheers
Iza

*Iza Bartosiewicz | Web Coordinator*
Internet Services, Library and Student Success

Building 94, 23 Cardigan Street
Carlton VIC 3053
Tel. +61 3 9925 3103
iza.bartosiewicz at rmit.edu.au
www.rmit.edu.au/ <http://www1.rmit.edu.au/library>
@Mr0wka18 <http://twitter.com/Mr0wka18>
www.linkedin.com/in/izabartosiewicz

*RMIT University acknowledges the people of the Woi wurrung and Boon
wurrung language groups of the eastern Kulin Nations on whose unceded lands
we conduct the business of the University. RMIT University respectfully
acknowledges their Ancestors and Elders, past and present.*

*RMIT also acknowledges the Traditional Custodians and their Ancestors of
the lands and waters across Australia where we conduct our business.*

Date: Tue, 25 Sep 2018 14:20:02 +0000

> From: Christine Robinson <crobinson at ggc.edu>

> To: Access Technology Higher Education Network

> <athen-list at u.washington.edu>

> Subject: [Athen] Alt text for instructions with screenshots

> Message-ID:

> <

> BN6PR04MB07543642981C7577242454BDAA160 at BN6PR04MB0754.namprd04.prod.outlook.com

> >

>

> Content-Type: text/plain; charset="us-ascii"

>

> Hi all -

>

> 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.

>

> 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.

>

> 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

> looks 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.

>

> 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." ???

>

> So my questions for you all are:

>

> 1. 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?

>

> 2. 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.

>

> Thanks!

>

> Christine Robinson | Technical Trainer/Writer | Center for Teaching

> Excellence

> Georgia Gwinnett College | 1000 University Center Lane| Lawrenceville, GA

> 30043

>

>

>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20180927/3d699bb1/attachment.html>


More information about the athen-list mailing list