diff --git a/UX-Guide-Metadata/bin/extract-ids-from-principles.xsl b/UX-Guide-Metadata/bin/extract-ids-from-principles.xsl
new file mode 100644
index 00000000..8ced236c
--- /dev/null
+++ b/UX-Guide-Metadata/bin/extract-ids-from-principles.xsl
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+
+    <xsl:output method="xml" indent="yes"/>
+
+    <xsl:template match="/">
+        <strings>
+            <xsl:apply-templates select="//*[@data-localization-id]"/>
+        </strings>
+    </xsl:template>
+    
+    <xsl:template match="//*[@data-localization-id]">
+        <string>
+            <id><xsl:value-of select="@data-localization-id"/></id>
+            <mode><xsl:value-of select="@data-localization-mode"/></mode>
+            <value><xsl:value-of select="normalize-space(.)"/></value>
+        </string>
+    </xsl:template>
+    
+</xsl:stylesheet>
diff --git a/UX-Guide-Metadata/bin/extract-ids-from-techniques.xsl b/UX-Guide-Metadata/bin/extract-ids-from-techniques.xsl
index eb9e0f15..8fd57a4b 100644
--- a/UX-Guide-Metadata/bin/extract-ids-from-techniques.xsl
+++ b/UX-Guide-Metadata/bin/extract-ids-from-techniques.xsl
@@ -12,7 +12,7 @@
     <xsl:template match="xhtml:code[@id]">
         <string>
             <id><xsl:value-of select="@id"/></id>
-            <value><xsl:value-of select="substring(., 2, string-length(.) - 2)"/></value>
+            <value><xsl:value-of select="normalize-space(substring(., 2, string-length(.) - 2))"/></value>
         </string>
     </xsl:template>
     
diff --git a/UX-Guide-Metadata/bin/strings-crosscheck.sh b/UX-Guide-Metadata/bin/strings-crosscheck.sh
index 49114ebe..74982703 100755
--- a/UX-Guide-Metadata/bin/strings-crosscheck.sh
+++ b/UX-Guide-Metadata/bin/strings-crosscheck.sh
@@ -23,38 +23,44 @@ basedir=$(dirname "$basedir")
 tmpdir=$(mktemp -d)
 
 # input files
+principles="$basedir/../draft/principles/index.html"
+xslt_principles="$basedir/extract-ids-from-principles.xsl"
 epub_techniques="$basedir/../draft/techniques/epub-metadata/index.html"
 onix_techniques="$basedir/../draft/techniques/onix-metadata/index.html"
-xslt="$basedir/extract-ids-from-techniques.xsl"
-canonical_json="$basedir/../draft/localizations/en-US/display_guide_vocabulary_w3c_en-US.json"
+xslt_techniques="$basedir/extract-ids-from-techniques.xsl"
+#canonical_json="$basedir/../draft/localizations/en-US/display_guide_vocabulary_w3c_en-US.json"
 output_dir="$basedir/../draft/localizations"
 
 # performs XSLT transformation on XHTML files
-xsltproc "$xslt" "$epub_techniques" > "$output_dir/epub-metadata-strings.xml"
-xsltproc "$xslt" "$onix_techniques" > "$output_dir/onix-metadata-strings.xml"
+xsltproc "$xslt_principles" "$principles" > "$output_dir/principles-strings.xml"
+xsltproc "$xslt_techniques" "$epub_techniques" > "$output_dir/epub-metadata-strings.xml"
+xsltproc "$xslt_techniques" "$onix_techniques" > "$output_dir/onix-metadata-strings.xml"
 
 # converts XML files to CSV
+java -jar "$basedir/libs/xml2csv-1.1.jar" "$output_dir/principles-strings.xml" > "$output_dir/principles-strings.csv"
 java -jar "$basedir/libs/xml2csv-1.1.jar" "$output_dir/epub-metadata-strings.xml" > "$output_dir/epub-metadata-strings.csv"
 java -jar "$basedir/libs/xml2csv-1.1.jar" "$output_dir/onix-metadata-strings.xml" > "$output_dir/onix-metadata-strings.csv"
 
 # converts JSON file to CSV
-json_in_csv=$(jq -r '
-  to_entries[] | 
-  select(.value | type == "object" and (has("descriptive") or has("compact"))) | 
-  [.key, .value.descriptive // "", .value.compact // ""] | 
-  @csv
-' "$canonical_json")
-echo '"key","descriptive","compact"'  > "$output_dir/canonical-json-strings.csv"
-echo "$json_in_csv" >> "$output_dir/canonical-json-strings.csv"
+# json_in_csv=$(jq -r '
+#   to_entries[] | 
+#   select(.value | type == "object" and (has("descriptive") or has("compact"))) | 
+#   [.key, .value.descriptive // "", .value.compact // ""] | 
+#   @csv
+# ' "$canonical_json")
+# echo '"key","descriptive","compact"'  > "$output_dir/canonical-json-strings.csv"
+# echo "$json_in_csv" >> "$output_dir/canonical-json-strings.csv"
 
 # converts CSV files to Excel
+ssconvert "$output_dir/principles-strings.csv" "$output_dir/principles-strings.xlsx"
 ssconvert "$output_dir/epub-metadata-strings.csv" "$output_dir/epub-metadata-strings.xlsx"
 ssconvert "$output_dir/onix-metadata-strings.csv" "$output_dir/onix-metadata-strings.xlsx"
-ssconvert "$output_dir/canonical-json-strings.csv" "$output_dir/canonical-json-strings.xlsx"
+# ssconvert "$output_dir/canonical-json-strings.csv" "$output_dir/canonical-json-strings.xlsx"
 
 # cleanup
+rm -f "$output_dir/principles-strings.csv"
 rm -f "$output_dir/epub-metadata-strings.csv"
 rm -f "$output_dir/onix-metadata-strings.csv"
-rm -f "$output_dir/canonical-json-strings.csv"
+# rm -f "$output_dir/canonical-json-strings.csv"
 
 echo "Operations completed. Need to manually update Excel file localizations/crosscheck strings epub-onix-canonical_json.xlsx"
\ No newline at end of file
diff --git a/UX-Guide-Metadata/draft/localizations/crosscheck strings epub-onix-canonical_json.xlsx b/UX-Guide-Metadata/draft/localizations/crosscheck strings epub-onix-canonical_json.xlsx
index 5cd7c8e8..1a99eb90 100644
Binary files a/UX-Guide-Metadata/draft/localizations/crosscheck strings epub-onix-canonical_json.xlsx and b/UX-Guide-Metadata/draft/localizations/crosscheck strings epub-onix-canonical_json.xlsx differ
diff --git a/UX-Guide-Metadata/draft/principles/index.html b/UX-Guide-Metadata/draft/principles/index.html
index 6a3e41da..1bdb617c 100644
--- a/UX-Guide-Metadata/draft/principles/index.html
+++ b/UX-Guide-Metadata/draft/principles/index.html
@@ -259,7 +259,7 @@ <h2>Key accessibility information</h2>
 					follows.</p>
 			</div>
 			<section id="visual-adjustments">
-				<h3 id="Visual-adjustments-title">Visual adjustments</h3>
+				<h3 data-localization-id="visual-adjustments-title">Visual adjustments</h3>
 
 				<div class="note">
 					<p>This key information should always be displayed, even if there is no metadata (See  the examples where 
@@ -288,22 +288,22 @@ <h4>Examples</h4>
 
 					<aside class="example" title="Descriptive explanations">
 						<ul>
-							<li id="visual-adjustments-modifiable-descriptive">Appearance of the text and page layout can be modified according to the capabilities of
+							<li data-localization-id="visual-adjustments-modifiable" data-localization-mode="descriptive">Appearance of the text and page layout can be modified according to the capabilities of
 								the reading system (font family and font size, spaces between paragraphs, sentences,
 								words, and letters, as well as color of background and text).</li>
-							<li id="visual-adjustments-unmodifiable-descriptive">Text and page layout cannot be modified. The reading experience is close to a print
+							<li data-localization-id="visual-adjustments-unmodifiable" data-localization-mode="descriptive">Text and page layout cannot be modified. The reading experience is close to a print
 								version. Reading systems can still provide zooming options.</li>
-							<li id="visual-adjustments-unknown-descriptive">Ability to modify the appearance is not known.</li>
+							<li data-localization-id="visual-adjustments-unknown" data-localization-mode="descriptive">Ability to modify the appearance is not known.</li>
 						</ul>
 					</aside>
 
 					<aside class="example" title="Compact explanations">
 						<ul>
-							<li id="visual-adjustments-modifiable-compact">Appearance can be modified.</li>
+							<li data-localization-id="visual-adjustments-modifiable" data-localization-mode="compact">Appearance can be modified.</li>
 							<!--if Display transformability is present-->
-							<li id="visual-adjustments-unmodifiable-compact">Appearance cannot be modified.</li>
+							<li data-localization-id="visual-adjustments-unmodifiable" data-localization-mode="compact">Appearance cannot be modified.</li>
 							<!--if display transformability is not present and text on visual is present-->
-							<li id="visual-adjustments-unknown-compact">Ability to modify the appearance is not known.</li>
+							<li data-localization-id="visual-adjustments-unknown" data-localization-mode="compact">Ability to modify the appearance is not known.</li>
 							<!--if neither display transformability nor text on visual are presents-->
 						</ul>
 					</aside>
@@ -322,7 +322,7 @@ <h4>Display techniques for Visual adjustments support</h4>
 
 
 			<section id="supports-nonvisual-reading">
-				<h3 id="nonvisual-reading-title">Supports nonvisual reading</h3>
+				<h3 data-localization-id="nonvisual-reading-title">Supports nonvisual reading</h3>
 
 				<div class="note">
 					<p>This key information should always be displayed, even if there is no metadata (See  the examples where 
@@ -352,22 +352,22 @@ <h4>Examples</h4>
 
 					<aside class="example" title="Descriptive explanations">
 						<ul>
-							<li id="nonvisual-reading-readable-descriptive">All content is available in generated read aloud speech and electronic braille.</li>
-							<li id="nonvisual-reading-may-not-fully-descriptive">Portions of the content may not be available in generated read aloud speech and
+							<li data-localization-id="nonvisual-reading-readable" data-localization-mode="descriptive">All content is available in generated read aloud speech and electronic braille.</li>
+							<li data-localization-id="nonvisual-reading-may-not-fully" data-localization-mode="descriptive">Portions of the content may not be available in generated read aloud speech and
 								electronic braille.</li>
-							<li id="nonvisual-reading-not-fully-descriptive">Not all of the content will be available in generated read aloud speech and electronic
+							<li data-localization-id="nonvisual-reading-not-fully" data-localization-mode="descriptive">Not all of the content will be available in generated read aloud speech and electronic
 								braille.</li>
-							<!--To be Confirmed (see https://github.com/w3c/publ-a11y/issues/367)--><li id="nonvisual-reading-unknown">It is not known if the content will be available in generated read aloud speech and electronic
+							<!--To be Confirmed (see https://github.com/w3c/publ-a11y/issues/367)--><li data-localization-id="nonvisual-reading-unknown">It is not known if the content will be available in generated read aloud speech and electronic
 								braille.</li>
 						</ul>
 					</aside>
 
 					<aside class="example" title="Compact explanations">
 						<ul>
-							<li id="nonvisual-reading-readable-compact">Readable in read aloud and braille.</li>
-							<li id="nonvisual-reading-may-not-fully-compact">May not be fully readable in read aloud and braille.</li>
-							<li id="nonvisual-reading-not-fully-compact">Not fully readable in read aloud and braille.</li>
-							<!--To be Confirmed (see https://github.com/w3c/publ-a11y/issues/367)--><li id="nonvisual-reading-unknown-compact">Not known if readable in read aloud and braille</li>
+							<li data-localization-id="nonvisual-reading-readable" data-localization-mode="compact">Readable in read aloud and braille.</li>
+							<li data-localization-id="nonvisual-reading-may-not-fully" data-localization-mode="compact">May not be fully readable in read aloud and braille.</li>
+							<li data-localization-id="nonvisual-reading-not-fully" data-localization-mode="compact">Not fully readable in read aloud and braille.</li>
+							<!--To be Confirmed (see https://github.com/w3c/publ-a11y/issues/367)--><li data-localization-id="nonvisual-reading-unknown" data-localization-mode="compact">Not known if readable in read aloud and braille</li>
 						</ul>
 					</aside>
 				</section>
@@ -384,7 +384,7 @@ <h4>Display techniques  for nonvisual reading support</h4>
 				</section>
 			</section>
 <section id="conformance-group">
-				<h3 id="conformance-title">Conformance</h3>
+				<h3 data-localization-id="conformance-title">Conformance</h3>
 
 				<div class="note">
 					<p>This key information should always be displayed, even if there is no metadata (See  the examples where 
@@ -473,30 +473,30 @@ <h4>Examples</h4>
 
 					<aside class="example"
 						title="Conformance statement that claims to meet accepted accessibility standards followed by detailed conformance information">
-						<p id="conformance-aa-compact_1">This publication meets accepted accessibility standards.</p>
+						<p data-localization-id="conformance-aa" data-localization-mode="compact">This publication meets accepted accessibility standards.</p>
 						<p>
-							<span id="conformance-certification-info-compact_1">The publication was certified</span> 
-							<span id="conformance-certifier-prefix-compact_1">by</span> Foo's Accessibility Testing 
+							<span data-localization-id="conformance-certification-info" data-localization-mode="compact">The publication was certified</span> 
+							<span data-localization-id="conformance-certifier-prefix" data-localization-mode="compact">by</span> Foo's Accessibility Testing 
 						</p>
 						<p>
-							<span id="conformance-certifier-credentials-prefix-compact_1">The certifier's credential is</span> 
+							<span data-localization-id="conformance-certifier-credentials-prefix" data-localization-mode="compact">The certifier's credential is</span> 
 							"Enterprise Accessibility Rating."
 						</p>
 
-						<p id="detailled-conformance-information_1">Detailed Conformance Information:</p>
+						<p data-localization-id="conformance-details">Detailed Conformance Information:</p>
 						<p>
-							<span id="conformance-claim_1">This publication claims to meet</span> 
-							<span id="conformance-epub-accessibility-1-1">EPUB Accessibility 1.1</span> 
-							<span id="conformance-wcag-2-1-descriptive">Web Accessibility Content Guidelines (WCAG) 2.1</span> 
-							<span id="conformance-level-aa">Level AA.</span> 
-							<span id="conformance-certification-info-descriptive_1">The publication was certified</span> 
-							<span id="conformance-certification-date-prefix_1">on</span> 
+							<span data-localization-id="conformance-claim">This publication claims to meet</span> 
+							<span data-localization-id="conformance-epub-accessibility-1-1">EPUB Accessibility 1.1</span> 
+							<span data-localization-id="conformance-wcag-2-1" data-localization-mode="descriptive">Web Accessibility Content Guidelines (WCAG) 2.1</span> 
+							<span data-localization-id="conformance-level-aa">Level AA.</span> 
+							<span data-localization-id="conformance-certification-info" data-localization-mode="descriptive">The publication was certified</span> 
+							<span data-localization-id="conformance-certification-date-prefix">on</span> 
 							2021-09-07 
-							<span id="conformance-certifier-prefix-descriptive_1">by</span> 
+							<span data-localization-id="conformance-certifier-prefix" data-localization-mode="descriptive">by</span> 
 							Foo's Accessibility Testing 
-							<span id="conformance-certifier-credentials-prefix_1">with a credential of</span>
+							<span data-localization-id="conformance-certifier-credentials-prefix">with a credential of</span>
 							"Enterprise Accessibility Rating." 
-							<span id="conformance-certifier-report_1">For more information, refer to the 
+							<span data-localization-id="conformance-certifier-report">For more information, refer to the 
 							<a href="http://www.example.com/a11y/report/9780000000001">certifier's report.</a></span>
 						</p>
 
@@ -504,26 +504,26 @@ <h4>Examples</h4>
 
 					<aside class="example"
 						title="Conformance statement that claims to meet minimum accessibility standards followed by detailed conformance information">
-						<p id="conformance-a-compact_2">This publication meets minimum accessibility standards.</p>
+						<p data-localization-id="conformance-a" data-localization-mode="compact">This publication meets minimum accessibility standards.</p>
 						<p>
-							<span id="conformance-certification-info-compact_2">The publication was certified</span> 
-							<span id="conformance-certifier-prefix-compact_2">by</span> Foo's Accessibility Testing 
+							<span data-localization-id="conformance-certification-info" data-localization-mode="compact">The publication was certified</span> 
+							<span data-localization-id="conformance-certifier-prefix" data-localization-mode="compact">by</span> Foo's Accessibility Testing 
 						</p>
 
-						<p id="detailled-conformance-information_2">Detailed Conformance Information:</p>
+						<p data-localization-id="conformance-details">Detailed Conformance Information:</p>
 						<p>
-							<span id="conformance-claim_2">This publication claims to meet</span> 
-							<span id="conformance-epub-accessibility-1-0"> EPUB Accessibility 1.0 </span> 
-							<span id="conformance-wcag-2-0-descriptive">Web Content Accessibility Guidelines (WCAG) 2.0</span> 
-							<span id="conformance-level-a">Level A.</span> 
-							<span id="conformance-certification-info-descriptive_2">The publication was certified</span> 
-							<span id="conformance-certification-date-prefix_2">on</span> 
+							<span data-localization-id="conformance-claim">This publication claims to meet</span> 
+							<span data-localization-id="conformance-epub-accessibility-1-0"> EPUB Accessibility 1.0 </span> 
+							<span data-localization-id="conformance-wcag-2-0" data-localization-mode="descriptive">Web Content Accessibility Guidelines (WCAG) 2.0</span> 
+							<span data-localization-id="conformance-level-a">Level A.</span> 
+							<span data-localization-id="conformance-certification-info" data-localization-mode="descriptive">The publication was certified</span> 
+							<span data-localization-id="conformance-certification-date-prefix">on</span> 
 							2021-09-07 
-							<span id="conformance-certifier-prefix-descriptive_2">by</span> 
+							<span data-localization-id="conformance-certifier-prefix" data-localization-mode="descriptive">by</span> 
 							Foo's Accessibility Testing 
-							<span id="conformance-certifier-credentials-prefix_2">with a credential of</span>
+							<span data-localization-id="conformance-certifier-credentials-prefix">with a credential of</span>
 							"Enterprise Accessibility Rating." 
-							<span id="conformance-certifier-report_2">For more information, refer to the 
+							<span data-localization-id="conformance-certifier-report">For more information, refer to the 
 							<a href="http://www.example.com/a11y/report/9780000000001">certifier's report.</a></span>
 						</p>
 					</aside>
@@ -570,7 +570,7 @@ <h4>Display techniques for conformance support</h4>
 
 			
 			<section id="pre-recorded-audio">
-				<h3 id="pre-recorded-audio-title">Pre-recorded audio</h3>
+				<h3 data-localization-id="pre-recorded-audio-title">Pre-recorded audio</h3>
 
 				<div class="note">
 					<p>This key information can be hidden if metadata is missing.</p>
@@ -598,17 +598,17 @@ <h4>Examples</h4>
 
 					<aside class="example" title="Descriptive explanations">
 						<ul>
-							<li id="pre-recorded-audio-only-descriptive">Audiobook with no text alternative.</li>
-							<li id="pre-recorded-audio-complementary-descriptive">Contents available as complementary audio and text.</li>
-							<li id="pre-recorded-audio-synchronized-descriptive">All the content is available as pre-recorded audio synchronized with text.</li>
+							<li data-localization-id="pre-recorded-audio-only" data-localization-mode="descriptive">Audiobook with no text alternative.</li>
+							<li data-localization-id="pre-recorded-audio-complementary" data-localization-mode="descriptive">Contents available as complementary audio and text.</li>
+							<li data-localization-id="pre-recorded-audio-synchronized" data-localization-mode="descriptive">All the content is available as pre-recorded audio synchronized with text.</li>
 						</ul>
 					</aside>
 
 					<aside class="example" title="Compact explanations">
 						<ul>
-							<li id="pre-recorded-audio-only-compact">Audio only.</li>
-							<li id="pre-recorded-audio-complementary-compact">Complementary audio and text.</li>
-							<li id="pre-recorded-audio-synchronized-compact">Synchronized audio and text.</li>
+							<li data-localization-id="pre-recorded-audio-only" data-localization-mode="compact">Audio only.</li>
+							<li data-localization-id="pre-recorded-audio-complementary" data-localization-mode="compact">Complementary audio and text.</li>
+							<li data-localization-id="pre-recorded-audio-synchronized" data-localization-mode="compact">Synchronized audio and text.</li>
 						</ul>
 					</aside>
 				</section>
@@ -625,7 +625,7 @@ <h4>Display techniques for pre-recorded audio support</h4>
 			</section>
 
 			<section id="navigation">
-				<h3 id="navigation-title">Navigation</h3>
+				<h3 data-localization-id="navigation-title">Navigation</h3>
 
 				<div class="note">
 					<p>This key information can be hidden if metadata is missing.</p>
@@ -652,20 +652,20 @@ <h4>Examples</h4>
 
 					<aside class="example" title="Descriptive explanations">
 						<ul>
-							<li id="navigation-toc-descriptive">Contains a table of contents that provides direct access to all chapters of the text via links.</li>
-							<li id="navigation-index-descriptive">Index provides links to item references. </li>
-							<li id="navigation-landmarks-descriptive">Landmarks provide quick access to main parts of the book.</li>
-							<li id="navigation-page-descriptive">A page list enables users to navigate directly to pages from the  identified print source version.</li>
+							<li data-localization-id="navigation-toc" data-localization-mode="descriptive">Contains a table of contents that provides direct access to all chapters of the text via links.</li>
+							<li data-localization-id="navigation-index" data-localization-mode="descriptive">Index provides links to item references. </li>
+							<li data-localization-id="navigation-landmarks" data-localization-mode="descriptive">Landmarks provide quick access to main parts of the book.</li>
+							<li data-localization-id="navigation-page-navigation" data-localization-mode="descriptive">A page list enables users to navigate directly to pages from the  identified print source version.</li>
 						</ul>
 					</aside>
 
 					<aside class="example" title="Compact explanation">
-						<p><span id="navigation-intro-compact">Navigation by</span> 
-							<span id="navigation-toc-compact">table of contents</span>, 
-							<span id="navigation-index-compact">index</span>, 
-							<span id="navigation-landmarks-compact">landmarks</span>
-							<span id="join-array-to-comma-list_1">, and </span>
-							<span id="navigation-page-compact">page list.</span></p>
+						<p><span data-localization-id="navigation-intro" data-localization-mode="compact">Navigation by</span> 
+							<span data-localization-id="navigation-toc" data-localization-mode="compact">table of contents</span>, 
+							<span data-localization-id="navigation-index" data-localization-mode="compact">index</span>, 
+							<span data-localization-id="navigation-landmarks" data-localization-mode="compact">landmarks</span>
+							<span data-localization-id="join-array-and">, and </span>
+							<span data-localization-id="navigation-page-navigation" data-localization-mode="compact">page list.</span></p>
 					</aside>
 				</section>
 
@@ -679,7 +679,7 @@ <h4>Display techniques for navigation support</h4>
 				</section>
 			</section>
 			<section id="charts-diagrams-and-formulas">
-				<h3 id="charts-diagrams-formulas-title">Charts, diagrams, and formulas</h3>
+				<h3 data-localization-id="charts-diagrams-formulas-title">Charts, diagrams, and formulas</h3>
 
 				<div class="note">
 					<p>This key information can be hidden if metadata is missing.</p>
@@ -703,11 +703,11 @@ <h4>Examples</h4>
 					<aside class="example" title="Descriptive explanations">
 						<ul>
 							<li>
-								<span id="charts-diagrams-formulas-extended-descriptive">Charts and diagrams are present and described by extended descriptions.</span>
-								<span id="charts-diagrams-formulas-accessible-math-descriptive">Contains math formulas in accessible format.</span>
+								<span data-localization-id="charts-diagrams-formulas-extended" data-localization-mode="descriptive">Charts and diagrams are present and described by extended descriptions.</span>
+								<span data-localization-id="charts-diagrams-formulas-accessible-math" data-localization-mode="descriptive">Contains math formulas in accessible format.</span>
 							</li>
 							<li>
-								<span id="charts-diagrams-formulas-accessible-unknown-descriptive"> formulas, charts, and diagrams without any information about the accessibility of this content.</span>
+								<span data-localization-id="charts-diagrams-formulas-unknown" data-localization-mode="descriptive"> formulas, charts, and diagrams without any information about the accessibility of this content.</span>
 							</li>
 						</ul>
 					</aside>
@@ -715,10 +715,10 @@ <h4>Examples</h4>
 					<aside class="example" title="Compact explanations">
 						<ul>
 							<li>
-								<span id="charts-diagrams-formulas-extended-compact">Charts and diagrams have extended descriptions.</span>
-								<span id="charts-diagrams-formulas-accessible-math-compact"> Accessible math content.</span></li>
+								<span data-localization-id="charts-diagrams-formulas-extended" data-localization-mode="compact">Charts and diagrams have extended descriptions.</span>
+								<span data-localization-id="charts-diagrams-formulas-accessible-math" data-localization-mode="compact"> Accessible math content.</span></li>
 							<li>
-								<span id="charts-diagrams-formulas-accessible-unknown-compact">of formulas, charts, and diagrams unknown.</span>
+								<span data-localization-id="charts-diagrams-formulas-unknown" data-localization-mode="compact">of formulas, charts, and diagrams unknown.</span>
 							</li>
 						</ul>
 					</aside>
@@ -737,7 +737,7 @@ <h4>Display techniques for charts, diagrams, and formulas support</h4>
 			</section>
 
 			<section id="hazards">
-				<h3 id="hazards-title">Hazards</h3>
+				<h3 data-localization-id="hazards-title">Hazards</h3>
 
 				<div class="note">
 					<p>This key information can be hidden if metadata is missing.</p>
@@ -761,25 +761,25 @@ <h4>Examples</h4>
 
 					<aside class="example" title="Descriptive explanations">
 						<ul>
-							<li><span id="hazards-none-descriptive">The publication contains no hazards.</span></li>
-							<li><span id="hazards-flashing-descriptive">The publication contains </span>
-								<span id="hazards-sound-descriptive">rapidly changing lights,</span>
-								<span id="hazards-motion-descriptive">visual stimuli or simulated movements, </span>
-								<span id="hasards-explanatory-descriptive">which can cause discomfort, distraction, photosensitive seizures, or motion sickness.</span></li>
-							<li><span id="hazards-unknown-descriptive">No information about possible hazards.</span></li>
+							<li><span data-localization-id="hazards-none" data-localization-mode="descriptive">The publication contains no hazards.</span></li>
+							<li><span data-localization-id="hazards-flashing" data-localization-mode="descriptive">The publication contains </span>
+								<span data-localization-id="hazards-sound" data-localization-mode="descriptive">rapidly changing lights,</span>
+								<span data-localization-id="hazards-motion" data-localization-mode="descriptive">visual stimuli or simulated movements, </span>
+								<span data-localization-id="hasards-explanatory" data-localization-mode="descriptive">which can cause discomfort, distraction, photosensitive seizures, or motion sickness.</span></li>
+							<li><span data-localization-id="hazards-unknown" data-localization-mode="descriptive">No information about possible hazards.</span></li>
 						</ul>
 					</aside>
 
 					<aside class="example" title="Compact explanations">
 						<ul>
 							<li>
-								<span id="hazards-none-compact"></span>No hazards.</li>
+								<span data-localization-id="hazards-none" data-localization-mode="compact"></span>No hazards.</li>
 							<li>
-								<span id="hazards-flashing-compact">Flashing</span>
-								<span id="join-array-to-comma-list_2">, and </span>
-								<span id="hazards-motion-compact">motion simulation hazards.</span></li>
+								<span data-localization-id="hazards-flashing" data-localization-mode="compact">Flashing</span>
+								<span data-localization-id="join-array-and">, and </span>
+								<span data-localization-id="hazards-motion" data-localization-mode="compact">motion simulation hazards.</span></li>
 							<li>
-								<span id="hazards-unknown-compact">No information about hazards.</span></li>		
+								<span data-localization-id="hazards-unknown" data-localization-mode="compact">No information about hazards.</span></li>		
 						</ul>
 					</aside>
 				</section>
@@ -796,7 +796,7 @@ <h4>Display techniques for hazards reporting</h4>
 			</section>
 
 			<section id="accessibility-summary">
-				<h3 id="accessibility-summary-title">Accessibility summary</h3>
+				<h3 data-localization-id="accessibility-summary-title">Accessibility summary</h3>
 
 				<div class="note">
 					<p>This key information can be hidden if metadata is missing.</p>
@@ -878,7 +878,7 @@ <h4> Display techniques for legal considerations</h4>
 			
 </section>
 			<section id="additional-accessibility-information">
-				<h3 id="additional-accessibility-information-title">Additional accessibility information</h3>
+				<h3 data-localization-id="additional-accessibility-information-title">Additional accessibility information</h3>
 
 				<div class="note">
 					<p>This key information can be hidden if metadata is missing.</p>