Sfoglia il codice sorgente

feat: increase accessibility with alts and labels

Can increase accessibility score in Google Lighthouse from 97% to 100% (exact score may vary depending on the site).

See #1694
Nicholas Nadeau, Ph.D., P.Eng 5 anni fa
parent
commit
ca0b898cbf

+ 1 - 1
layouts/partials/li_card.html

@@ -45,7 +45,7 @@
   {{ with $resource }}
   {{ $image := .Fill (printf "918x517 q90 %s" $anchor) }}
   <a href="{{ $item.RelPermalink }}">
-      <img src="{{ $image.RelPermalink }}" class="article-banner" alt="">
+      <img src="{{ $image.RelPermalink }}" class="article-banner" alt="{{ $item.Title }}">
   </a>
   {{end}}
 

+ 1 - 1
layouts/partials/li_compact.html

@@ -78,7 +78,7 @@
     {{ with $resource }}
     {{ $image := .Resize "150x" }}
     <a href="{{$link}}" {{ $target | safeHTMLAttr }}>
-      <img src="{{ $image.RelPermalink }}" alt="">
+      <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}">
     </a>
     {{end}}
   </div>

+ 1 - 1
layouts/partials/navbar.html

@@ -126,7 +126,7 @@
     <ul class="nav-icons navbar-nav flex-row ml-auto d-flex pl-md-2">
       {{ if site.Params.search.engine }}
       <li class="nav-item">
-        <a class="nav-link js-search" href="#"><i class="fas fa-search" aria-hidden="true"></i></a>
+        <a class="nav-link js-search" href="#" aria-label="{{ i18n "search" }}"><i class="fas fa-search" aria-hidden="true"></i></a>
       </li>
       {{ end }}