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

@@ -1,40 +1,46 @@
-<section class="featured-projects">
+<section class="featured-projects" aria-labelledby="featured-projects-title">
   <div class="container">
     <div class="level">
-      <h2 class="is-paddingless level-left">
+      <h2 class="is-paddingless level-left" id="featured-projects-title">
         {{ this.title }}
       </h2>
       <span class="level-right">
-        <a class="project-page-link" href="/contributing-code/projects/">See all available projects <i class="icon angle-right"></i></a>
+        <a class="project-page-link" href="/contributing-code/projects/" aria-label="See all available projects">
+          See all available projects <i class="icon angle-right"></i>
+        </a>
       </span>
     </div>
     <div class="project-list columns is-multiline">
       {% for repo in bag('repos.repos') %}
       {% if repo.featured %}
         <div class="column is-one-third">
-          <article class="card entry-post vertical project-index">
+          <article class="card entry-post vertical project-index" role="article">
             <div class="card-content">
-              <h4 class="card-title b-header"><a href="{{ repo.url }}">{{ repo.english_name }}</a></h4>
-              <a class="button is-text tiny site-link" href="{{ repo.website or repo.url }}">
+              <h4 class="card-title b-header">
+                <a href="{{ repo.url }}" aria-labelledby="repo-title-{{ loop.index }}">
+                  {{ repo.english_name }}
+                </a>
+              </h4>
+              <a class="button is-text tiny site-link" href="{{ repo.website or repo.url }}" aria-label="Visit the project website">
                 <span>Visit site</span>
                 <i class="icon external-link"></i>
               </a>
-              <div class="content">
+              <div class="content" aria-describedby="repo-description-{{ loop.index }}">
                 {{ repo.description }}
               </div>
               <div class="labels">
                 {% for technology in repo.technologies %}
-                  <button class="button tag">{{ technology }}</button>
+                  <button class="button tag" aria-label="Technology: {{ technology }}">{{ technology }}</button>
                 {% endfor %}
               </div>
               <div class="external-links">
-                <a class="button is-text tiny" href="{{ repo.url }}">
+                <a class="button is-text tiny" href="{{ repo.url }}" aria-label="Github repository for {{ repo.english_name }}">
                   <i class="icon github"></i>
                   <span class="link-content">Github Repository</span>
                 </a>
                 {% if repo.slack %}
                   <br>
-                  <a class="button is-text tiny" href="https://creativecommons.slack.com/channels/{{ repo.slack }}">
+                  <a class="button is-text tiny" href="https://creativecommons.slack.com/channels/{{ repo.slack }}" aria-label="Slack channel for {{ repo.english_name }} (#{{ repo.slack }})">
                     <i class="icon slack"></i>
                     <span class="link-content">Slack channel (#{{ repo.slack }})</span>
                   </a>
@@ -44,7 +50,7 @@ <h4 class="card-title b-header"><a href="{{ repo.url }}">{{ repo.english_name }}
           </article>
         </div>
       {% endif %}
-    {% endfor %}
+      {% endfor %}
     </div>
   </div>
 </section>

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

@@ -1,19 +1,22 @@
-<section class="get-involved">
+<section class="get-involved" aria-labelledby="get-involved-title">
   <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>
   </div>
-</section>
+</section>

themes/vocabulary_theme/templates/blocks/hero.html

@@ -1,7 +1,7 @@
-<section class="hero">
+<section class="hero" role="region" aria-labelledby="hero-title">
   <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" alt="Hero image" />
   </div>
-</section>
+</section>

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

@@ -1,20 +1,24 @@
 {% from "macros/posts.html" import render_post_summary %}
 
-<section class="recent-posts">
+<section class="recent-posts" aria-labelledby="recent-posts-title">
   <div class="container">
     <div class="level">
-      <h2 class="is-paddingless level-left">
+      <h2 id="recent-posts-title" class="is-paddingless level-left">
         {{ this.title }}
       </h2>
       <span class="level-right">
-        <a class="posts-link" href="/blog/entries">See all posts <i class="icon angle-right"></i></a>
+        <a class="posts-link" href="/blog/entries" aria-label="See all blog posts">
+          See all posts <i class="icon angle-right"></i>
+        </a>
       </span>
     </div>
-    <div class="columns">
+    <div class="columns" role="list">
       {% for post in site.query('/blog/entries') %}
         {% set post_loop = loop %}
         {% if post_loop.index <= 3 %}
-          {{ render_post_summary(post) }}
+          <div role="listitem">
+            {{ render_post_summary(post) }}
+          </div>
         {% endif %}
       {% endfor %}
     </div>

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,15 +5,16 @@
 {% 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>
 {% endblock %}
+

themes/vocabulary_theme/templates/blog-post.html

@@ -6,27 +6,29 @@
 {% 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>
         {% if this.series|length %}
           {% set series = this.parent.parent.children.get('series').children.get(this.series) %}
           <div class="series-header">
             <span>This blog is part of the series:</span>
-            <a href="#series">{{ series.name }}</a>
+            <a href="#series" aria-label="Go to {{ series.name }} series">{{ series.name }}</a>
           </div>
         {% 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">
@@ -37,32 +39,32 @@ <h4 class="category-title">Categories</h4>
             {% for category in this.categories %}
               {% set current_category = this.parent.parent.children.get('categories').children.get(category) %}
               {{ check_file('content' + this.parent.parent.path + '/categories/' + category + '/contents.lr') }}
-              <a class="button tag" href=" {{ current_category|url }} ">{{ category }}</a>
+              <a class="button tag" href="{{ current_category|url }}" aria-label="Category: {{ category }}">{{ category }}</a>
             {% endfor %}
           {% else %}
             none
           {% endif %}
         </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 %}
                 <li class="has-color-dark-slate-gray">
-                  <i class="icon circle-filled"></i>{{ post.title }}
+                  <i class="icon circle-filled" aria-hidden="true"></i>{{ post.title }}
                 </li>
               {% else %}
                 <li>
-                  <i class="icon circle-filled"></i><a href="{{ post|url }}">{{ post.title }}</a>
+                  <i class="icon circle-filled" aria-hidden="true"></i><a href="{{ post|url }}" aria-label="Read {{ post.title }}">{{ post.title }}</a>
                 </li>
               {% endif %}
             {% endfor %}
           </ul>
         </div>
       {% endif %}
-      <div class="comments">{{ render_disqus_comments() }}</div>
+      <div class="comments" aria-live="polite">{{ render_disqus_comments() }}</div>
     </footer>
   </div>
 {% endblock %}

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

@@ -5,12 +5,12 @@
 {% 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) }}
   </div>
 </div>
-{% endblock %}
+{% endblock %}

themes/vocabulary_theme/templates/blog-series.html

@@ -9,10 +9,10 @@
     <div class="header">
       <div class="container">
         <h1>All posts in series "{{ this.name }}"</h1>
-        <a class="button small margin-top-bigger" href="{{ this.parent|url }}">See all series</a>
+        <a class="button small margin-top-bigger" href="{{ this.parent|url }}" aria-label="See all series">{{ this.parent.name }}</a>
       </div>
     </div>
-    <div class="series-list container">
+    <div class="series-list container" role="list" aria-label="List of posts in the series">
       {{ render_posts(this.children) }}
     </div>
   </div>

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 aria-labelledby="blog-posts">
+        <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 %}