Include the Transcript – Toggle Visibility

OTL Switch
Including a visible transcript with your infographic allows all users to access the information. They are able to follow links and copy/paste for additional sharing. However, the transcript can be large and overwhelm an article when the infographic is added as secondary content.

The transcript can be included within a hidden container that is available to screen reader users. While this solves the accessibility issues for blind users, it doesn’t help those with low vision. Further, the transcript may confuse sighted keyboard users as hidden links and form elements receive focus. Further, this solution doesn’t help those with low vision that may not be able to read the infographic due to small text and/or low contrast.

This leads us to a solution that includes a hidden transcript with a button to toggle visibility. It allows all users to have access to the transcript without overwhelming the page on initial load.

Advantages and Disadvantages of Hiding the Transcript

The code can be easily shared via an iframe. The JavaScript and CSS for toggling the visual display are included in the iframe content, which won’t affect the parent page. The user is able to skip past the transcript to continue reading host article.

Unfortunately, iframes do not respond to height changes. This means the user will need to scroll within the iframe to read the transcript. The seamless attribute would solve this issue, but it is only supported on Chrome Canary.

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.


Accessible Toggle Behavior

There are several steps to make the visibility toggle accessible. We have to place focus into the new content when it has become visible. We also need to place the focus back on the toggle button when it is hidden. This will let the screen reader user know the content is available and the focus will be ready for navigation within the new content.

Toggle Code

This example uses the Yahoo User Interface library, but it could easily be done with basic JavaScript or jQuery.

  • The first thing is to set up variables for our buttons and containers.
  • The toggle behavior depends on JavaScript, so on page load we will hide the transcript and give the header tabindex="-1" for future focus. This may cause a small flash of content, but it will make it available for people with JavaScript disabled.
  • The show button will make the transcript visible, set focus on the transcript’s first header, and hide the show button.
  • The hide buttons will close the transcript, make the show button visible, and set focus back on the show button.

<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js" charset="utf-8"></script>
  <script>
  YUI().use('node', function (Y) {
  // establish variables for container and buttons
  var transcript  = Y.one('#vacationInfo');
  var mqHeader	  = Y.one('#mapquest');
  var showButton  = Y.one('#show');
  var hideButton  = Y.all('.hide');
  // Give header tabindex="-1" to receive focus
  // Set the transcript to display:none on page load.
  // Only hide it from javascript enabled users
  Y.on("load", function() {
     mqHeader.set('tabIndex', -1);
     transcript.hide(true);
  });
  // set up the hide buttons to make the transcript hidden
  hideButton.on('click', function () {
    transcript.hide(true);
    showButton.show(true);
    showButton.focus(true);
  });
  // set up the display buttons to make the transcript visible
  showButton.on('click', function () {
    transcript.show(true);
    mqHeader.focus(true);
    showButton.hide(true);
  });
 });
</script>

The Sample Infographic

Other Options

1 thought on “Include the Transcript – Toggle Visibility”

Leave a Reply

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