Design 08: Re-equalising the Experience

dieUX cartoon strip, User Testing created 26th January, 2019 by Pat Godfrey

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

With the interaction sorted out, we can explore improving the experience of the alt attribute. Were it given an empty value (alt=" "), then nothing will display when the image fails to load in tyhe browser. Depending on the browser, our users may not know an image is missing. WCAG prescribe no more than 120 characters and for SEO purposes each attribute should be unique.

Announcing each alt attribute is unneccesary to screen readers and could be frustrating. Applying an ARIA-labelledby attribute to the image takes precedence over the alt. It reads the element it is directed to, not the alt! The same heading is indicated for the <img> and <figcaption> (the region).

Not all browsers make clear when an alt is displaying. Applying a CSS style to it equalises the experience and offers countless opprtunities to art direction for its presentation.

The result is to annotate when an image has failed to load equally in each browser and to give it a useful attribute for the screen reader to announce. (Except in Safari. Safari is the new IE11 in this respect and will not display an alt attribute and does display a placeholder border, so visually a missing image is annotated, if not meaningfully.)

HTML

<figure>
  <img src="../img/" alt="dieUX cartoon strip, User Testing created 26th January, 2019 by Pat Godfrey" aria-labelledby="heading">
  <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 id="heading">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;
}
img[alt] {
	color:#777;
	font-size:1.5em;
	font-style:oblique;
}