Improvements for accessibility and screen readers

[galette.git] / galette / templates / default / public_page.html.twig
diff --git a/galette/templates/default/public_page.html.twig b/galette/templates/default/public_page.html.twig

index 91a3d317154905a5d83352bdfbdd55e7af1574b6..2a7ca0618e2345e1dba9d158ad393dc4ad41f42d 100644 (file)
--- a/galette/templates/default/public_page.html.twig
+++ b/galette/templates/default/public_page.html.twig
@@ -7,9 +7,10 @@
          } %}
      </head>
      <body class="{% if body_class is defined and body_class == "front_page" %}front-page {% endif %}pushable{% if login.isLogged() %} loggedin{% endif %} nojs">
+        <a href="#main-content" class="skiptocontent visually-hidden focusable">{{ _T("Skip to content") }}</a>
          {% include 'elements/navigation/navigation_sidebar.html.twig' %}
          {% include 'elements/navigation/navigation_topbar.html.twig' %}
-        <div class="pusher">
+        <main class="pusher">
              <div id="main" class="{% if cur_route == "login" or cur_route == "password-lost" or cur_route == "password-recovery" or cur_route == "directlink" %}text {% endif %}{% if not login.isLogged() %}ui container{% else %}full height{% if i18n.isRtl() %} rtl{% endif %}{% endif %}">
  {% if login.isLogged() %}
                  {% include "elements/navigation/navigation_aside.html.twig" %}
@@ -23,9 +24,11 @@
                              <div class="sub header">{% if preferences.pref_slogan %}{{ __(preferences.pref_slogan) }}{% endif %}</div>
                          </div>
                      </div>
+                    <a id="main-content" tabindex="-1"></a>
                      <h1 class="ui block center aligned header" style="position: relative">
  {% else %}
                      <div class="ui horizontal basic segments header">
+                        <a id="main-content" tabindex="-1"></a>
                          <div class="ui center aligned segment">
                              <h1>
  {% endif %}
@@ -39,10 +42,10 @@
                          {% include "elements/messages_inline.html.twig" %}
                          {% block content %}{{ _T("Public page content") }}{% endblock %}
                      </div>
-                    {% include "elements/footer.html.twig" %}
                  </section>
              </div>
-        </div>
+        </main>
+        {% include "elements/footer.html.twig" %}
          <a href="#" id="back2top" class="circular big ui icon button" title="{{ _T("Back to top") }}">
              <i class="arrow up icon" aria-hidden="true"></i>
          </a>