Example Disclosure (Show/Hide) for Image Description

Please provide feedback on this example in issue 264.

The following example demonstrates using the disclosure design pattern to provide a way of revealing a table of data that complements an image.

Similar examples include:

Example

Charles Minard's 1869 chart showing the number of men in Napoleon’s 1812 Russian campaign army, their movements, as well as the temperature they encountered on the return path.

Data for Charles Minars's Chart of Naploean's Invasion of Russia

Location Approximate Date Size of Army Tempature C Tempature F Direction
Kowno River June 24th 442,000 na na Advance
Wilna June 30th 400,000 na na Advance
Witebsk na 175,000 na na Advance
Smolensk August 16th 145,000 na na Advance
Chjat na 127,000 na na Advance
Mojaisk September 7th 100,000 na na Advance
Moscow September 14th 100,000 na na Advance
Malo-jarosewli October 18th 96,000 0 32 Retreat
Mojaisk October 24th 87,000 0 32 Retreat
Wirma na 55,000 na na Retreat
Smolensk November 14th 37,000 -26 -13 Retreat
Orscha na 24,000 na na Retreat
Botr na 20,000 -14 -7 Retreat
Studienska (reinforcements arrive) December 1st 50,000 -25 -13 Retreat
Minsk December 1st 28,000 -30 -22 Retreat
Moloderno December 6th 28,000 -38 -34 Retreat
Smorgeni December 7th 12,000 -33 -27 Retreat
Wilna na 8,000 na na Retreat
Kowno (reinforcements arrive) December 14th 10,000 na na Retreat

Accessibility Features

  1. The visual indication of expanded and collapsed states is synchronized with the value of aria-expanded using a CSS atribute selector and :before pseudo element that generates an image with the content property.
  2. The interactivity of the disclosure button is visually indicated on focus and hover:
    • The CSS :focus pseudo class is used to change the background and border colors.
    • The CSS :hover pseudo class is used to change the background color and underline the text.

Keyboard Support

Key Function
Tab Moves keyboard focus to the disclosure button.
Space or
Enter
  • Activates the disclosure button, which toggles the visibility of the long description.
  • Role, Property, State, and Tabindex Attributes

    Role Attribute Element Usage
    aria-controls="IDREF" button
    • The disclosure button controls visibility of the container identified by the IDREF value.
    aria-expanded="false" button
    • Indicates that the container controlled by the disclosure button is hidden .
    • CSS attribute selectors (e.g. [aria-expanded="false"]) synchronize the visual states with the value of the aria-expanded attribute.
    • The visual indicator of the show/hide state is created using the CSS :before pseudo element and the content property so the image is reliably rendered in high contrast mode of operating systems and browsers.
    aria-expanded="true" button
    • Indicates that the container controlled by the disclosure button is visible.
    • CSS attribute selectors (e.g. [aria-expanded="true"]) synchronize the visual states with the value of the aria-expanded attribute.
    • The visual indicator of the show/hide state is created using the CSS :before pseudo element and the content property so the image is reliably rendered in high contrast mode of operating systems and browsers.

    Javascript and CSS Source Code

    HTML Source Code