Revised: Enhance accessibility by adding ARIA attributes to local content sections

themes/vocabulary_theme/templates/blog-categories.html

@@ -5,12 +5,12 @@
 {% block title %}Categories{% endblock %}
 
 {% block body %}
-  <div class="all-categories">
+  <section class="all-categories">
     <div class="header">
       <h1 class="container">Categories</h1>
     </div>
     <div class="categories-list container">
       {{ render_categories(this) }}
     </div>
-  </div>
+  </section>
 {% endblock %}

themes/vocabulary_theme/templates/blog-series-list.html

@@ -5,12 +5,12 @@
 {% block title %}All Series{% endblock %}
 
 {% block body %}
-<div class="all-series">
+<section class="all-series">
   <div class="header">
     <h1 class="container">All Series</h1>
   </div>
   <div class="series-list container">
     {{ render_series(this) }}
   </div>
-</div>
+</section>
 {% endblock %}

themes/vocabulary_theme/templates/cc-search-guide.html

@@ -21,7 +21,7 @@ <h4>Steps</h4>
                   </a>
                 </li>
                 {% set step.number = step.number + 1 %}
-              {% endif%}
+              {% endif %}
             {% endfor %}
           </ul>
         </div>

themes/vocabulary_theme/templates/layout.html

@@ -115,7 +115,7 @@ <h2>Our Work Relies On You!</h2>
           {% for crumb in crumbs %}
             <!-- Active link -->
             {% if this._slug == crumb %}
-              <li class="is-active"><a aria-current="page displayed">{{ this.title }}</a></li>
+              <li class="is-active"><a aria-current="page">{{ this.title }}</a></li>
             {% else %}
               <!-- Forming the URL using extracted slugs -->
               {% set i = loop.index %}

themes/vocabulary_theme/templates/macros/authors_gravatar.html

@@ -1,15 +1,15 @@
 {% macro render_author_gravatar(post, skip_gravatar=false) %}
   {% if not skip_gravatar %}
-    {# only display gravatar for first author so layout is broken #}
+    {# only display gravatar for first author so layout is not broken #}
     {% set author = post.author[0] %}
     {% set current_author = post.parent.parent.children.get('authors').children.get(author) %}
     <header>
       <figure class="image blog-image">
-    {% if post.author|length >= 2 %}
-        <img class="profile" src="/multiple-authors.jpg" alt="multiple authors image"/>
-    {% else %}
-        <img class="profile" src="https://secure.gravatar.com/avatar/{{ current_author.md5_hashed_email }}?size=200&d=mp" alt="author's gravatar" />
-    {% endif %}
+        {% if post.author|length >= 2 %}
+          <img class="profile" src="/multiple-authors.jpg" alt="multiple authors image" />
+        {% else %}
+          <img class="profile" src="https://secure.gravatar.com/avatar/{{ current_author.md5_hashed_email }}?size=200&d=mp" alt="author's gravatar" />
+        {% endif %}
       </figure>
     </header>
   {% endif %}

themes/vocabulary_theme/templates/macros/og_image.html

@@ -15,11 +15,12 @@
     {% if author and author.md5_hashed_email %}
       {% set gravatarURL = 'https://secure.gravatar.com/avatar/' + author.md5_hashed_email + '?size=300&d=mp' %}
       {% set queryParams = queryParams + '&images=' + gravatarURL %}
-      {% set pageTitle = page.title + "<br><sm style='font-size:70px;'>By " + render_author_name(author) + "</sm>"  %}
+      {% set pageTitle = page.title + "<br><sm style='font-size:70px;'>By " + render_author_name(author) + "</sm>" %}
     {% endif  %}
   {% endif %}
 
   {% set url = baseUrl + pageTitle + '.png' + queryParams  %}
 
   <meta property="og:image" content="{{ url }}" />
+  <meta name="description" content="{{ pageTitle }} - CC Open Source" />
 {% endmacro %}

themes/vocabulary_theme/templates/macros/series.html

@@ -1,7 +1,13 @@
 {% from "macros/posts.html" import render_posts %}
 
 {% macro render_series(series) %}
-  {% for serie in site.query(series.path) %}
-    <h4 class="series-link"><a class="link" href="{{ serie|url }}">{{ serie.name }}</a></h4>
-  {% endfor %}
+  <section>
+    <h2 class="visually-hidden">List of Series</h2>
+    {% for serie in site.query(series.path) %}
+      <h4 class="series-link">
+        <a class="link" href="{{ serie|url }}" aria-label="View series: {{ serie.name }}">{{ serie.name }}</a>
+      </h4>
+    {% endfor %}
+  </section>
 {% endmacro %}
+