Improved Lighthouse score (#1391)

* a few accessibility fixes from lighthouse report

* add rel="noopener" to external links

* add title attribute to social links

* add mimetype to manifest link and allow it to work behind auth

* add font-display: swap to all the places where external fonts are used

* remove font-display: swap from icon fonts

* removed font-display from style blocks in base

* add target="_blank" to social links

* switch base fonts grabbed from Google back to display:fallback

As per recommendation from https://developers.google.com/web/updates/2016/02/font-display#fallback

* add target="_blank" to the footer links as well

src/assets/stylesheets/base/_icons.scss

@@ -35,7 +35,6 @@
   line-height: 1;
   text-transform: none;
   white-space: nowrap;
-  speak: none;
   word-wrap: normal;
   direction: ltr;
 

src/base.html

@@ -165,7 +165,7 @@
 
     <!-- Progressive Web App Manifest -->
     {% if config.extra.manifest %}
-      <link rel="manifest" href="{{ config.extra.manifest | url }}">
+      <link rel="manifest" type="application/manifest+json" href="{{ config.extra.manifest | url }}" crossorigin="use-credentials">
     {% endif %}
 
     <!-- Custom stylesheets -->

src/partials/footer.html

@@ -89,9 +89,9 @@
           </div>
         {% endif %}
         powered by
-        <a href="https://www.mkdocs.org">MkDocs</a>
+        <a href="https://www.mkdocs.org" target="_blank" rel="noopener">MkDocs</a>
         and
-        <a href="https://squidfunk.github.io/mkdocs-material/">
+        <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
           Material for MkDocs</a>
       </div>
 

src/partials/header.html

@@ -31,11 +31,12 @@
       <div class="md-flex__cell md-flex__cell--shrink">
         <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
             title="{{ config.site_name }}"
+            aria-label="{{ config.site_name }}"
             class="md-header-nav__button md-logo">
           {% if config.theme.logo.icon %}
             <i class="md-icon">{{ config.theme.logo.icon }}</i>
           {% else %}
-            <img src="{{ config.theme.logo | url }}" width="24" height="24" />
+            <img alt="logo" src="{{ config.theme.logo | url }}" width="24" height="24" />
           {% endif %}
         </a>
       </div>

src/partials/nav.html

@@ -30,7 +30,7 @@
       {% if config.theme.logo.icon %}
         <i class="md-icon">{{ config.theme.logo.icon }}</i>
       {% else %}
-        <img src="{{ config.theme.logo | url }}" width="48" height="48" />
+        <img alt="logo" src="{{ config.theme.logo | url }}" width="48" height="48" />
       {% endif %}
     </a>
     {{ config.site_name }}

src/partials/search.html

@@ -27,7 +27,7 @@
   <label class="md-search__overlay" for="__search"></label>
   <div class="md-search__inner" role="search">
     <form class="md-search__form" name="search">
-      <input type="text" class="md-search__input" name="query"
+      <input type="text" class="md-search__input" aria-label="search" name="query"
           placeholder="{{ lang.t('search.placeholder') }}"
           autocapitalize="off" autocorrect="off" autocomplete="off"
           spellcheck="false" data-md-component="query"

src/partials/social.html

@@ -26,7 +26,7 @@
     <link rel="stylesheet" type="text/css"
         href="{{ 'assets/fonts/font-awesome.css' | url }}" />
     {% for social in config.extra.social %}
-      <a href="{{ social.link }}" class="md-footer-social__link
+      <a href="{{ social.link }}" target="_blank" rel="noopener" title="{{ social.type }}" class="md-footer-social__link
             fa fa-{{ social.type }}"></a>
     {% endfor %}
   </div>