Use landmark roles to improve navigation for screen reader users

404.html

@@ -4,7 +4,7 @@
 paginated: false
 ---
 
-<section class="error-page grid-container">
+<main class="error-page grid-container">
   <div class="grid-y">
     <div class="cell large-8 large-offset-2 medium-10 medium-offset-1">
       <h1 class="text-left">Sorry you've not found what you're looking for.</h1>
@@ -13,4 +13,4 @@ <h1 class="text-left">Sorry you've not found what you're looking for.</h1>
       <p>Head back to our <a href="http://www.scottlogic.com/">Homepage</a> or <a href="http://blog.scottlogic.com/">Blog</a> and you'll find simple paths to all our most interesting content.</p>
     </div>
   </div>
-</section>
+</main>

_includes/author_list.html

@@ -1,6 +1,6 @@
 {% assign currentAuthorName = include.currentAuthorName %}
-<div class="author-list cell">
-    <h4>Authors</h4>
+<aside aria-labelledby="author-list" class="author-list cell">
+    <h4 id="author-list">Authors</h4>
     <ul>
         {% comment %}
             Create an array of maps to make the full name of authors the top level property.
@@ -34,4 +34,4 @@ <h4>Authors</h4>
             {% endif %}
         {% endfor %}
     </ul>
-</div>
+</aside>

_includes/category_list.html

@@ -1,6 +1,6 @@
 {% assign selectedIndex = include.selectedIndex %}
-<div class="category-list cell">
-    <h4>Categories</h4>
+<aside aria-labelledby="category-list" class="category-list cell">
+    <h4 id="category-list">Categories</h4>
     <ul>
         {% for category in site.data.categories %}
             <li>
@@ -10,4 +10,4 @@ <h4>Categories</h4>
             </li>
         {% endfor %}
     </ul>
-</div>
+</aside>

_includes/post_index.html

@@ -10,7 +10,7 @@
 {% else %}
     {% assign paginated = false %}
 {% endif %}
-<div class="post-index grid-container">
+<main class="post-index grid-container">
   {% if categoryName == "Latest Articles" %}
   <h1 class="super-title">Blog</h1>
   <h2 class="cell sub-title">Our thoughts on technology and design</h2>
@@ -29,6 +29,6 @@ <h1 class="sub-title">{{ categoryName }}</h1>
       {% include author_list.html %}
     </div>
   </div>
-</div>
+</main>
 
 {% include site-footer.html %}

_includes/read_more.html

@@ -10,12 +10,10 @@
                 <path d="M0 69.5L69.5 0h42.4L0 111.9V69.5zm0 70.7L140.2 0h.9l20.7 20.7L0 182.6v-42.4zm0 70.7l176-176 21.2 21.2L1.3 252H0v-41.1zM29.6 252L211.4 70.2l21.2 21.2L72 252H29.6zm70.7 0l146.4-146.4 5.3 5.3v31.9L142.7 252h-42.4z"/>
             </svg>
 
-
-
-            <h2>Read more</h2>
+            <h2 id="read-more">Read more</h2>
         </div>
         <div class="small-2 cell hide-for-large">
             {% include social.html %}
         </div>
     </div>
-</div>
+</div>

_includes/recruitment.html

@@ -21,10 +21,10 @@
     {% endif %}
 {% endcapture %}
 
-<div class="cell grid-margin-y grid-padding-y grid-x">
+<aside aria-labelledby="recruitment" class="cell grid-margin-y grid-padding-y grid-x">
     <div class="cell grid-margin-y grid-padding-y grid-x">
-        <h2>Thinking of joining us?</h2>
+        <h2 id="recruitment">Thinking of joining us?</h2>
         If you enjoyed this blog post and are interested in working with smart {{ family_name | strip }} on challenging software projects,
         <a href="https://www.scottlogic.com/careers/{{ url | strip}}">check out our current vacancies</a>.
     </div>
-</div>
+</aside>

_includes/site-header.html

@@ -37,7 +37,7 @@ <h1 class="brand"><a href="{{site.scottlogic.url}}">Scott Logic / Altogether Sma
             </div>
             <div class="large-6 medium-6 cell">
                 <div class="header-nav_top">
-                    <nav aria-label="upper-nav">
+                    <nav aria-label="Getting in touch">
                         <div class="menu-secondary-container">
                             <ul id="secondary-menu" class="menu">
                                 <li><a href="{{site.scottlogic.url}}/careers">Careers</a></li>
@@ -49,7 +49,7 @@ <h1 class="brand"><a href="{{site.scottlogic.url}}">Scott Logic / Altogether Sma
                     </nav>
                 </div>
                 <div class="header-nav_bottom">
-                    <nav aria-label="main-nav">
+                    <nav aria-label="About Scott Logic">
                         <div class="menu-primary-container">
                             <ul id="primary-menu" class="menu">
                                 <li><a href="{{site.scottlogic.url}}/what-we-do">What we do</a></li>

_includes/watch_more.html

@@ -1,17 +1,17 @@
-
-<div class="grid-x grid-margin-y grid-padding-y">
+<aside aria-labelledby="watch-more" class="grid-x grid-margin-y grid-padding-y">
     <div class="cell grid-x grid-margin-y grid-padding-y">
         <div class="read-more cell large-6 small-10 grid-margin-y">
             <svg class="show-for-large" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 252 252">
                 <path d="M0 69.5L69.5 0h42.4L0 111.9V69.5zm0 70.7L140.2 0h.9l20.7 20.7L0 182.6v-42.4zm0 70.7l176-176 21.2 21.2L1.3 252H0v-41.1zM29.6 252L211.4 70.2l21.2 21.2L72 252H29.6zm70.7 0l146.4-146.4 5.3 5.3v31.9L142.7 252h-42.4z"/>
             </svg>
 
-            <h2>Watch more</h2>
+            <h2 id="watch-more">Watch more</h2>
             <div class="cell"><a href="{{ site.baseurl }}/category/videos.html">View all videos</a></div>
             <div class="cell"><a href="https://www.youtube.com/channel/UCGX_lcYr7WS9hkrx2W1VEhw">Watch even more on the Scott Logic YouTube channel</a></div>
         </div>
         <div class="small-2 cell hide-for-large">
             {% include social.html %}
         </div>
     </div>
-</div>
+</aside>
+

_layouts/default_author.html

@@ -21,7 +21,7 @@
 {% endfor %}
 {% assign allEvents = allEvents | sort: 'eventDate' | reverse | uniq %}
 
-<div class="default-author grid-container">
+<main>
     <div class="grid-padding-y">
         <div class="cell">
             {% include author.html author=author %}
@@ -48,5 +48,6 @@ <h4>Talks</h4>
             </div>
         </div>
     </div>
-</div>
+</main>
+
 {% include site-footer.html %}