Design 04: Toggling the Caption (Hide)

Cartoon Strip

Planning

[Assistant] The Director wants your plan for the information architecture.
[Our Designer] Says nothing.
[Assistant] I'll tell him you are at lunch.

Note

Aiming to improve the audible experience, the caption is removed from the DOM using JS and made available on activating the toggle button.

This prevents pre-reading the caption and can inadvertently lock the screenreader inside the button. It also requires all users to click the button to access the caption, which is not a comparable experience for screen readers that have no choice but to access the caption while visual users can read the image content.

When the toggle is activated and left activated, and on returning to the content, the caption is again announced before and after the image.

The ideal would be for the button not to be announced at all and the caption available to screen readers by default and without repeating at any time?

Video

HTML

<figure>
  <img src="../img/dieux-by-pat-godfrey-deadline.png" alt="Cartoon Strip" >
  <br>
  <button>Toggle Caption</button>
  <figcaption>
  <h2>Planning</h2>
    <p>[Assistant] The Director wants your plan for the information architecture. <br>
    [Our Designer] Says nothing. <br>
    [Assistant] I'll tell him you are at lunch.</p>
  </figcaption>
</figure>

jQuery

// JavaScript Document
$(document).ready(function(){'use strict';
//button keyboard capture
  $('button').keydown(function(objEvent) {
    if (objEvent.keyCode === 13 || objEvent.keyCode === 32) {
      $(this).click();
      return false;
    }
	}); //end click event
//Hide figcaptions
	$('figcaption').addClass('hidden');
//button
	$('button').click(function() {
	  $('figcaption').toggleClass('hidden');
	})
});//END jQuery

CSS

.hidden {
	display:none;
}