Skip to content
Open
17 changes: 15 additions & 2 deletions understanding/20/language-of-parts.html
Original file line number Diff line number Diff line change
Expand Up @@ -141,14 +141,27 @@ <h3>Alternative language links</h3>
...
&lt;li&gt;&lt;a href="..." lang="zh-hant"&gt;繁體中文&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>

<h3>Element's content used as accessible name</h3>
<p>When content is used as the accessible name of an element, the correct language should be specified on that element. This helps assistive technologies pronounce it accurately.</p>
<p>This link may be announced with an English accent, mispronouncing "Español".</p>
<p><code class="language-html">&lt;a href="/es/"&gt;&lt;span lang="es"&gt;Español&lt;/span&gt;&lt;/a&gt;</code></p>
<p>This version correctly applies the Spanish language to the element, ensuring "Español" is pronounced with a Spanish accent.</p>
<p><code class="language-html">&lt;a href="/es/" lang="es"&gt;&lt;span&gt;Español&lt;/span&gt;&lt;/a&gt;</code></p>

<h3>Element's content in multiple languages used as accessible name</h3>
<p>When content includes multiple languages, it's acceptable to set the parent element to the primary language, as long as any child elements in a different language have the appropriate language set.</p>
<p>This example assumes the page’s default language is English. The main text of the link is in English, but it includes the original Italian title of a poem. The Italian portion is correctly marked with lang="it".</p>
<p><code class="language-html">&lt;a href="/la-divina-commedia.html"&gt;Read this book: &lt;span lang="it"&gt;La Divina Commedia&lt;/span&gt;&lt;/a&gt;</code></p>


<h3>"Podcast" used in a French sentence</h3>
<p>Because "podcast" is part of the vernacular of the immediately surrounding text in the following excerpt, "<span lang="fr">À l'occasion de l'exposition "Energie éternelle. 1500 ans d'art indien", le Palais des Beaux-Arts de Bruxelles a lancé son premier podcast. Vous pouvez télécharger ce podcast au format M4A et MP3</span>", no indication of language change is required.</p>

<h3>The element's content and attribute values are in different languages</h3>
<p>This example assumes that the page's default content is in English. The link's <code class="language-html">title</code> attribute is in English, but the nested <code class="language-html">span</code> element that contains the word <span lang="es">Español</span> has a <code>lang="es"</code> attribute.</p>
<p>This example assumes that the page's default content is in English. The link's <code class="language-html">title</code> attribute is in English, but the nested <code class="language-html">span</code> element that contains the words <span lang="it">La Divina Commedia</span> has a <code>lang="it"</code> attribute.</p>

<p><code class="language-html">&lt;a title="Spanish" href="qa-html-language-declarations-es.html"&gt;&lt;span lang="es"&gt;Español&lt;/span&gt;&lt;/a&gt;</code></p>
<p><code class="language-html">&lt;a title="Opens in a new window" href="/la-divina-commedia.html"&gt;Read this book: &lt;span lang="it"&gt;La Divina Commedia&lt;/span&gt;&lt;/a&gt;</code></p>
</section>

<section id="resources">
Expand Down