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
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.
- The first thing is to set up variables for our buttons and containers.
- 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.