[css-round-display] Insert an alt attribute into <img> elements

Author: hyojinLGE

css-round-display/Overview.bs

@@ -92,11 +92,11 @@ The example below shows how a web page looks in the different shapes of displays
 
 <div style="width: 700px; height: 380px; text-align:center">
     <div style="float: left; width: 350px;">
-        <img src="images/clock_a.png">
+        <img alt="An image of a rectangle clock within a rectangle display" src="images/device_radius_clock_a.png">
         <p>(A) Rectangle Display</p>
     </div>
     <div style="float: left; ">
-        <img src="images/clock_c.png">
+        <img alt="An image of a round clock within a rectangle display" src="images/device_radius_clock_b.png">
         <p>(B) Round Display</p>
     </div>
 </div>
@@ -126,11 +126,11 @@ If this example code is loaded in a regular round display, '<code>round.css</cod
 </pre>
 <div style="width: 700px; height: 380px; text-align:center">
     <div style="float: left; width: 350px;">
-        <img src="images/clock_a.png">
+        <img alt="An image of a rectangle clock within a rectangle display" src="images/device_radius_clock_a.png">
         <p>(A) Rectangle Display<br>(w/ <code>device-radius: 0%</code>)</p>
     </div>
     <div style="float: left; ">
-        <img src="images/clock_b.png">
+        <img alt="An image of a round clock within a round display" src="images/device_radius_clock_c.png">
         <p>(B) Round Display<br>(w/ <code>device-radius: 50%</code>)</p>
     </div>
 </div>
@@ -188,11 +188,11 @@ The example below shows how the 'shape-inside' property works when it is set to
 <br />
 <div style="width: 500px; height: 380px; text-align:center">
     <div style="float: left; width: 230px;">
-        <img style="width: 230px" src="images/watch_b.png">
+        <img alt="A layout of web contents without shape-inside:display" style="width: 230px" src="images/shape_inside_watch_a.png">
         <p>(A) Without '<code>shape-inside</code>'</p>
     </div>
     <div style="float: left; width: 230px;">
-        <img style="width: 230px" src="images/watch_c.png">
+        <img alt="A layout of web contents with shape-inside: display" style="width: 230px" src="images/shape_inside_watch_b.png">
         <p>(B) With '<code>shape-inside: display</code>'</p>
     </div>
 </div>
@@ -207,7 +207,7 @@ Even though the shape of the rounded display could be described by circle() or e
 When a containing block is placed on one end of the display and the containing block has 'shape-inside: display', the descendant blocks of the containing block are basically put on the overlapping region between the containing block and the display area. The overlapping region's shape is mostly complicated shape, so it's difficult to define the shape using previous method like basic-shape. The figure 4 describes these circumstances as follows.
 </p>
 <div style="width: 500px;">
-    <img style="width: 500px" src="images/ex3.png">
+    <img alt="An image of two examples to show the principle of shape-inside: display" style="width: 500px" src="images/shape_inside_a.png">
     <p class="caption">Align a part of the content along the display border</p>
 </div>
 <p class="issue">
@@ -256,11 +256,11 @@ The example below shows how the 'border-boundary' property works on drawing bord
 <br />
 <div style="width: 600px; text-align:center">
     <div style="float: left; width: 300px;">
-        <img style="width: 200px" src="images/border_b.png">
+        <img alt="An image of circle drawing border lines without border-boundary: display" style="width: 200px" src="images/border_boundary_a.png">
         <p>(A) Without '<code>border-boundary</code>'</p>
     </div>
-    <div style="float: left; width: 300px; ">
-        <img style="width: 200px" src="images/border_c.png">
+    <div style="float: left; width: 300px;">
+        <img alt="An image of circle drawing border lines with border-boundary: display" style="width: 200px" src="images/border_boundary_b.png">
         <p>(B) With '<code>border-boundary: display</code>'</p>
     </div>
 </div>
@@ -326,11 +326,11 @@ Figure 6B might be the result of
 <br />
 <div style="width: 700px; text-align:center">
     <div style="float: left; width: 350px;">
-		<img style="width: 300px" src="images/polar_positioning_a.png">
+		<img alt="An image aligning two elements to containing block in the conventional coordinate system" style="width: 300px" src="images/polar_position_a.png">
 		<p>(A) With 'position: <code>absolute</code>'</p>
 	</div>
     <div style="float: left; width: 350px; ">
-		<img style="width: 300px" src="images/polar_positioning_b.png">
+		<img alt="An image aligning two elements to containing block in the polar coordinate system" style="width: 300px" src="images/polar_position_b.png">
 		<p>(B) With 'position: <code>polar</code>'</p>
 	</div>
 </div>
@@ -376,7 +376,7 @@ This example shows a way to align elements within the polar coordinate system.
 &lt;/body>
 </pre>
 <div style="width: 400px; text-align: center">
-	<img src="images/polar.png" style="width: 200px; border: 1px #AAA solid; text-align: center"/>
+	<img alt="An image of three elements positioned to polar coordinates" src="images/polar_a.png" style="width: 200px; border: 1px #AAA solid; text-align: center"/>
 	<p class="caption">An example of polar positioning</p>
 </div>
 </div>