Add "Skip to Content" + other accessibility fixes

- Add `roles` to the navbar and the flash bag elements - Fix keyboard navigation focusing on hidden checkbox - The "Skip to Content" option should come before the hamburger menu for mobile nav
allejo · Jan 12, 2018 · 569ec0c · 569ec0c
1 parent e3133e1
commit 569ec0c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/assets/css/utilities/_accessibility.scss b/assets/css/utilities/_accessibility.scss
@@ -1,3 +1,14 @@
+a.skip-to-content {
+    @include theme-rule(background-color, 'navigation.background');
+
+    &:active,
+    &:focus {
+        @include position(absolute, 0, null, null, 0);
+
+        z-index: 1000;
+    }
+}
+
 @include responsify('.sr-only%infix') {
     @include sr-only();
 }

diff --git a/views/layout.html.twig b/views/layout.html.twig
@@ -48,6 +48,10 @@
     <body>
         {# Elements that are positioned absolutely or fixed w/CSS should be placed here BEFORE the app-body container #}
 
+        <a href="#content" class="skip-to-content sr-only sr-only-focusable p2" tabindex="0">
+            Skip to Content
+        </a>
+
         <!--[if lte IE 9]>
             <div class="c-system-alert">
                 <h1>You're using an unsupported browser</h1>
@@ -77,7 +81,7 @@
 
         <div class="c-flashbag">
             {% for message in session.flashbag.all %}
-                <p class="c-flashbag__item c-alert c-alert--info">{{- message.0 -}}</p>
+                <p class="c-flashbag__item c-alert c-alert--info" role="alert">{{- message.0 -}}</p>
             {% endfor %}
         </div>
 
@@ -101,15 +105,15 @@
             <header class="c-header">
                 <div class="container">
                     <div class="row align-items-center">
-                        <label class="mb0" for="mobile-menu" tabindex="1" data-option="clickable-label">
+                        <label class="mb0" for="mobile-menu" tabindex="0" data-option="clickable-label">
                             <i class="fa fa-bars u-hide-lg" aria-hidden="true"></i>
                             <span class="sr-only">Press space to open navigation menu</span>
                         </label>
-                        <input type="checkbox" id="mobile-menu" class="c-mobile-menu sr-only">
+                        <input type="checkbox" id="mobile-menu" class="c-mobile-menu sr-only" tabindex="-1">
 
                         <div class="c-branding">
                             <a href="{{ path('index') }}">
-                                <img src="{{ asset('assets/imgs/bzflag_icon.png') }}" />
+                                <img src="{{ asset('assets/imgs/bzflag_icon.png') }}" aria-hidden="true" />
                                 {{- app.siteTitle -}}
                             </a>
                         </div>
@@ -143,7 +147,7 @@
                     </div>
                 {% endblock %}
 
-                <main class="mb3" role="main">
+                <main class="mb3" id="content" role="main">
                     {% block content %}{% endblock %}
                 </main>
             </div>

diff --git a/views/navbar.html.twig b/views/navbar.html.twig
@@ -32,7 +32,7 @@
     ) }}
 {% endmacro %}
 
-<nav class="c-navigation">
+<nav class="c-navigation" role="navigation">
     <ul id="menu-pages" class="c-site_pages">
         {{ _self.page('News', 'News', 'news_list', 'thumb-tack') }}
         {{ _self.page('Teams', 'Team', 'team_list', 'users') }}