Improve accessibility of kde.org/applications

templates/category.html.twig

@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         {{ category.name | capitalize | trans }}
       </a>
       {% if category.icon is not null %}
-        <img width="36" height="36" src="{{ asset('icons/categories/' ~ category.icon) }}"
+        <img aria-hidden="true" width="36" height="36" src="{{ asset('icons/categories/' ~ category.icon) }}"
              {% if lazy %}
                loading="lazy"
              {% endif %}
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       {% for application in category.applications %}
         <div class="app text-center col-12 col-sm-6 col-md-4 col-lg-3 p-2">
           <div class="p-3 h-100">
-            <div>
+            <div aria-hidden="true">
               <a href="{{ path('app_main_application_intl', {'_locale': locale, 'category': category.name | lower, 'application' : application.id }) }}">
                 <img width="48" height="48" src="{{ asset('icons/' ~ application.icon) }}"
                      loading="lazy"
@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         {% for application in category.addons %}
           <div class="app text-center col-12 col-sm-6 col-md-4 col-lg-3 p-2">
             <div class="p-3 h-100">
-              <div>
+              <div aria-hidden="true">
                 <a href="{{ path('app_main_application_intl', {'_locale': locale, 'category': category.name | lower, 'application' : application.id }) }}">
                   <img width="48" height="48" src="{{ asset('icons/' ~ application.icon) }}"
                        alt="{{ application.name | l10n(locale) }}" title="{{ application.name | l10n(locale) }}"/>

templates/main/application.html.twig

@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     <div class="application-header pt-2 pb-2">
       <div class="container d-flex">
         <img src="{{ asset('icons/' ~ application.icon) }}" alt="{% trans %}%name% Icon{% endtrans %}"
-             width="64" height="64" class="mr-2"/>
+             width="64" height="64" class="mr-2" aria-hidden="true" />
         <div>
           <h1 style="font-size: 1.5rem">
             <a href="{{ path('app_main_index', {'_locale': locale}) }}">{% trans %}KDE's Applications{% endtrans %}</a>
@@ -71,9 +71,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
     <div class="container" style="overflow: hidden;">
       {% if application.screenshots | length > 1 %}
-        <div class="swiper-container" class="w-100">
+      <section class="swiper-container" class="w-100" aria-label="{% trans %}Screenshots{% endtrans %} role="list">
           <!-- Additional required wrapper -->
-          <div class="swiper-wrapper d-flex my-3">
+          <div class="swiper-wrapper d-flex my-3" role="listitem">
             {% for screenshot in application.screenshots %}
               <div class="swiper-slide">
                 <img src="{{ screenshot.sourceImage }}"
@@ -86,7 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <div class="swiper-pagination"></div>
           <div class="swiper-button-prev"></div>
           <div class="swiper-button-next"></div>
-        </div>
+        </section>
       {% elseif application.screenshots | length == 1 %}
         {% with { screenshot: application.screenshots[0] } %}
           <div class="text-center screenshot my-3">
@@ -104,7 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           </div>
           <div class="row">
             <div class="col-12 col-sm-4  d-flex flex-column mb-3">
-              <a class="align-self-center" href="appstream://{{ application.appStreamId }}" style="height: 100px">
+              <a class="align-self-center" href="appstream://{{ application.appStreamId }}" style="height: 100px" aria-hidden="true">
                 <img src="{{ asset('assets/plasmadiscover.svg') }}" alt="logo discover" class="img-fluid" width="100">
               </a>
               <h2 class="align-self-center">Linux</h2>
@@ -119,7 +119,7 @@ AppStream application stores. You can also use your distribution's package manag
             </div>
             {% if application.windowsStoreLink %}
               <div class="col-12 col-sm-4  d-flex flex-column mb-3">
-                <a class="d-flex align-self-center" href="{{ application.windowsStoreLink }}" style="height: 100px">
+                <a class="d-flex align-self-center" href="{{ application.windowsStoreLink }}" style="height: 100px" aria-hidden="true">
                   <img src="{{ asset('assets/get-it-from-ms.png') }}" alt="{% trans %}Get it from Microsoft{% endtrans %}"
                        class="img-fluid align-self-center" width="150">
                 </a>
@@ -132,7 +132,7 @@ AppStream application stores. You can also use your distribution's package manag
             {% endif %}
             {% if application.fDroidLink %}
               <div class="col-12 col-sm-4  d-flex flex-column mb-3">
-                <a class="d-flex align-self-center" href="{{ application.fDroidLink }}" style="height: 100px">
+                <a class="d-flex align-self-center" href="{{ application.fDroidLink }}" style="height: 100px" aria-hidden="true">
                   <img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
                        alt="{% trans %}Get it from F-Droid{% endtrans %}"
                        class="img-fluid align-self-center" style="max-height: 80px">
@@ -146,7 +146,7 @@ AppStream application stores. You can also use your distribution's package manag
             {% endif %}
             {% if application.googlePlayLink %}
               <div class="col-12 col-sm-4  d-flex flex-column mb-3">
-                <a class="d-flex align-self-center" href="{{ application.googlePlayLink }}" style="height: 100px">
+                <a class="d-flex align-self-center" href="{{ application.googlePlayLink }}" style="height: 100px" aria-hidden="true">
                   <img src="{{ asset('assets/get-it-from-google-play.png') }}" alt="Get it from Google Play"
                        class="img-fluid align-self-center" style="max-height: 80px">
                 </a>

templates/main/index.html.twig

@@ -14,22 +14,39 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 {% block body %}
   <main class="container">
-      <h1>{{ block('title') }}</h1>
-
-    <p>
-      {% for translation in translations %}
-        <a href="{{ path('app_main_index', {'_locale': translation}) }}">{{ translation | language_name(translation) | capitalize}}</a>
-        {% if not loop.last %}
-          |
-        {% endif %}
-      {% endfor %}
-    </p>
+    <h1>{{ block('title') }}</h1>
+
+    <nav class="mb-2" aria-label="{% trans %}Language selector{% endtrans %}">
+      <ul class="list-inline">
+        <li class="list-inline-item">
+          {% if locale == "en" %}
+            <span aria-label="{% trans %}Selected language: English{% endtrans %}">English</span>
+          {% else %}
+            <a href="{{ path('app_main_index', {'_locale': "en"}) }}">English</a>
+          {% endif %}
+          <span aria-hidden="true">|</span>
+        </li>
+        {% for translation in translations %}
+          <li class="list-inline-item">
+            {% if locale == translation %}
+              {% set lang = translation | language_name(translation) | capitalize %}
+              <span aria-label="{% trans %}Selected language: %lang%{% endtrans %}">{{ lang }}</span>
+            {% else %}
+              <a href="{{ path('app_main_index', {'_locale': translation}) }}">{{ translation | language_name(translation) | capitalize}}</a>
+            {% endif %}
+            {% if not loop.last %}
+              <span aria-hidden="true">|</span>
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </nav>
 
     <p>{{ block('description') }}</p>
 
     <div class="form-group">
-      <label for="search" class="sr-only">Search</label>
-      <input type="email" class="form-control" id="search" placeholder="{% trans %}Search...{% endtrans %}">
+      <label for="search" class="sr-only">{% trans %}Search applications{% endtrans %}</label>
+      <input role="search" type="email" class="form-control" id="search" placeholder="{% trans %}Search...{% endtrans %}">
     </div>
 
     {% for category in categories %}