Accessibility improvements (#53)

* add alt tags to lear more

* make logo section better screenreadable

* enhance contrast on footer

* add alt text to back button

* switch colors -> maybe better contrast on links?

* make link text better readable

* switch color back

* and another try

* Revert "and another try"

This reverts commit cb58c92c51877ce07771cb1a95ffb8d5e460beee.

_includes/base/footer.html

@@ -27,16 +27,16 @@
 
   <div class="bg-gray-100">
     <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
-      <p class="cm-gray-3 text-sm text-center sm:text-left">© 2021-now {{ site.title }} by<a href="https://github.com/inventree" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@inventree</a>— website made with &hearts; by<a href="https://github.com/matmair" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@matmair</a></p>
+      <p class="cm-gray-2 text-sm text-center sm:text-left">© 2021-now {{ site.title }} by<a href="https://github.com/inventree" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@inventree</a>— website made with &hearts; by<a href="https://github.com/matmair" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@matmair</a></p>
       <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
-        <a href="https://github.com/inventree/inventree" alr="github repo" class="ml-3 cm-gray-3">
-          <img class="h-5 w-5" src="{{ '/assets/github.svg' | relative_url }}" />
+        <a href="https://github.com/inventree/inventree" alt="github repo" class="ml-3 cm-gray-3">
+          <img class="h-5 w-5" alt="GitHub logo" src="{{ '/assets/github.svg' | relative_url }}" />
         </a>
-        <a href="https://reddit.com/r/inventree" alr="Reddit" class="ml-3 cm-gray-3">
-          <img class="h-5 w-5" src="{{ '/assets/reddit.svg' | relative_url }}" />
+        <a href="https://reddit.com/r/inventree" alt="Reddit" class="ml-3 cm-gray-3">
+          <img class="h-5 w-5" alt= "Reddit logo" src="{{ '/assets/reddit.svg' | relative_url }}" />
         </a>
-        <a href="https://twitter.com/inventreedb" alr="Twitter" class="ml-3 cm-gray-3">
-          <img class="h-5 w-5" src="{{ '/assets/twitter.svg' | relative_url }}" />
+        <a href="https://twitter.com/inventreedb" alt="Twitter" class="ml-3 cm-gray-3">
+          <img class="h-5 w-5" alt="Twitter logo" src="{{ '/assets/twitter.svg' | relative_url }}" />
         </a>
       </span>
     </div>

_includes/block/features.html

@@ -7,7 +7,7 @@
             <h1 class="header-text title-font mb-2 cm-gray-1">{{ include.data.title }}</h1>
             {% if include.link %}
             {% assign link=include.data.link|default:include.link %}
-            <a href="{% include fnc/link.html item=link %}" alt="learn more"><img class="w-4 h-4 ml-2" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
+            <a href="{% include fnc/link.html item=link %}" alt="learn more" class="color-link"><img class="w-4 h-4 ml-2" alt="Arrow pointing right" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
             {% endif %}
           </div>
           <div class="h-1 w-20 bg-secondary rounded"></div>
@@ -25,7 +25,7 @@
               {% if include.extend and item.extend %}<br><br>{{ item.extend }}{% endif %}
             </p>
             {% if item.link %}
-            <a class="text-secondary inline-flex items-center" href="{% include fnc/link.html item=item.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
+            <a class="text-secondary inline-flex items-center" href="{% include fnc/link.html item=item.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" alt="Arrow pointing right" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
             {% endif %}
           </div>
         </div>

_includes/block/functions.html

@@ -11,7 +11,7 @@
       {% if include.data.title %}<h1 class="header-text title-font mb-4 cm-gray-1">{{ include.data.title }}</h1>{% endif %}
       {% if include.data.text %}<p class="lg:w-2/3 mx-auto leading-relaxed text-base">{{ include.data.text }}</p>{% endif %}
       {% if include.data.link and include.no_link != true %}
-      <a class="text-secondary inline-flex items-center justify-center" href="{% include fnc/link.html item=include.data.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
+      <a class="text-secondary inline-flex items-center justify-center color-link" href="{% include fnc/link.html item=include.data.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" alt="Arrow pointing right" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
       {% endif %}
     </div>
     {% endif %}
@@ -25,7 +25,7 @@
           {% if include.extend and item.extend %}<br><br>{{ item.extend }}{% endif %}
         </p>
         {% if item.link %}
-        <a class="text-secondary inline-flex items-center" href="{% include fnc/link.html item=item.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
+        <a class="text-secondary inline-flex items-center color-link" href="{% include fnc/link.html item=item.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" alt="Arrow pointing right" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
         {% endif %}
       </div>
       {% endfor %}

_layouts/collection/collection_base.html

@@ -5,7 +5,7 @@ layout: default
 <header>
     {% if page.backLink or page.backLink == nil %}
     <a href="{{ layout.base_link | relative_url }}" class="flex items-center m-5 text-xl hover:underline">
-        <img class="w-6 h-6" src="{{ '/assets/back.svg' | relative_url }}" />
+        <img class="w-6 h-6" alt="go back" src="{{ '/assets/back.svg' | relative_url }}" />
         <span>Back</span>
     </a>
     {% endif %}

assets/index.css

@@ -59,6 +59,10 @@ layout: empty
         visibility: hidden;
     }
 
+    .color-link {
+        @apply text-secondary
+    }
+
     .badge {
         @apply py-1 px-2.5 rounded-full
     }

tailwind.config.js

@@ -4,13 +4,13 @@ module.exports = {
     purge: {
         enabled: true,
         content: ['./**/*.html'],
-      },
+    },
     darkMode: 'media',
     theme: {
         extend: {
             colors: {
-              'primary':'#90A8D8',
-              'secondary':'#DDBC91',
+                'primary': '#90A8D8',
+                'secondary': '#DDBC91',
             },
             screens: {
                 'xs': '470px',