Merge pull request #84 from zensical/fix/a11y

fix: skip link doesn't work when no `h1` is present in Markdown (#79)

Author: squidfunk

dist/base.html

@@ -104,13 +104,17 @@
     {% set features = config.theme.features or [] %}
     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
-    <label class="md-overlay" for="__drawer"></label>
+    <label class="md-overlay" for="__drawer" aria-label="{{ lang.t('nav') }}"></label>
     <div data-md-component="skip">
       {% if page.toc | first is defined %}
         {% set skip = page.toc | first %}
         <a href="{{ skip.url | url }}" class="md-skip">
           {{ lang.t("action.skip") }}
         </a>
+      {% else %}
+        <a href="#__skip" class="md-skip">
+          {{ lang.t("action.skip") }}
+        </a>
       {% endif %}
     </div>
     <div data-md-component="announce">

dist/partials/content.html

@@ -3,7 +3,7 @@
 -#}
 {% include "partials/actions.html" %}
 {% if "\u003ch1" not in page.content %}
-  <h1>{{ page.title | d(config.site_name, true)}}</h1>
+  <h1 id="__skip">{{ page.title | d(config.site_name, true)}}</h1>
 {% endif %}
 {{ page.content }}
 {% include "partials/tags.html" %}

dist/partials/header.html

@@ -12,7 +12,7 @@
     <a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" title="{{ config.site_name | e }}" class="md-header__button md-logo" aria-label="{{ config.site_name }}" data-md-component="logo">
       {% include "partials/logo.html" %}
     </a>
-    <label class="md-header__button md-icon" for="__drawer">
+    <label class="md-header__button md-icon" for="__drawer" aria-label="{{ lang.t('nav') }}">
       {% set icon = config.theme.icon.menu or "material/menu" %}
       {% include ".icons/" ~ icon ~ ".svg" %}
     </label>
@@ -48,7 +48,7 @@
     {% if "search" in config.plugins %}
       {% set search = config.plugins["search"] | attr("config") %}
       {% if search.enabled %}
-        <label class="md-header__button md-icon" for="__search">
+        <label class="md-header__button md-icon" for="__search" aria-label="{{ lang.t('search') }}">
           {% set icon = config.theme.icon.search or "material/magnify" %}
           {% include ".icons/" ~ icon ~ ".svg" %}
         </label>

dist/partials/logo.html

@@ -2,7 +2,7 @@
   This file was automatically generated - do not edit
 -#}
 {% if config.theme.logo %}
-  <img src="{{ config.theme.logo | url }}" alt="logo">
+  <img src="{{ config.theme.logo | url }}" alt="{{ config.site_name }}">
 {% else %}
   {% set icon = config.theme.icon.logo or "material/library" %}
   {% include ".icons/" ~ icon ~ ".svg" %}

src/base.html

@@ -205,7 +205,10 @@
     />
 
     <!-- Overlay for expanded drawer -->
-    <label class="md-overlay" for="__drawer"></label>
+    <label
+      class="md-overlay" for="__drawer"
+      aria-label="{{ lang.t('nav') }}"
+    ></label>
 
     <!-- Skip to content -->
     <div data-md-component="skip">
@@ -214,6 +217,10 @@
         <a href="{{ skip.url | url }}" class="md-skip">
           {{ lang.t("action.skip") }}
         </a>
+      {% else %}
+        <a href="#__skip" class="md-skip">
+          {{ lang.t("action.skip") }}
+        </a>
       {% endif %}
     </div>
 

src/partials/content.html

@@ -31,7 +31,7 @@
   page title (or respectively site name) is used as the main headline.
 -->
 {% if "\u003ch1" not in page.content %}
-  <h1>{{ page.title | d(config.site_name, true)}}</h1>
+  <h1 id="__skip">{{ page.title | d(config.site_name, true)}}</h1>
 {% endif %}
 
 <!-- Page content -->

src/partials/header.html

@@ -50,7 +50,10 @@
     </a>
 
     <!-- Button to open drawer -->
-    <label class="md-header__button md-icon" for="__drawer">
+    <label
+      class="md-header__button md-icon" for="__drawer"
+      aria-label="{{ lang.t('nav') }}"
+    >
       {% set icon = config.theme.icon.menu or "material/menu" %}
       {% include ".icons/" ~ icon ~ ".svg" %}
     </label>
@@ -98,7 +101,10 @@
 
       <!-- Check if search is actually enabled - see https://t.ly/DT_0V -->
       {% if search.enabled %}
-        <label class="md-header__button md-icon" for="__search">
+        <label
+          class="md-header__button md-icon" for="__search"
+          aria-label="{{ lang.t('search') }}"
+        >
           {% set icon = config.theme.icon.search or "material/magnify" %}
           {% include ".icons/" ~ icon ~ ".svg" %}
         </label>

src/partials/logo.html

@@ -25,7 +25,7 @@
 
 <!-- Logo -->
 {% if config.theme.logo %}
-  <img src="{{ config.theme.logo | url }}" alt="logo" />
+  <img src="{{ config.theme.logo | url }}" alt="{{ config.site_name }}" />
 {% else %}
   {% set icon = config.theme.icon.logo or "material/library" %}
   {% include ".icons/" ~ icon ~ ".svg" %}