Skip to content
This repository has been archived by the owner on Jul 30, 2019. It is now read-only.

Commit

Permalink
editorial: embedded-content
Browse files Browse the repository at this point in the history 
- Fix misspelling of “recommended”
- Clean up rendered presentation of example 39 (fix awkward line breaks in text caused by returns within the `pre`)
- Modify other examples that had displayed markup that did not match their rendered counter part. (e.g., changes in punctuation or alt text)
- other source file cleanup that resulted in no changes to the spec.
  • Loading branch information
@scottaohara
scottaohara committed Feb 15, 2018
1 parent 1d0adc9 commit 60b4ace
Showing 1 changed file with 57 additions and 51 deletions.
108 changes: 57 additions & 51 deletions sections/semantics-embedded-content.include
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2629,13 +2629,15 @@
structured text alternative is provided below the image in the form of a data table using the data that is represented
in the chart image.

<img src="images/table.gif" alt="Bar Chart: average rainfall by Country and Season. Full description in Table below." width="407" height="341">
<img src="images/table.gif" width="407" height="341"
alt="Bar Chart: average rainfall by Country and Season. Full description in Table below.">

<p class="note">
Indications of the highest and lowest rainfall for each season have been included in the
table, so trends easily identified in the chart are also available in the data table.
table, so trends easily identified in the chart are also available in the data table.
</p>

<table border="1" style="width:28em">
<table border="1" style="width: 28em;">
<caption>Average rainfall in millimetres by country and season.</caption>
<tbody>
<tr>
Expand Down Expand Up @@ -2674,7 +2676,7 @@
<xmp highlight="html">
<figure>
<figcaption>Rainfall Data</figcaption>
<img src="rainchart.gif" alt="Bar chart: average rainfall by Country and Season.
<img src="rainchart.gif" alt="Bar chart: average rainfall by Country and Season.
Full description in Table below." longdesc="#table-4">
<table id="table-4">
<caption>Rainfall in millimetres by Country and Season.</caption>
Expand Down Expand Up @@ -2712,15 +2714,15 @@
</figure>
</xmp>

<p class="note">
The <{figure}> element is used to group the Bar Chart image and data table.
The <{figcaption}> element provides a caption for the grouped content.
</p>
<p class="note">
The <{figure}> element is used to group the Bar Chart image and data table.
The <{figcaption}> element provides a caption for the grouped content.
</p>

</div>
<p class="note">
For any of the examples in this section the <code>details</code> and <code>summary</code>
elements could be used so that the text descriptions for the images are only displayed on demand:
elements could be used so that the text descriptions for the images are only displayed on demand:
</p>

<div class="example">
Expand Down Expand Up @@ -2843,10 +2845,10 @@
In this case it is recommended that the text in the image is included in the text alternative.

<div class="example">
Consider an image containing a pie chart and associated text. It is recommended wherever
possible to provide any associated text as text, not an image of text.
If this is not possible include the text in the text alternative along with the pertinent information
conveyed in the image.
Consider an image containing a pie chart and associated text. It is recommended wherever
possible to provide any associated text as text, not an image of text.
If this is not possible include the text in the text alternative along with the pertinent
information conveyed in the image.

<img src="images/figure1.png" alt="Figure 1. Distribution of Articles by Journal
Category. Pie chart: Language=68%, Education=14% and Science=18%." id="piechart" width="351" height="279">
Expand Down Expand Up @@ -2881,11 +2883,10 @@

<h6 id="images-that-enhance-the-themes-or-subject-matter-of-the-page-content">Images that enhance the themes or subject matter of the page content</h6>

An image that isn't discussed directly by the surrounding text but still has
some relevance can be included in a page using the <{img}> element. Such images
are more than mere decoration, they may augment the themes or subject matter of the page
content and so still form part of the content. In these cases, it is recommeneded that a
text alternative be provided.
An image that isn't discussed directly by the surrounding text but still has some relevance can
be included in a page using the <{img}> element. Such images are more than mere decoration, they
may augment the themes or subject matter of the page content and so still form part of the
content. In these cases, it is recommended that a text alternative be provided.

<div class="example">
Here is an example of an image closely related to the subject matter of the page content
Expand All @@ -2912,22 +2913,23 @@
...
...
...
&lt;p id="des"&gt;<strong>The woman in the painting is wearing a flowing white dress. A large piece of intricately
patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression
is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out.</strong>
&lt;a href="http://www.tate.org.uk/art/artworks/waterhouse-the-lady-of-shalott-n01543"&gt;Further information about the painting&lt;/a&gt;.&lt;/p&gt;
&lt;p id="des"&gt;<strong>The woman in the painting is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out.</strong>
&lt;a href="https://www.tate.org.uk/art/artworks/waterhouse-the-lady-of-shalott-n01543"&gt;Further information about the painting&lt;/a&gt;.&lt;/p&gt;
</pre>
</div>
<div class="example">
<p>This example illustrates the provision of a text alternative identifying an image as a photo of the
main subject of a page.
<p><img src="images/robin.png" alt="Portrait photo (black and white) of Robin, accompanied by a heading 'Robin Berjon' and a question
'what more needs to be said?'" width="354" height="138">
<xmp highlight="html">
<img src="orateur_robin_berjon.png" alt="Portrait photo (black and white) of Robin.">
<h1>Robin Berjon</h1>
<p>What more needs to be said?</p>
</xmp>
<p>
This example illustrates the provision of a text alternative identifying an image as a
photo of the main subject of a page.
</p>
<p>
<img src="images/robin.png" alt="Portrait photo (black and white) of Robin, accompanied by a heading 'Robin Berjon' and a question 'what more needs to be said?'" width="354" height="138">
</p>
<xmp highlight="html">
<img src="orateur_robin_berjon.png" alt="Portrait photo (black and white) of Robin.">
<h1>Robin Berjon</h1>
<p>What more needs to be said?</p>
</xmp>
</div>

<div class="example">
Expand Down Expand Up @@ -3373,12 +3375,11 @@
Where images are used in this way, it would also be appropriate to add the image using CSS.

<xmp highlight="css">
#home:before
{
#home:before {
content: url(home.png);
}
</xmp>

<xmp highlight="html">
<a href="home.html" id="home">Home</a>
</xmp>
Expand All @@ -3388,28 +3389,31 @@
In this example, there is a warning message, with a warning icon. The word "Warning!" is in emphasized
text next to the icon. As the information conveyed by the icon is redundant the <{img}> element is given an empty <code>alt</code> attribute.

<img src="images/warning.png" alt="Warning!" width="38" height="34"> <strong>Warning!</strong> Your session is about to expire.
<img src="images/warning.png" alt="Warning!" width="38" height="34"> <strong>Warning!</strong> Your session is about to expire.

<xmp highlight="html">
<p>
<img src="warning.png" width="38" height="34" alt=""> <strong>Warning!</strong> Your session is about to expire
</p>
</xmp>
<xmp highlight="html">
<p>
<img src="warning.png" width="38" height="34" alt="">
<strong>Warning!</strong> Your session is about to expire.
</p>
</xmp>
</div>

When an icon conveys additional information not available in text, provide a text alternative.

<div class="example">
In this example, there is a warning message, with a warning icon. The icon emphasizes the
importance of the message and identifies it as a particular type of content.
In this example, there is a warning message, with a warning icon. The icon emphasizes the
importance of the message and identifies it as a particular type of content.

<img src="images/warning.png" alt="Warning!" width="38" height="34"> <strong>Your session is about to expire.</strong>
<img src="images/warning.png" alt="Warning!" width="38" height="34"> <strong>Your session is about to expire.</strong>

<xmp highlight="html">
<p><img src="warning.png" width="38" height="34" alt="Warning!">Your session is about to expire</p>
</xmp>

</div>
<xmp highlight="html">
<p>
<img src="warning.png" width="38" height="34" alt="Warning!">
<strong>Your session is about to expire.</strong>
</p>
</xmp>
</div>

<h6 id="logos-insignia-flags-or-emblems">Logos, insignia, flags, or emblems</h6>

Expand Down Expand Up @@ -3438,7 +3442,10 @@
<img src="images/logo-with-text.png" alt="WebPlatform.org" width="110" height="100"> and other developer resources

<xmp highlight="html">
<h2><img src="images/webplatform.png" alt="WebPlatform.org"> and other developer resources</h2>
<h2>
<img src="images/webplatform.png" alt="WebPlatform.org">
and other developer resources
</h2>
</xmp>

<p class="note">
Expand Down Expand Up @@ -3484,8 +3491,7 @@
text 'HTML' above and the numeral '5' prominent on the face of the shield.">
</p>
<p>
<strong>HTML</strong> is a language for structuring and presenting content
...
<strong>HTML</strong> is a language for structuring and presenting content...
</p>
</xmp>
</div>
Expand Down

0 comments on commit 60b4ace

Please sign in to comment.