Include the Transcript – Hidden

We’ve seen that adding the infographic’s translation on a page is the most accessible method. It gives all users the ability to read, select, copy, and share the information within the infographic. It also allows the user to follow links that are embedded in the infographic’s transcript. However, this may not be the best method for sharing infographics.
Hide
Infographics can provide a short summary of complex topics. These can easily be inserted into an article for adding context to a discussion. For instance, a financial chart may show the quick rise in a company’s stock price. The description of that chart could require significantly more space on the page.

One option is to include the transcript, but hide it visually. We could use the “visually-hidden” class as defined by Thierry Koblentz’s article: Clip Your Hidden Content For Better Accessibility.

Advantages and Disadvantages of Hiding the Transcript

The hidden content is fully accessible to screen reader users. They will be able to navigate the content and access embedded links. The technique is easy to use and share with an iframe. Search engine spiders will also have access to the content in this hidden section.

As the content is hidden visually, the sighted keyboard user will be confused if there are hidden links and form elements that receive focus. Sighted users are not able to select transcript text.

Sharing the package

The infographic and transcript can include a large amount of code. This makes it difficult for a user to copy and paste. We can solve this by sharing the infographic within an iframe.


To allow more flexibility, I’ve removed margin, padding, and set the image to resize to the iframe’s dimensions. Also note, the iframe needs a title attribute.

body, img {
	margin:0;
        padding:0;
	}
img{
	width:100%;
	height:auto;
	}
.visually-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
} body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }

Other Options

Leave a Reply

Your email address will not be published. Required fields are marked *