More A11y improvements (#72)

* hide backround video and controls for screen readers * use wet ids and add hidden descriptive titles for menus * remove wb-sm default background * add translation strings
cds-snc · Jan 9, 2018 · efebda8 · efebda8
1 parent 89a74ae
commit efebda8
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/_data/trans.yml b/_data/trans.yml
@@ -26,6 +26,7 @@ en:
   terms-and-conditions: "Terms and Conditions"
   terms-link: "/legal/terms/"
   top-of-page: "Top of Page"
+  topics-menu: "Topics menu"
   trans-abbr-switch: "fr"
   trans-abbr: "en"
   trans-base-url: "http://numerique.canada.ca"
@@ -59,6 +60,7 @@ fr:
   terms-and-conditions: "Avis"
   terms-link: "/transparence/avis/"
   top-of-page: "Haut de la page"
+  topics-menu: "Menu des sujets"
   trans-abbr-switch: "en"
   trans-abbr: "fr"
   trans-base-url: "http://digital.canada.ca"

diff --git a/_includes/cds/fip.html b/_includes/cds/fip.html
@@ -7,7 +7,10 @@
                 </a>
             </div>
             <div class="col-xs-8">
-                <div id="lang" class="lang">{% include cds/lang-switch.html %}</div>
+                <section id="wb-lng" class="visible-md visible-lg">
+                    <h2>{{ site.data.trans[page.lang].language-selection }}</h2>
+                    <div id="lang" class="lang">{% include cds/lang-switch.html %}</div>
+                </section>
             </div>
         </div>
     </div>

diff --git a/_includes/cds/site-menu.html b/_includes/cds/site-menu.html
@@ -1,5 +1,6 @@
-<nav role="navigation" data-trgt="mb-pnl" class="cds-menu" typeof="SiteNavigationElement">
+<nav role="navigation" id="wb-sm" data-trgt="mb-pnl" class="cds-menu" typeof="SiteNavigationElement">
     <div class="container topbar" id="site--topbar">
+        <h2>{{ site.data.trans[page.lang].topics-menu }}</h2>
         <div class="row">
             <div class="col-xs-4 col-sm-3">
                 <a href="/" class="cds-logo" role="img" aria-label="{{ site.data.trans[page.lang].aria-cds-website }}"></a>
@@ -9,7 +10,7 @@
                 <div id="js-mobileNav">
                     <div id="js-mobileNav--closeContainer">
                         <button id="js-mobileNav--button">
-                            <span class="text">Close</span>
+                            <span class="text">{{ site.data.trans[page.lang].close }}</span>
                             <span class="glyphicon glyphicon-remove close-icon"></span>
                         </button>
                     </div>

diff --git a/_layouts/cds/home.html b/_layouts/cds/home.html
@@ -6,12 +6,12 @@
 
     <div class="page-banner">
         <div class="page-banner--video">
-            <video playsinline muted loop poster="/assets/img/cds/header-images/front-poster-image.jpg" id="js-video-bg">
+            <video playsinline muted loop poster="/assets/img/cds/header-images/front-poster-image.jpg" id="js-video-bg" aria-hidden="true">
                 <source src="/assets/img/cds/header-images/homepage_header.mp4" type="video/mp4">
             </video>
             <div class="page-banner--scrim"></div>
 
-            <div class="page-banner--video-controls hidden">
+            <div class="page-banner--video-controls hidden" aria-hidden="true">
                 <div id="js-play-pause">
                     <a href="#" id="js-paused" class="video-banner--control-button">
                         <span class="fa fa-play pause-ico"></span>

diff --git a/_sass/cds/_layout.scss b/_sass/cds/_layout.scss
@@ -36,6 +36,10 @@
   }
 
   // Language Selector
+  #wb-lng {
+    padding-top: 0 !important;
+  }
+
   .lang {
     display    : block;
     text-align : right;
@@ -76,6 +80,10 @@
 //
 ////////////////////////////////////////////////////////////
 
+#wb-sm {
+  background: none;
+}
+
 .page-banner {
   background-color    : $dark-grey;
   background-size     : cover;