Note
Keeping the ARIA in place, the style is returned to visually hidden to enable screen readers to announce it by default. VoiceOver still reads out the caption (twice) and the button, which is not needed.
The button is silenced with ARIA-hidden. This breaks ARIA and WCAG rules when applying ARIA-hidden to a focusable element. The button remains focussable to keyboard and pointer users while assisting the experience of screen reader users with and without CSS and JS enabled in the browser.
Perhaps WCAG and ARIA can review their advice in this use case?
Video
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">
<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;
}