Image Description Disclosure Example: Revised alt and figcaption text…

… and left align figcaption (pull #315)

Made the following updates for issue #264.

1. Made the alt text and figcaption text different so the alt text is brief and the caption is more detailed:
    * Revise alt text to be shorter.
    * Revise figcaption text to include english translation of text that is in the figure.
2. To be consistent with HTML requirements for figcaption, made `figcaption` last element in `figure`.
    * Structured text in figcaption element with `<p>` elements.
    * Moved disclosure button and disclosure content inside of the `<figcaption>` element.
3. Updated CSS to improve styling and left align the caption.

examples/disclosure/css/disclosure-faq.css

@@ -9,14 +9,18 @@ dl.faq button {
     padding-left: 0.125em;
 }
 
+dl dd {
+  margin: 0;
+  padding: 0;
+  margin-left: 1.5em;
+}
 
 dl.faq .desc {
     margin: 0;
-    padding: 0;
-    margin-top: 0.25em;
-    margin-left: 1.5em;
+    padding: 0.5em;
     font-size: 110%;
     display: none;
+    background-color: #FFFEDB;
 }
 
 dl.faq button:hover,

examples/disclosure/css/disclosure-img-long-description.css

@@ -37,3 +37,6 @@ figure button[aria-expanded="true"]:before {
   padding-right: 0.25em;
 }
 
+figure figcaption {
+  text-align: left;
+}

examples/disclosure/disclosure-img-long-description.html

@@ -38,15 +38,27 @@ <h2 id="ex_label">Example</h2>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of" ></div>
     <div id="ex1">
       <figure>
-
-        <img src="images/minard.png" aria-labelledby="id_short_desc" />
-
-        <caption id="id_short_desc"> Charles Minard's 1869 chart showing the number of men in
+        <img src="images/minard.png" alt="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.</caption>
-
+          encountered on the return path.">
+        <figcaption>
+          <p>
+            Figurative Map of the successive losses in men of the French Army in the Russian campaign 1812-1813.
+            Drawn by Mr. Minard, Inspector General of Bridges and Roads in retirement. 
+            Paris, 20 November 1869.
+          </p>
+          <p>
+            The numbers of men present are represented by the widths of the colored zones in a rate of one millimeter for ten thousand men; these are also written beside the zones. 
+            Red designates men moving into Russia, black those on retreat. 
+          </p>
+          <p>
+            The informations used for drawing the map were taken from the works of Messrs. Thiers, <span lang="fr">de Ségur, de Fezensac, de Chambray</span> and the unpublished diary of Jacob, pharmacist of the Army since 28 October.
+          </p>
+          <p>
+            In order to facilitate the judgement of the eye regarding the diminution of the army, I supposed that the troops under Prince Jèrôme and under Marshal Davoust, who were sent to Minsk and Mobilow and who rejoined near Orscha and Witebsk, had always marched with the army. 
+          </p>
+  <p><strong>Note: A French translation from Wikipeedia.</strong></p>
         <button aria-expanded="true" aria-controls="id_long_desc">Data Table for Minard's Chart</button>
-
         <div id="id_long_desc">
           <h3 id="id_data_label">Data for Charles Minars's Chart of Naploean's Invasion of Russia</h3>
           <table aria-labelledby="id_data_label" class="data">
@@ -218,7 +230,7 @@ <h3 id="id_data_label">Data for Charles Minars's Chart of Naploean's Invasion of
             </tbody>
           </table>
         </div>
-
+      </figcaption>
       </figure>
     </div>
     <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>