Note
With ARIA applied to the button and the figcaption show and hide interaction the experience was expected to be improved. It's not and the interaction seems a lot of work for screen readers needing to access the caption by default: adding the show and hide art direction has created barriers.
It may be a VoiceOver foible, and it is odd that the ARIA controls and expanded attributes appear ignored? They will remain for other screen readers such as NVDA and JAWS, which may access the information.
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">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 {
display:none;
}