Design 03: Toggling the Caption (Displacement)

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

A button is added and the caption visually hidden using a CSS class. The button toggles that class, showing and hiding the caption while leaving it available to the Accessibility Tree.

Safari with VoiceOver reads the caption before the image, and again after stopping on the button. As the caption is only visually hidden, the button's function is nugatory and presence confusing as it indicates the caption should be removed from the DOM?

Adding a heading to the caption is odd; the first read doesn't announce the heading and the second does. It sounds noisey, disorienting, and irritating.

Video

Skip video to and

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>

CSS

.hidden {
	position:absolute;
	top:0;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}

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 figcaption
   $('figcaption').addClass('hidden');
//button function
   $('button').click(function() {
     $('figcaption').toggleClass('hidden');
   })
});//END jQuery