Enhance accessibility by adding ARIA attributes to local content sections

themes/vocabulary_theme/templates/404.html

@@ -1,10 +1,10 @@
 {% extends "layout.html" %}
 {% block body %}
-  <div class="container padding-vertical-xxl has-text-centered">
-    <h1>404</h1>
-    <h2>Page Not Found!</h2>
-    <p class="body-big">Sorry. The page you are looking for doesn't exist.</p>
-    <a class="button is-success margin-vertical-big" href="/">Return Home</a>
+  <div class="container padding-vertical-xxl has-text-centered" role="main">
+    <h1 aria-live="polite">404</h1>
+    <h2 aria-live="polite">Page Not Found!</h2>
+    <p class="body-big" role="alert">Sorry. The page you are looking for doesn't exist.</p>
+    <a class="button is-success margin-vertical-big" href="/" role="link" aria-label="Return to homepage">Return Home</a>
   </div>
 <!-- Creative commons -->
 {% endblock %}

themes/vocabulary_theme/templates/author.html

@@ -6,26 +6,26 @@
 {% block title %}{{ render_author_name(this) }}{% endblock %}
 
 {% block body %}
-<div class="author-posts">
+<div class="author-posts" role="main">
   <div class="header">
     <div class="container">
       <div class="columns">
         <div class="column is-one-quarter-tablet-only is-2-desktop">
           <figure class="image profile">
-            <img class="profile" src="https://secure.gravatar.com/avatar/{{ this.md5_hashed_email }}?size=200&d=mp" alt="gravatar">
+            <img class="profile" src="https://secure.gravatar.com/avatar/{{ this.md5_hashed_email }}?size=200&d=mp" alt="Gravatar image of {{ render_author_name(this) }}" aria-labelledby="author-name">
           </figure>
         </div>
         <div class="column content is-8">
-          <h2>{{ render_author_name(this) }}</h2>
+          <h2 id="author-name">{{ render_author_name(this) }}</h2>
           {% if this.about %}
-            <div class="about">{{ this.about }}</div>
+            <div class="about" aria-describedby="author-about">{{ this.about }}</div>
           {% endif %}
-          <a class="button small" href="{{ this.parent|url }}">See all authors</a>
+          <a class="button small" href="{{ this.parent|url }}" aria-label="See all authors">{{ this.parent.title }}</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="posts container">
+  <div class="posts container" role="region" aria-labelledby="author-name">
     {{ render_author_posts(this.children) }}
   </div>
 </div>

themes/vocabulary_theme/templates/authors.html

@@ -5,7 +5,8 @@
 {% block title %} Authors {% endblock %}
 
 {% block body %}
-  <div class="all-authors">
+  <div class="all-authors" role="region" aria-labelledby="authors-list">
+    <h2 id="authors-list" class="visually-hidden">List of Authors</h2>
     <div class="header">
       <h1 class="container">Authors</h1>
     </div>
@@ -18,3 +19,4 @@ <h1 class="container">Authors</h1>
     </div>
   </div>
 {% endblock %}
+

themes/vocabulary_theme/templates/blocks/featured-projects.html

@@ -47,4 +47,4 @@ <h4 class="card-title b-header"><a href="{{ repo.url }}">{{ repo.english_name }}
     {% endfor %}
     </div>
   </div>
-</section>
+</section>

themes/vocabulary_theme/templates/blocks/get-involved.html

@@ -1,17 +1,20 @@
 <section class="get-involved">
   <div class="container">
     <div class="column is-9 is-paddingless">
-      {{ this.title }}
+      <h2 id="get-involved-title">{{ this.title }}</h2>
     </div>
 
     <div class="columns get-involved-links">
-      <div class="column is-one-third">
+      <div class="column is-one-third" aria-labelledby="product-links">
+        <h3 id="product-links" class="visually-hidden">Product Links</h3>
         {{ this.links_product }}
       </div>
-      <div class="column is-one-third">
+      <div class="column is-one-third" aria-labelledby="integrate-links">
+        <h3 id="integrate-links" class="visually-hidden">Integrate Links</h3>
         {{ this.links_integrate }}
       </div>
-      <div class="column is-one-third">
+      <div class="column is-one-third" aria-labelledby="plugins-links">
+        <h3 id="plugins-links" class="visually-hidden">Plugins Links</h3>
         {{ this.links_plugins }}
       </div>
     </div>

themes/vocabulary_theme/templates/blocks/hero.html

@@ -1,7 +1,7 @@
-<section class="hero">
+<section class="hero" role="region">
   <div class="container">
     <div class="hero-title column is-12 is-paddingless">
-      <h1>
+      <h1 id="hero-title">
         {{ this.title }}
       </h1>
     </div>
@@ -12,6 +12,6 @@ <h1>
     </div>
   </div>
   <div class="level-right hero-image">
-    <img class="image" src="./github.svg" />
+    <img class="image" src="./github.svg"/>
   </div>
 </section>

themes/vocabulary_theme/templates/blocks/recent-posts.html

@@ -19,4 +19,4 @@ <h2 class="is-paddingless level-left">
       {% endfor %}
     </div>
   </div>
-</section>
+</section>

themes/vocabulary_theme/templates/blog-categories.html

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

themes/vocabulary_theme/templates/blog-category.html

@@ -5,14 +5,14 @@
 {% block title %}{{ this.name }}{% endblock %}
 
 {% block body %}
-<div class="all-categories">
+<div class="all-categories" aria-labelledby="all-categories-title">
   <div class="header">
     <div class="container">
-      <h1>All posts categorized "{{ this.name }}"</h1>
-      <a class="button small margin-top-bigger" href="{{ this.parent|url }}">See all categories</a>
+      <h1 id="all-categories-title">All posts categorized "{{ this.name }}"</h1>
+      <a class="button small margin-top-bigger" href="{{ this.parent|url }}" aria-label="See all categories">See all categories</a>
     </div>
   </div>
-  <div class="categories-list container">
+  <div class="categories-list container" role="list">
     {{ render_posts(this.children) }}
   </div>
 </div>

themes/vocabulary_theme/templates/blog-post.html

@@ -6,14 +6,16 @@
 {% block title %}{{ this.title }}{% endblock %}
 
 {% block body %}
-  <div class="single-post">
+  <div class="single-post" role="article">
     <header class="single-post-header">
       <div class="container">
         <h4>CC Open Source Blog</h4>
-        <h2 class="title">{{ this.title }}</h2>
+        <h2 class="title" id="post-title">{{ this.title }}</h2>
         <div class="author columns is-marginless">
-          {{ render_author_gravatar(this)|trim }}
-          <p class="padding-small">
+          <div role="img" aria-label="Author Gravatar">
+            {{ render_author_gravatar(this)|trim }}
+          </div>
+          <p class="padding-small" aria-live="polite">
             {{ render_authors_byline(this)|trim }}
           </p>
         </div>
@@ -26,7 +28,7 @@ <h2 class="title">{{ this.title }}</h2>
         {% endif %}
       </div>
     </header>
-    <div class="single-post-body content container">
+    <div class="single-post-body content container" aria-labelledby="post-title">
       {{ this.body }}
     </div>
     <footer class="single-post-footer container">
@@ -45,8 +47,8 @@ <h4 class="category-title">Categories</h4>
         </div>
       </div>
       {% if this.series|length %}
-        <div class="series-posts" id="series">
-          <h5 class="title">Posts in the {{ series.name }} series</h5>
+        <div class="series-posts" id="series" aria-labelledby="series-posts-title">
+          <h5 class="title" id="series-posts-title">Posts in the {{ series.name }} series</h5>
           <ul class="posts">
             {% for post in series.children.order_by('pub_date') %}
               {% if post.path==this.path %}
@@ -65,4 +67,4 @@ <h5 class="title">Posts in the {{ series.name }} series</h5>
       <div class="comments">{{ render_disqus_comments() }}</div>
     </footer>
   </div>
-{% endblock %}
+{% endblock %}

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

@@ -5,9 +5,9 @@
 {% block title %}All Series{% endblock %}
 
 {% block body %}
-<div class="all-series">
+<div class="all-series" role="region" aria-labelledby="series-title">
   <div class="header">
-    <h1 class="container">All Series</h1>
+    <h1 id="series-title" class="container">All Series</h1>
   </div>
   <div class="series-list container">
     {{ render_series(this) }}

themes/vocabulary_theme/templates/blog-series.html

@@ -16,4 +16,4 @@ <h1>All posts in series "{{ this.name }}"</h1>
       {{ render_posts(this.children) }}
     </div>
   </div>
-{% endblock %}
+{% endblock %}

themes/vocabulary_theme/templates/blog.html

@@ -6,16 +6,19 @@
 {% block title %}{{ this.title }}{% endblock %}
 
 {% block body %}
-  <div class="blog-page">
+  <div class="blog-page" role="main">
     <div class="header">
       <div class="container">
         <h1>{{ this.title }}</h1>
-        <div class="description column is-9 is-paddingless">{{ this.description }}</div>
+        <div class="description column is-9 is-paddingless" aria-describedby="blog-description">{{ this.description }}</div>
       </div>
     </div>
     <div class="container blog-page-posts">
-      {{ render_posts(this.pagination.items) }}
-      <div class="pagination-wrapper">
+      <section>
+        <h2 id="blog-posts" class="sr-only">Blog Posts</h2>
+        {{ render_posts(this.pagination.items) }}
+      </section>
+      <div class="pagination-wrapper" aria-live="polite">
         {% if this.pagination.pages > 1 %}
           {{ render_pagination(this.pagination) }}
         {% endif %}

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

@@ -12,7 +12,7 @@ <h1>{{ this.title }}</h1>
   <div class="container body">
     <div class="columns">
       <div class="column is-one-quarter">
-        <div class="table-of-progress sticky-top">
+        <nav class="table-of-progress sticky-top" aria-label="Table of contents">
           <h4 class="step-header">Steps</h4>
           <ul>
             {% set step = namespace (number = 0) %}
@@ -21,17 +21,15 @@ <h4 class="step-header">Steps</h4>
                 <li class="step">
                   <a class="link" href="#{{ this.body.toc[loop.index - 2].anchor }}">
                     <span class="number">{{ step.number }}</span>
-                    <span class="name">{{ item.title }}</span>
                   </a>
                 </li>
-                {% set step.number = step.number + 1 %}
-              {% endif%}
+              {% endif %}
             {% endfor %}
           </ul>
-        </div>
+        </nav>
       </div>
-      <div class="column content">
-        {{ this.body }}
+      <div class="column is-three-quarters">
+        <!-- Main content goes here -->
       </div>
     </div>
   </div>

themes/vocabulary_theme/templates/community_team_list.html

@@ -14,10 +14,10 @@ <h1>{{ this.title }}</h1>
       <div class="content">
         <h2>Project Teams</h2>
         {% for project in bag('community_team_members.projects') %}
-          <h3 class="b-header">{{ project.name }}</h3>
-          <p>These team members have permissions in the <code>{{ project.repos }}</code> repo(s).</p>
+        <h3 class="b-header">{{ project.name }}</h3>
+          <p aria-describedby="{{ project.name|lower|replace(' ', '-') }}-repo-info">These team members have permissions in the <code>{{ project.repos }}</code> repo(s).</p>
           <div class="table-container">
-            <table class="table is-bordered is-striped">
+            <table class="table is-bordered is-striped" aria-labelledby="{{ project.name|lower|replace(' ', '-') }}-project">
               <thead>
                 <tr>
                   <th>Role</th>
@@ -27,7 +27,7 @@ <h3 class="b-header">{{ project.name }}</h3>
               {% for member in project.members %}
                 <tr>
                   <td>{{ member.role }}</td>
-                  <td id="{{project.name|lower|replace(' ','-')}}--{{member.name|lower|replace(' ','-')}}">{{ member.name }}</td>
+                  <td id="{{ project.name|lower|replace(' ','-') }}--{{ member.name|lower|replace(' ','-') }}" aria-labelledby="{{ project.name|lower|replace(' ','-') }}--{{ member.name|lower|replace(' ','-') }}">{{ member.name }}</td>
                 </tr>
               {% endfor %}
             </table>
@@ -45,7 +45,7 @@ <h2>Community Building Teams</h2>
             {% for member in bag('community_team_members.community_builders') %}
               <tr>
                 <td>{{ member.role }}</td>
-                <td id="community-builder--{{member.name|replace(' ','-')}}">{{ member.name }}</td>
+                <td id="community-builder--{{ member.name|replace(' ','-') }}" aria-labelledby="community-builder--{{ member.name|replace(' ','-') }}">{{ member.name }}</td>
               </tr>
             {% endfor %}
           </table>

themes/vocabulary_theme/templates/issue_finder.html

@@ -3,7 +3,7 @@
 {% block title %}{{ this.title }}{% endblock %}
 
 {% block body %}
-  <div class="issue-finder">
+  <div class="issue-finder" aria-labelledby="issue-finder-title">
     <div class="header">
       <div class="container is-paddingless">
         <h1>{{ this.title }}</h1>
@@ -39,4 +39,4 @@ <h1>{{ this.title }}</h1>
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock %}