Note
VoiceOver still reads the caption twice. Giving the figcaption an ARIA-role of "region" promotes it as a landmark and prevents its default treatment as a figcaption.
To name the new region, it is given an ARIA-labelledby attribute pointing to the H3 identity of "heading" in this case.
We could use any landmark region, of course and when viewed without JS enabled, the figure and figcaption remains the most sematic presentation available to the Accessibility Tree—and to visual users.
HTML
<figure>
<img src="../img/dieux-by-pat-godfrey-deadline.png" alt="Cartoon Strip" >
<br>
<button id="button" aria-controls="caption" aria-pressed="false" aria-expanded="false" aria-hidden="true">Toggle Caption</button>
<figcaption id="caption" aria-labelledby="heading" role="region">
<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');
if ($('figcaption').hasClass('hidden'))
{
$('figcaption').focus();
$('button').attr('aria-expanded','true');
$('button').attr('aria-pressed','true');
}
else
{
$('button').focus();
$('button').attr('aria-expanded','false');
$('button').attr('aria-pressed','false');
}
})
});//END jQuery
CSS
.hidden {
position:absolute;
top:0;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}