diff --git a/examples/breadcrumb/index.html b/examples/breadcrumb/index.html
index 791d8177e7..586b98149a 100644
--- a/examples/breadcrumb/index.html
+++ b/examples/breadcrumb/index.html
@@ -2,83 +2,119 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>ARIA Breadcrumb Design Pattern Example</title>
+    <title>Breadcrumb Example | WAI-ARIA Authoring Practices 1.1</title>
+
     <link href="../css/core.css" rel="stylesheet">
     <link href="../css/table.css" rel="stylesheet">
+    <script src="../js/examples.js" type="text/javascript"></script>
     <link href="css/breadcrumb.css" rel="stylesheet">
   </head>
   <body>
     <main>
-      <h1>ARIA Breadcrumb Design Pattern Example</h1>
-      <p>
-        This page requires updates per
-        <a href="https://github.com/w3c/aria-practices/issues/187">issue 187.</a>
-        Please provide any additional feedback in this issue.
-      </p>
-      <p>This example shows the <a href="../../#breadcrumb">breadcrumb design pattern</a>.</p>
-
-	  <p>
-	    It is recommended authors use an ordered list to structure the list of links.
-	    Visual separators should be added through <abbr title="Cascading Style Sheets">CSS</abbr>.
-	  </p>
-
-      <div id="example">
-
+    <h1>Breadcrumb Example</h1>
+    <p>The following example demonstrates the <a href="../../#breadcrumb">breadcrumb design pattern</a>.</p>
+    <section>
+      <h2 id="ex_label">Example</h2>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <div id="ex1">
         <nav aria-label="Breadcrumb" class="breadcrumb">
           <ol>
             <li>
-              <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>
+              <a href="../../">WAI-ARIA Authoring Practices 1.1</a>
             </li>
             <li>
-              <a href="../../">Authoring Practices</a>
+              <a href="../../#aria_ex">Design Patterns</a>
             </li>
             <li>
-              <a href="../../#aria_ex">Design Pattern Examples</a>
+              <a href="../../#breadcrumb">Breadcrumb Pattern</a>
             </li>
             <li>
-              <a href="./index.html" aria-current="page">Breadcrumb</a>
+              <a href="./index.html" aria-current="page">Breadcrumb Example</a>
             </li>
           </ol>
         </nav>
-
       </div>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
 
-      <h2 id="id_a11yfeature">Accessibility Feature</h2>
-
-      <p>If markedup with a labelled <code>nav</code> element, the breadcrumb will be exposed as such.</p>
-
-      <h2 id="id_kbd">Keyboard Support</h2>
+    <section>
+      <h2>Accessibility Features</h2>
+      <ul>
+        <li>The set of links is structured using an ordered list .</li>
+        <li>The visual separators between links are added through <abbr title="Cascading Style Sheets">CSS</abbr> so they do not add unnecessary screen reader verbosity.</li>
+        <li>A labelled <code>nav</code> element identifies the structure and makes it easy to identify and locate.</li>
+      </ul>
+    </section>
 
+    <section>
+      <h2 id="kbd_label">Keyboard Support</h2>
       <p>No keyboard interaction needed.</p>
+    </section>
 
-      <h2 id="id_rps">ARIA Roles, Properties and States</h2>
-
-      <table aria-labelledby="id_rps">
+    <section>
+      <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
+      <table aria-labelledby="rps_label">
         <thead>
           <tr>
-            <th>Role</th>
-            <th>Property/State</th>
-            <th>Usage</th>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td></td>
-            <td><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-current"><code>aria-current</code></a> with a value of <code>page</code></td>
+            <th scope="row">
+              <code>aria-label=<q>Breadcrumb</q></code>
+            </th>
+            <td>
+              <code>nav</code>
+            </td>
             <td>
-              Mark the current page within the widget.
+              Provides a label that describes the type of navigation provided in the <code>nav</code> element.
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <th scope="row">
+              <code>aria-current=<q>page</q></code>
+            </th>
+            <td>
+              <code>a</code>
+            </td>
+            <td>
+              Applied to the last link in the set to indicate that it represents the current page.
             </td>
           </tr>
         </tbody>
       </table>
+    </section>
 
-      <script src="../js/examples.js" type="text/javascript"></script>
-
-      <h2>Source Code</h2>
-
+    <section>
+      <h2>Javascript and CSS Source Code</h2>
       <ul>
-        <li>CSS: <a href="css/breadcrumb.css" type="tex/css">breadcrumb.css</a></li>
+        <li>
+          CSS:
+          <a href="css/breadcrumb.css" type="tex/css">breadcrumb.css</a>
+        </li>
       </ul>
+    </section>
+
+    <section>
+      <h2 id="sc1_label">HTML Source Code</h2>
+      <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
+      <pre id="sc1"></pre>
+      <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
+      <script>
+        sourceCode.add('sc1', 'ex1');
+        sourceCode.make();
+      </script>
+    </section>
     </main>
+
+    <nav>
+      <a href="../../#breadcrumb">Breadcrumb Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
+    </nav>
   </body>
 </html>

Role	Property/State	Usage	Role	Attribute	Element	Usage
	`aria-current` with a value of `page`	+ `aria-label=Breadcrumb` +	+ `nav` +	- Mark the current page within the widget. + Provides a label that describes the type of navigation provided in the `nav` element. +
	+ `aria-current=page` +	+ `a` +	+ Applied to the last link in the set to indicate that it represents the current page.