Design 13: Accommodating Art Direction

Now we bring the following design elements together for user testing:

• Image,
• Figure and figcaption,
• Toggle button,
• ARIA to separate visual and non-visual experiences,
• Fluid-responsive image style,
• Landscape and portrait responsivness.

What remains is to:

• Remove and replace the br; spacing 'shims' with CSS (for layout).
• Style the caption.
• Call ARIA from the JavaScript unless required active in the native DOM.

User testing this version highlights that the image heading must be available to visual users without activating the toggle button. This was an oversight when focussed on a single image instance and will be updated at the next iteration. This highlights the importance of user testing.

/*NOTE: "mobile-first" styling of narrowest viewport*/
figcaption,
figcaption.showCaption {
	position:relative;
	padding:1em;
	margin:0 auto 2rem auto;
	width:100%;
	max-width:300px;
	…
}
figcaption:before {
	… /*indicator / pointer */
}
figure img {
padding:1em 0;
}
	@media screen and (min-width:760px){
		figcaption,
		figcaption.showCaption{
			max-width:1000px;
			}
	}
.stars {
	font-size:24px;
	color:#BB8B14;/*Contrast ratio 3:2 */
}	
/* Caption Toggle button */
    .talkbubble {
	…/*styling*/
    }
    .talkbubble:after {
      …/*styling indicator / pointer*/
    }
	.talkbubble:hover,
	.talkbubble:focus {
	…/*accommodating visual hover and focus*/
	}