Turn long alt text into logdesc. (#408)

This closes #386

index.bs

@@ -1211,13 +1211,15 @@ area for <a lt="WebVTT cue">WebVTT cues</a>.</p>
  <p>The following diagram illustrates how anchoring of a region to a video viewport works. The black
  cross is the anchor, orange explains the anchor's offset within the region and green the anchor's
  offset within the viewport. Think of it as sticking a pin through a note onto a board:</p>
- <p><img src="webvtt-region-diagram.png" alt="Within the video viewport, there is a WebVTT region.
+ <p><img src="webvtt-region-diagram.png" alt="visual explanation of WebVTT regions"
+ longdesc=#regionsExplained></p>
+ <p id=regionsExplained>Image description: Within the video viewport, there is a WebVTT region.
  Inside the region, there is an anchor point marked with a black cross. The vertical and horizontal
  distance from the video viewport's edges to the anchor is marked with green arrows, representing
  the region viewport anchor X and Y offsets. The vertical and horizontal distance from the region's
  edges to the anchor is marked with orange arrows, representing the region anchor X and Y offsets.
  The size of the region is represented by the region width for the horizontal axis, and region lines
- for the vertical axis." style="width:100%;"></p>
+ for the vertical axis.</p>
 </div>
 
 <p>For parsing, we also need the following:</p>

index.html

@@ -2377,13 +2377,14 @@ <h3 class="heading settled" data-level="3.2" id="regions"><span class="secno">3.
     <p>The following diagram illustrates how anchoring of a region to a video viewport works. The black
  cross is the anchor, orange explains the anchor’s offset within the region and green the anchor’s
  offset within the viewport. Think of it as sticking a pin through a note onto a board:</p>
-    <p><img alt="Within the video viewport, there is a WebVTT region.
+    <p><img alt="visual explanation of WebVTT regions" longdesc="#regionsExplained" src="webvtt-region-diagram.png"></p>
+    <p id="regionsExplained">Image description: Within the video viewport, there is a WebVTT region.
  Inside the region, there is an anchor point marked with a black cross. The vertical and horizontal
  distance from the video viewport’s edges to the anchor is marked with green arrows, representing
  the region viewport anchor X and Y offsets. The vertical and horizontal distance from the region’s
  edges to the anchor is marked with orange arrows, representing the region anchor X and Y offsets.
  The size of the region is represented by the region width for the horizontal axis, and region lines
- for the vertical axis." src="webvtt-region-diagram.png" style="width:100%;"></p>
+ for the vertical axis.</p>
    </div>
    <p>For parsing, we also need the following:</p>
    <dl>