diff --git a/_layouts/post.html b/_layouts/post.html
index d994dfae36c3b9d8c6bc3166fdfea4447b133191..df90a88e92703d8bae6021b6132e842ba8674888 100755
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -10,15 +10,18 @@ layout: default
             <small class="postdate">
               Published on
               <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time>
-              {% if page.last_updated %}
-                &ndash; Updated:
-                <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.last_updated | date: "%B %d, %Y" }}</time>
-              {% endif %}
             </small>
         {% endif %}
         {% if page.author %}
           <small class="postauthor">by {{ page.author }}</small>
         {% endif %}
+        {% if page.last_updated %}
+          &ndash; Updated:
+          <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.last_updated | date: "%B %d, %Y" }}</time>
+          {% if page.updated_by %}
+            <small class="postauthor">by {{ page.updated_by }}</small>
+          {% endif %}
+        {% endif %}
       </p>
     </header>
   {% endif %}
diff --git a/_posts/2013-01-14-aria-landmark-roles.md b/_posts/2013-01-14-aria-landmark-roles.md
index be87feaaebe9e1abdda74f6ced8fd453801ac070..3fe376cbcd2350559ccaa89636bd579cbad1d8ce 100644
--- a/_posts/2013-01-14-aria-landmark-roles.md
+++ b/_posts/2013-01-14-aria-landmark-roles.md
@@ -3,82 +3,150 @@ layout: post
 title: |
     Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping
 description: Use ARIA Landmark Roles to help assistive devices navigate the markup.
-# date:
-# last_updated:
+author: Erik Runyon
+date: 2013-01-14
+updated_by: Scott O'Hara
+last_updated: 2018-07-22
 categories:
   - Quick Tips
 ---
-[ARIA Landmark Roles](http://www.w3.org/TR/wai-aria/roles) help assistive device users navigate your site ([example video by Leone Watson on YouTube](https://youtu.be/IhWMou12_Vk)). Important roles to be aware of are:
+<a href="https://w3c.github.io/aria/#landmark_roles"><abbr title="Accessible Rich Internet Application">ARIA</abbr> Landmark Roles</a> can be helpful to assistive device users, as they can be used to orient a user to, and easily navigate, your website or application. For a quick video demonstration, check out ["How ARIA landmark roles help screen reader users"](https://youtu.be/IhWMou12_Vk), by [Léonie Watson](https://tink.uk/).
 
-* **banner** – Typically the “header” of your page that includes the name of the site
-* **search** – For the search form ([how to implement](http://adrianroselli.com/2015/08/where-to-put-your-search-role.html))
-* **main** – This would designate the main content area on your site
-* **navigation** – Use on any navigation list, typically on the nav element
-* **contentinfo** – Typically the "footer" of your page that contains information about the parent document such as copyrights and links to privacy statements
+## Landmark quick reference
+The following are common landmark roles that tend to be useful on many pages:
 
-To add a role to an element, simply add the "role" as an attribute:
+<dl>
+  <dt>banner</dt>
+  <dd>
+    <p>
+      Typically the “header” of your page, containing the name of the site/application along with other globally available content.
+    </p>
+  </dd>
+  <dt>search</dt>
+  <dd>
+    <p>
+      Use on the primary search form. Often, but not always, found within a `banner`.
+    </p>
+  </dd>
+  <dt>main</dt>
+  <dd>
+    <p>
+      Designates the primary content area of the current document. Only one main landmark should be exposed to users at a time.
+    </p>
+  </dd>
+  <dt>navigation</dt>
+  <dd>
+    <p>
+      Used to promote an area as a navigation. Combine with a unique <code>aria-label</code> to provide context of the navigation's purpose. e.g. <code>&lt;nav aria-label="primary"></code>.
+    </p>
+  </dd>
+  <dt>contentinfo</dt>
+  <dd>
+    <p>Typically the "footer" of your page that contains information about the parent document such as copyrights and links to privacy statements.</p>
+  </dd>
+</dl>
 
-    <header role="banner" class="site-header">
+Implementing landmarks in your documents is a straight forward process. Simply add the <code>role</code> attribute referencing the appropriate landmark value. For example:
+```
+<footer role="contentinfo">...</footer>
+```
 
-So, why do you see this warning when you [validate your html](https://validator.w3.org/)?
 
-<p class="info warning"><strong>Warning</strong>: <span>The <code>banner</code> role is unnecessary for element <code>header</code>.</span></p><p class="location">From line <span class="first-line">60</span>, column <span class="first-col">1712</span>; to line <span class="last-line">60</span>, column <span class="last-col">1758</span></p><p class="extract"><code>/a&gt;&lt;/div&gt; <b>&lt;header class="header fixed-pos" role="banner"&gt;</b>&lt;div c</code></p>
+## HTML5 Implicit Mappings of Landmark Roles
+Before you start adding <abbr>ARIA</abbr> roles to your HTML elements, you should be aware that many of these landmarks will be natively conveyed by proper HTML usage. For example, the following markup snippet will produce a warning in modern HTML and accessibility automated checkers:
 
-You see the warning ([consider fixing/changing](https://www.paciellogroup.com/blog/2015/08/short-note-on-html-conformance-checking/)) because, in HTML5, several of the landmark roles are implicit via the native structural elements.
+```
+<header role="banner" class="site-header">...</header>
+```
 
-**HTML5 Implicit Mappings**
+<figure class="figure-callout">
+  <samp>
+    <strong>Warning</strong>: <span>The <code>banner</code> role is unnecessary for element <code>header</code>.</span>
+    <br>
+    <code><b>&lt;header class="site-header" role="banner"&gt;</b>...</code>
+  </samp>
+  <figcaption>
+    A snippet of the warning output from the <a href="https://validator.w3.org/nu/">Nu HTML Validator</a>.
+  </figcaption>
+</figure>
 
-<table class="table table-striped table-bordered">
+The following table outlines the different <abbr>ARIA</abbr> landmarks, and the HTML5 element they are associated with.
+
+<table class="table-dividers">
+  <col width="35%">
   <thead>
     <tr>
-        <th>Landmark Role</th>
-        <th>HTML5 Structural Element</th>
+        <th scope="col">Landmark Role</th>
+        <th scope="col">HTML5 Structural Element</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-        <td>banner (if not within an article or section element)</td>
-        <td>
-          &lt;header&gt;
-        </td>
+      <td>banner</td>
+      <td>
+        <code>&lt;header&gt;</code>
+        <br>(if not a child of a sectioning element or the <code>main</code>.)
+      </td>
+    </tr>
+    <tr>
+      <td>complementary</td>
+      <td>
+        <code>&lt;aside&gt;</code>
+      </td>
     </tr>
     <tr>
-        <td>main</td>
-        <td>
-          &lt;main&gt; (only use one per page)
-        </td>
+      <td>contentinfo</td>
+      <td>
+        <code>&lt;footer&gt;</code>
+        <br>(if not a child of a sectioning element or the <code>main</code>.)
+      </td>
     </tr>
     <tr>
-        <td>navigation</td>
-        <td>
-          &lt;nav&gt;
-        </td>
+      <td>form</td>
+      <td>
+        <code>&lt;form&gt;</code>
+        <br>(if provided an accessible name via <code>aria-label</code> or <code>aria-labelledby</code>)
+      </td>
     </tr>
     <tr>
-        <td>contentinfo</td>
-        <td>
-          &lt;footer&gt;
-        </td>
+      <td>main</td>
+      <td>
+        <code>&lt;main&gt;</code>
+        <br>(only use one per page)
+      </td>
     </tr>
     <tr>
-        <td>article</td>
-        <td>
-          &lt;article&gt;
-        </td>
+      <td>navigation</td>
+      <td>
+        <code>&lt;nav&gt;</code>
+      </td>
     </tr>
     <tr>
-        <td>complementary</td>
-        <td>
-          &lt;aside&gt;
-        </td>
+      <td>region</td>
+      <td>
+        <code>&lt;section&gt;</code>
+        <br> (if provided an accessible name via <code>aria-label</code> or <code>aria-labelledby</code>)
+      </td>
     </tr>
     <tr>
-        <td>region</td>
-        <td>
-          &lt;section&gt;
-        </td>
+      <td>search</td>
+      <td>
+        none
+      </td>
     </tr>
   </tbody>
 </table>
 
-The good news is most modern [desktop browsers](http://stevefaulkner.github.io/html-mapping-tests/) (except IE) support this mapping. However, [iOS Safari](https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks-example.html) does not. OUCH! For now, it’s probably best to implement the landmark roles and ignore these warnings.
\ No newline at end of file
+The majority of [modern browsers](http://www.html5accessibility.com/) (except <abbr title="Internet Explorer">IE</abbr>) support these mappings. But it's always beneficial to run your own tests to ensure the appropriate landmark role is being appropriately exposed to assistive technology.
+
+For example, as of July 2018, Safari and VoiceOver on macOS High Sierra do not properly expose the <code>contentinfo</code> role from a <code>footer</code> element. When presented with situations like this, ignoring conformance warnings, and adding a redundant role to an element, may be preferred to not exposing the correct landmark information.
+
+
+## Additional references
+For more information about landmarks and other concepts mentioned in this article, you can check out the following resources:
+
+* [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
+* [Where to put your search role](http://adrianroselli.com/2015/08/where-to-put-your-search-role.html)
+* [HTML Conformance checking](https://developer.paciellogroup.com/blog/2015/08/short-note-on-html-conformance-checking/)
+* [W3C: Using ARIA landmarks to identify regions of a page](https://www.w3.org/TR/WCAG20-TECHS/ARIA11.html)
+* [W3C: Using ARIA](https://www.w3.org/TR/using-aria/)
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 2edbdcf5afd72bddd2507e85dabede284b3fda06..a916dfefefcb9f0b8ed72dbf2e54fe8a7c5e0862 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -268,3 +268,21 @@ $mobile: 24em;
     margin-bottom: 1em;
   }
 }
+
+.figure-callout {
+  border: 1px solid rgba(0,0,0,.625);
+  padding: 1em;
+  margin-bottom: 1.5em;
+}
+
+.table-dividers {
+  margin-bottom: 1.5em;
+
+  th {
+    font-weight: bold;
+  }
+
+  td, th {
+    border-bottom: 1px solid rgba(0,0,0,.35);
+  }
+}