diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 0250ad4cb2..ac53bb5d80 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -562,31 +562,32 @@ input[type=file] {
/* ACCESSIBILITY MENU */
.accessibility-menu {
+ display: block;
position: absolute;
- left: -1000px;
- top: -1000px;
+ z-index: 999;
+
+ top: -100%;
+ left: -100%;
width: 1px;
height: 1px;
- overflow: hidden;
- z-index: 5000;
- background-color: var(--bg1);
- padding: var(--unit-size);
- border: solid 2px var(--bg3);
- border-radius: var(--unit-size);
- box-shadow: var(--shadow);
}
.accessibility-menu ul {
list-style-type: disc;
}
-#anchor-menu:target ~ .accessibility-menu,
-.accessibility-menu:focus-within,
-.accessibility-menu a:focus {
- top: var(--unit-size) !important;
- left: var(--unit-size) !important;
- width: 30% !important;
- height: min-content !important;
+#anchor-menu:target + .accessibility-menu:focus-within,
+.accessibility-menu:focus-within {
+ top: var(--unit-size);
+ left: var(--unit-size);
+ width: 30%;
+ height: min-content;
+
+ background-color: var(--bg1);
+ padding: var(--unit-size);
+ border: solid 2px var(--bg3);
+ border-radius: var(--unit-size);
+ box-shadow: var(--shadow);
}
.anchor-hidden {
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 97f469b490..a1a6619fa6 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -1,9 +1,10 @@
-
+
{% block meta %}
-
+
+
{% endblock %}
@@ -31,10 +32,16 @@
</head>
<body class="bg">
-<a id="anchor-menu" class="anchor-hidden"></a>
-<aside class="accessibility-menu" tabindex="0">
- <h2>{{ 'Select page section:' | trans }}</h2>
+
+<a id="anchor-menu" href="#anchor-menu" class="anchor-hidden" aria-describedby="#accessibility-menu-title"></a>
+<aside class="accessibility-menu" aria-live="polite">
+ <h2 id="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2>
+ <a href="#anchor-menu" accesskey="z">{{ 'Accessibility menu. Here you can find fast shortcuts to various page regions!' | trans }}</a>
+
<br>
+
+ <p>Provided the following keyboard shortcut, the link is targeted, making navigation faster.</p>
+
<p>
{% if is_firefox() == true %}
<em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
@@ -43,13 +50,17 @@
{% endif %}
</p>
+ <p>
+ <strong tabindex="0">{{'The keyboard key ' | trans }}<kbd>Z</kbd>{{' accesses this menu.' | trans }}</strong>
+ <strong>{{ 'The other access keys are:' | trans }}</strong>
+ </p>
+
<nav>
<ul>
- <li><a href="#anchor-menu" accesskey="m">{{ 'This menu, (press \'m\' to access).' | trans }}</a></li>
- <li><a href="#anchor-left-panel" accesskey="h">{{ 'Left panel (press \'h\' to access).' | trans }}</a></li>
- <li><a href="#anchor-main-content" accesskey="k">{{ 'Main content (press \'k\' to access).' | trans }}</a></li>
- <li><a href="#anchor-main-page" accesskey="j">{{ 'Main page (press \'j\' to access).' | trans }}</a></li>
- <li><a href="#anchor-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li>
+ <li><a href="#anchor-left-panel" accesskey="h"><kbd>H</kbd>{{' for the Left panel.' | trans }}</a></li>
+ <li><a href="#anchor-main-content" accesskey="k"><kbd>K</kbd>{{ ' for the main content.' | trans }}</a></li>
+ <li><a href="#anchor-main-page" accesskey="j"><kbd>J</kbd>{{ ' for the main page.' | trans }}</a></li>
+ <li><a href="#anchor-right-panel" accesskey="l"><kbd>L</kbd>{{ ' for the right panel.' | trans }}</a></li>
</ul>
</nav>
</aside>
diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig
index 6fbd3d2213..23ad3263c2 100644
--- a/templates/sidepanel/left/left.html.twig
+++ b/templates/sidepanel/left/left.html.twig
@@ -5,11 +5,11 @@
<a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content">
{% if app.user %}
- <section class='profile'>
+ <section tabindex="0" class='profile' title="{{ 'Your profile information.' | trans }}">
<a id="user" href="{{ path('settings') }}">
- <img src='{{ user_avatar }}' alt="{{ 'Your avatar.' | trans }}" title="{{ 'Your avatar.' | trans }}" class="icon icon-avatar">
+ <img src='{{ user_avatar }}' title="{{ 'Your account\'s avatar.' | trans }}" class="icon icon-avatar">
<div id="user-info">
- <strong id="user-nickname" title="{{ 'Your nickname.' | trans }}">{{ user_nickname }}</strong>
+ <strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ user_nickname }}</strong>
<nav id="user-tags">
{% if user_tags %}
@@ -21,7 +21,7 @@
{% endif %}
</nav>
- <section id="user-stats">
+ <section tabindex="0" id="user-stats" title="{{ 'Your account statistics.' | trans }}">
{% if user_followers %}<h2>{{ 'Followers' | trans }} {{ user_followers }}</h2> {% endif %}
{% if user_followed %}<h2>{{ 'Followed' | trans }} {{ user_followed }}</h2> {% endif %}
</section>
@@ -33,7 +33,7 @@
{% endfor %} #}
</section>
- <nav class="profile-navigation">
+ <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}" aria-relevant="all">
<a href='#' title="{{ 'Check your messages.' | trans }}">Messages</a>
<a href="{{ path("replies", {'nickname' : user_nickname}) }}"
class='hover-effect {{ active("replies") }}' title="{{ 'Replies to your notes.' | trans }}">Replies</a>
@@ -46,16 +46,16 @@
</nav>
{% else %}
- <nav class="profile-navigation">
- <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}' title="{{ 'Login through your existing account.' | trans }}">Login</a>
+ <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}" aria-relevant="all">
+ <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}' title="{{ 'Login with your existing account.' | trans }}">Login</a>
<a href="{{ path('register') }}" title="{{ 'Register a new account!' | trans }}">Register</a>
</nav>
{% endif %}
<div class="timeline-nav">
- <strong id="timeline-nav-header">Timeline</strong>
+ <strong id="timeline-nav-header" title="{{ 'Navigate each timeline.' | trans }}" aria-relevant="all">Timeline</strong>
- <nav class='sec-nav' role="navigation" title="{{ 'Navigate through the different timelines.' | trans }}">
+ <nav class='sec-nav'>
<ul>
<li>
<a href="{{ path('main_public') }}"