updated image alt examples

fixes #958

sections/semantics-embedded-content.include

@@ -2885,17 +2885,7 @@ Only <img width="21" height="18" src="images/euro.png" alt="euro " />5.99!
   &lt;p&gt;What more needs to be said?&lt;/p&gt;
     </pre>
   </div>
-
-<h6 id="a-graphical-representation-of-some-of-the-surrounding-text">A graphical representation of some of the surrounding text</h6>
-
-  In many cases, the image is actually just supplementary, and its presence merely reinforces the
-  surrounding text. In these cases, the <code>alt</code> attribute must be
-  present but its value must be the empty string.
-
-  In general, an image falls into this category if removing the image doesn't make the page any
-  less useful, but including the image makes it a lot easier for users of visual browsers to
-  understand the concept.
-
+
   <div class="example">
   It is not always easy to write a useful text alternative for an image, another option is to provide a link to a
   description or further information about the image when one is available.
@@ -2915,13 +2905,36 @@ Only <img width="21" height="18" src="images/euro.png" alt="euro " />5.99!
   &lt;header&gt;&lt;h1&gt;The Lady of Shalott&lt;/h1&gt;
   &lt;p&gt;A poem by Alfred Lord Tennyson&lt;/p&gt;&lt;/header&gt;
   &lt;figure&gt;
-  &lt;img src="shalott.jpeg" alt="Painting: a woman in a white flowing dress, sitting in a small boat." longdesc="https://bit.ly/5HJvVZ"&gt;
-  &lt;p&gt;&lt;a href="https://bit.ly/5HJvVZ"&gt;About this painting.&lt;/a&gt;&lt;/p&gt;
+  &lt;img src="shalott.jpeg" alt="Painting: a woman in a white flowing dress, sitting in a small boat."&gt;
+  &lt;p&gt;&lt;a href="https://bit.ly/5HJvVZ"&gt;About this painting: The Lady of Shalott.&lt;/a&gt;&lt;/p&gt;
   &lt;/figure&gt;
   &lt;!-- Full Recitation of Alfred, Lord Tennyson's Poem.  --&gt;
     </pre>
   </div>
 
+<h6 id="a-graphical-representation-of-some-of-the-surrounding-text">A graphical representation of some of the surrounding text</h6>
+
+  In many cases, the image is actually just supplementary, and its presence merely reinforces the
+  surrounding text. In these cases, the <code>alt</code> attribute must be
+  present but its value must be the empty string.
+
+  In general, an image falls into this category if removing the image doesn't make the page any
+  less useful, but including the image makes it a lot easier for users of visual browsers to
+  understand the concept.
+
+  <div class="example">
+  This example includes a screenshot of part of a text editor with the file described in the instruction, displayed:
+
+  <p>In the text file, add <code>SleepMode=1</code> under <code>[options]</code>, then save and close.</p>
+
+  <img src="images/jcf-text.png" alt="">
+
+   <pre highlight="html">
+   &lt;p>In the text file, add &lt;code>SleepMode=1&lt;/code> under &lt;code>[options]&lt;/code>, then save and close.&lt;/p>
+   &lt;img src="images/text.png" alt="">
+   </pre>
+  </div>
+
 <h6 id="a-purely-decorative-image-that-doesnt-add-any-information">A purely decorative image that doesn't add any information</h6>
 
   Purely decorative images are visual enhancements, decorations or embellishments that provide no