Improve accessibility

fboes · Jul 16, 2021 · 2d2d1c8 · 2d2d1c8
1 parent 19e3876
commit 2d2d1c8
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ For detailed information check [Blogophon's releases on Github](https://github.c
 * 🎁 JSON-LD added
 * 🎁 Changed code highlighting for Bash prompt
 * 🎁 Add additional `class` to `td` with a tag inside
+* 🎁 Improve accessibility
 
 2.1.7
 -----

diff --git a/htdocs/themes/default/templates/index.html b/htdocs/themes/default/templates/index.html
@@ -55,16 +55,18 @@
     <div id="main">
       <main id="content" class="h-feed">
         {{#unless meta.isHomepage}}
-          <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb">
-            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-              <a itemprop="item" href="{{config.basePath}}"><span itemprop="name">{{#i18n}}Home page{{/i18n}}</span></a>
-              <meta itemprop="position" content="1" />
-            </li>
-            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-              <a itemprop="item" href="{{firstUrl}}" class="u-url"><span itemprop="name">{{meta.title}}</span></a>
-              <meta itemprop="position" content="2" />
-            </li>
-          </ol>
+          <nav aria-label="{{#i18n}}Breadcrumbs{{/i18n}}">
+            <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb">
+              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+                <a itemprop="item" href="{{config.basePath}}"><span itemprop="name">{{#i18n}}Home page{{/i18n}}</span></a>
+                <meta itemprop="position" content="1" />
+              </li>
+              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+                <a itemprop="item" href="{{firstUrl}}" class="u-url" aria-current="location"><span itemprop="name">{{meta.title}}</span></a>
+                <meta itemprop="position" content="2" />
+              </li>
+            </ol>
+          </nav>
         {{/unless}}
 
         {{#if meta.title}}

diff --git a/htdocs/themes/default/templates/partials/navigation.html b/htdocs/themes/default/templates/partials/navigation.html
@@ -1,4 +1,4 @@
-<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement" id="navigation">
+<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement" id="navigation" aria-label="{{#i18n}}Main navigation{{/i18n}}" role="navigation">
   <ul>
     <li><a href="{{config.basePath}}">{{#i18n}}Home page{{/i18n}}</a></li>
     {{#each config.categoriesUrls}}

diff --git a/htdocs/themes/default/templates/post.html b/htdocs/themes/default/templates/post.html
@@ -55,20 +55,22 @@
       <main id="content">
         {{#with post}}
           {{#if meta.CategoryObj}}
-            <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb">
-              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-                <a itemprop="item" href="{{../config.basePath}}"><span itemprop="name">{{#i18n}}Home page{{/i18n}}</span></a>
-                <meta itemprop="position" content="1" />
-              </li>
-              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-                <a itemprop="item" href="{{meta.CategoryObj.url}}"><span itemprop="name" class="p-category">{{meta.CategoryObj.title}}</span></a>
-                <meta itemprop="position" content="2" />
-              </li>
-              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-                <a itemprop="item" href="{{meta.Url}}"><span itemprop="name">{{meta.Title}}</span></a>
-                <meta itemprop="position" content="3" />
-              </li>
-            </ol>
+            <nav aria-label="{{#i18n}}Breadcrumbs{{/i18n}}">
+              <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb">
+                <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+                  <a itemprop="item" href="{{../config.basePath}}"><span itemprop="name">{{#i18n}}Home page{{/i18n}}</span></a>
+                  <meta itemprop="position" content="1" />
+                </li>
+                <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+                  <a itemprop="item" href="{{meta.CategoryObj.url}}"><span itemprop="name" class="p-category">{{meta.CategoryObj.title}}</span></a>
+                  <meta itemprop="position" content="2" />
+                </li>
+                <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+                  <a itemprop="item" href="{{meta.Url}}" aria-current="location"><span itemprop="name">{{meta.Title}}</span></a>
+                  <meta itemprop="position" content="3" />
+                </li>
+              </ol>
+            </nav>
           {{/if}}
 
           <article class="{{meta.Classes}} h-entry"{{#unless meta.isDefaultLanguage}} lang="{{meta.Language}}" dir="{{meta.Direction}}"{{/unless}} itemscope itemtype="{{meta.Schema}}">

diff --git a/lib/helpers/translations.js b/lib/helpers/translations.js
@@ -21,7 +21,10 @@ const translations = function(language) {
       'All categories': 'Alle Kategorien',
       'Go to website…': 'Zur Website…',
       'Read on…': 'Weiterlesen…',
-      'Updated:': 'Aktualisiert am'
+      'Updated:': 'Aktualisiert am',
+      'Articles': 'Artikel',
+      'Main navigation': 'Hauptnavigation',
+      'Breadcrumbs': 'Breadcrumbs'
     },
     fr: {
       'Home': 'Page d\'accueil',
@@ -34,7 +37,10 @@ const translations = function(language) {
       'All categories': 'Toutes catégories',
       'Go to website…': 'Aller sur un site Internet…',
       'Read on…': 'Continuer à lire…',
-      'Updated:': 'Mise à jour:'
+      'Updated:': 'Mise à jour:',
+      'Articles': 'Des articles',
+      'Main navigation': 'Navigation principale',
+      'Breadcrumbs': 'Breadcrumbs'
     },
     es: {
       'Home': 'Portada',
@@ -47,7 +53,10 @@ const translations = function(language) {
       'All categories': 'Todas las categorias',
       'Go to website…': 'Ir al sitio web…',
       'Read on…': 'Sigue leyendo…',
-      'Updated:': 'Actualizado:'
+      'Updated:': 'Actualizado:',
+      'Articles': 'Artículos',
+      'Main navigation': 'Navegación Principal',
+      'Breadcrumbs': 'Breadcrumbs'
     },
     ru: {
       'Home': 'Главная страница',
@@ -60,7 +69,10 @@ const translations = function(language) {
       'All categories': 'Все категории',
       'Go to website…': 'Перейти на сайт…',
       'Read on…': 'Читай дальше…',
-      'Updated:': 'Обновлено:'
+      'Updated:': 'Обновлено:',
+      'Articles': 'Статьи',
+      'Main navigation': 'Основная навигация',
+      'Breadcrumbs': 'Breadcrumbs'
     }
   };