TechWhirl (TECHWR-L) is a resource for technical writing and technical communications professionals of all experience levels and in all industries to share their experiences and acquire information.
For two decades, technical communicators have turned to TechWhirl to ask and answer questions about the always-changing world of technical communications, such as tools, skills, career paths, methodologies, and emerging industries. The TechWhirl Archives and magazine, created for, by and about technical writers, offer a wealth of knowledge to everyone with an interest in any aspect of technical communications.
Inline images and screen readers, was Re: What do you call the Three Dots?
Subject:Inline images and screen readers, was Re: What do you call the Three Dots? From:"Sweet, Gregory P (HEALTH)" <gregory -dot- sweet -at- health -dot- ny -dot- gov> To:"techwr-l -at- lists -dot- techwr-l -dot- com" <techwr-l -at- lists -dot- techwr-l -dot- com> Date:Wed, 18 Oct 2017 15:09:54 +0000
They have to have alt text added or you have to use a css/ARIA scheme that allows for swapping content based on the viewer. For example Bootstrap and other frameworks provide css classes like .sronly class that hides the element from visual display but makes it available to screen readers.
So, for a limited and poor example, you might have markup that looks something like this: <p>To lorem ipsum dolor sit amet, consectetur adipiscing elit click <img src=âfooâ aria-hidden=âtrueâ> <span class=âsronlyâ>more</span>.</p>
Presenting the content in this way may have an advantage over the default alt attribute in that the screen reader simply ignores the image altogether and moves right along with your explanatory text uninterrupted. Also, using this kind of technique the alt text does not need to conform to the character limits of the alt attribute. You could use role=âpresentationâ instead of aria-hidden, but then the reader is still going to identify an element is there each time it is encountered. The above technique should render ââclick moreâ while role=âpresentationâ may render ââclick presentational element more.â Then again, as this is a poor example, the alt attribute would probably be just fine here for the one-word replacement.
PDFs require their own tagging and alt text applied through the reading order tool if the rendering tool doesnât pick up alternative content from the source.
Cheers!
Greg
On 10/18/17, 8:39 AM, "techwr-l-bounces+gregory -dot- sweet=health -dot- ny -dot- gov -at- lists -dot- techwr-l -dot- com on behalf of Weissman, Jessica R" <techwr-l-bounces+gregory -dot- sweet=health -dot- ny -dot- gov -at- lists -dot- techwr-l -dot- com on behalf of WeissmanJR -at- state -dot- gov> wrote:
ATTENTION: This email came from an external source. Do not open attachments or click on links from unknown senders or unexpected emails.
Anybody know how screen readers handle those inline graphics?
Jessica Weissman
Senior Technical Writer
ValidaTek, Inc.
Personal
UNCLASSIFIED
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Visit TechWhirl for the latest on content technology, content strategy and content development | http://techwhirl.com