Improve accessibility features

assets/css/partials/_animations.scss

@@ -2,6 +2,24 @@
 // ANIMATIONS
 // ----------------------------------------------------------------------------
 
+@-webkit-keyframes expand-outline {
+    from {
+		outline-offset: 0;
+	}
+	to {
+		outline-offset: 2px;
+	}
+}
+
+@keyframes expand-outline {
+	from {
+		outline-offset: 0;
+	}
+	to {
+		outline-offset: 2px;
+	}
+}
+
 @-webkit-keyframes wave-up {
     0% {
 		top: 0;

assets/css/partials/_variables.scss

@@ -46,6 +46,7 @@
     --black: #000;
     --transparent-black: rgba(0, 0, 0, 0.8);
     --jet: #333333;
+    --transparent-jet: rgba(51, 51, 51, 0.8);
     --granite-gray: #666666;
     --spanish-gray: #999999;
     --light-gray: #cccccc;
@@ -54,7 +55,8 @@
 
     // Plyr (audio player)
 
-    --plyr-color-main: var(--transparent-black);
+    --plyr-color-main: var(--transparent-jet);
+    --plyr-tab-focus-color: var(--white);
 }
 
 // Media queries

assets/css/style.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"CAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UCtEJ,WACI,qBACA,+DACA,gBACA,kBAGJ,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAII,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,uFACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,wCACA,eACA,wBACA,wBACA,sBACA,cACA,8CAIA,4CAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,oCACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCClFR,2BACI,GACF,MAEE,IACF,YAED,KACC,OAIF,mBACC,GACC,MAEE,IACF,YAED,KACC,OAIF,6BACI,GACF,SAEE,IACF,eAED,KACC,UAIF,qBACI,GACF,SAEE,IACF,eAED,KACC,UCrCF,KACI,oCACA,gCACA,kCACA,iBACA,8BAGJ,SAGI,mBAGJ,GACI,oCACA,8BACA,gCAGJ,GACI,oCACA,8BACA,gCACA,kBAGJ,GACI,oCACA,8BACA,gCACA,qBAGJ,EACI,mBACA,oCAGJ,OACI,oCAGJ,GACI,kBAKJ,EACI,iBACA,0BACA,2CACA,sCACA,mCAEA,yBAGI,mBAOR,KACI,iBACA,kBACA,iBACA,aACA,KACI,+DAMR,yBACC,kBAGD,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACC,WACG,gCACA,YACH,iKACA,0CACA,iDACG,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACH,UACA,mBACC,yDAED,cACC,yDAED,WACC,yDAGD,mBACC,eACA,sCACA,uFACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBACH,+CACA,0CACA,uCACA,8BACG,0BACH,sBAEA,yBACC,6BACA,yBACA,qBAIF,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,kBACA,UACA,uBACA,wBACA,UACA,gBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,mBACC,+DAED,cACC,+DAED,WACC,+DAGD,4BACC,WACA,YACA,YACA,cACM,mBACL,sDAEK,cACL,sDAEK,WACL,sDAIF,yCACC,kBACA,UAGD,yCACC,kBACA,UAGE,6DAEF,6BACA,yBACA,qBAGD,sCACC,8BAEA,0CACC,oCACG,gCACA,4BAGJ,uDACC,UAGD,uDACC,UAKH,sBACC,eACA,UACA,MACA,WACA,gBACA,gBACA,aACA,8GACA,0CACA,mBACA,kBACA,gBACA,+CACA,0CACA,uCAIC,4BACC,yCAGD,4BACC,kBACA,yCAGD,yDAEC,cACA,eACA,wBACA,qBACA,mCACA,+BACA,2BACA,+CACA,0CACA,uCAGD,oGAGC,mBAIF,oDACC,wBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAKE,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAOL,yBACC,eACA,UACA,MACA,OACA,YACA,aACA,8BACA,UACA,oBACA,oBACA,6CACA,wCACA,qCAEA,kCACC,WACA,oBACA,eAIF,qCAEC,sBACC,gBAIF,qCAEC,sBACC,gBAUF,cACI,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGJ,WACI,YACA,iBACA,aACA,KACI,iMAIJ,4BACA,wBACA,cAGJ,iBACI,iBAEA,qBACI,gBACA,2BACA,iBACA,4CAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAOR,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,sBACA,qBACA,kBACI,sEAEJ,cACI,sEAEJ,UACI,sEAIR,sCACI,uBACA,uBACA,kBACI,uEAEJ,cACI,uEAEJ,UACI,uEAKZ,gBACI,mBACA,8BACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACI,UACA,6CACA,wCACA,qCAIR,yBACI,UAEA,6BACI,UAIR,2BACI,yCACA,oCAGJ,6BACI,2CACA,sCAKJ,oCAEI,mCACA,YACA,0FAGJ,kCAEI,kBAGJ,gDAEI,gCACA,YAEA,gFACI,kBAKA,kHAEI,kBAIR,sDACF,oCAEM,sHAEI,kBAGV,4DACC,kBACA,mBAGD,kEACC,mBAGD,0EACC,YACA,kBACA,MACA,OAKH,kBACI,cACA,2BACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBAKA,+CACI,mBAIR,6BACI,sBACA,oBACA,wBACA,mCACA,kBAIR,qCAIQ,oCACI,yBAOZ,eACI,mCACA,YACA,0FAGJ,cACI,kBAGJ,gBACI,gCACA,YACA,kBAGJ,eACI,kBACA,kBAEA,iBACI,qBACA,aACA,mBACA,mBACA,4BACA,qBACA,yCACA,sDACA,iDACA,8CAEA,sEAGI,8BAWZ,YACI,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGJ,oBACI,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACF,uBACA,wBACA,kBACA,4BACM,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACN,+CACA,0CACA,uCAEM,wBACI,kBAGJ,0BACL,kBACM,0CACA,qCACA,kCAIP,yDAEC,qBAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,uBACI,oCACA,kBAGJ,qCAEI,YACI,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGJ,oBACI,QAGJ,uBACI,QACA","file":"style.min.css"}
+{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"CAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UCtEJ,WACI,qBACA,+DACA,gBACA,kBAGJ,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAII,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,uFACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,wCACA,eACA,yCACA,wBACA,wBACA,sBACA,cACA,8CAIA,0CACA,qCAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,oCACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCCpFR,kCACI,KACF,iBAED,GACC,oBAIF,0BACC,KACC,iBAED,GACC,oBAIF,2BACI,GACF,MAEE,IACF,YAED,KACC,OAIF,mBACC,GACC,MAEE,IACF,YAED,KACC,OAIF,6BACI,GACF,SAEE,IACF,eAED,KACC,UAIF,qBACI,GACF,SAEE,IACF,eAED,KACC,UCvDF,KACI,oCACA,gCACA,kCACA,iBACA,8BAGJ,SAGI,mBAGJ,GACI,oCACA,8BACA,gCAGJ,GACI,oCACA,8BACA,gCACA,kBAGJ,GACI,oCACA,8BACA,gCACA,qBAGJ,EACI,mBACA,oCAGJ,OACI,oCAGJ,GACI,kBAKJ,EACI,iBACA,0BACH,kBACG,2CACA,sCACA,mCAEA,yBAGI,mBAGP,gBACC,gCACA,mBACA,gDACG,2CAML,KACI,iBACA,kBACA,iBACA,aACA,KACI,+DAMR,yBACC,kBAGD,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACC,WACG,gCACA,YACH,iKACA,0CACA,iDACG,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACH,UACA,mBACC,yDAED,cACC,yDAED,WACC,yDAGD,mBACC,eACA,sCACA,uFACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBACH,+CACA,0CACA,uCACA,8BACG,0BACH,sBAEA,yBACC,6BACA,yBACA,qBAIF,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,kBACA,UACA,uBACA,wBACA,UACA,gBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,mBACC,+DAED,cACC,+DAED,WACC,+DAGD,4BACC,WACA,YACA,YACA,cACM,mBACL,sDAEK,cACL,sDAEK,WACL,sDAIF,yCACC,kBACA,UAGD,yCACC,kBACA,UAGE,6DAEF,6BACA,yBACA,qBAGD,sCACC,8BAEA,0CACC,oCACG,gCACA,4BAGJ,uDACC,UAGD,uDACC,UAKH,sBACC,eACA,UACA,MACA,WACA,gBACA,gBACA,aACA,8GACA,0CACA,mBACA,kBACA,gBACA,+CACA,0CACA,uCAIC,4BACC,yCAGD,4BACC,kBACA,yCAGD,6BACC,eACA,mCACA,+BACA,2BACA,+CACA,0CACA,uCAEA,iEAEC,wBAGD,+BACC,qBAEA,gHAGC,mBAGD,6CACC,gCAMJ,oDACC,wBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAKE,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAOL,yBACC,eACA,UACA,MACA,OACA,YACA,aACA,8BACA,UACA,oBACA,oBACA,6CACA,wCACA,qCAEA,kCACC,WACA,oBACA,eAIF,qCAEC,sBACC,gBAIF,qCAEC,sBACC,gBAUF,cACI,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGJ,WACI,YACA,iBACA,aACA,KACI,iMAIJ,4BACA,wBACA,cAGJ,iBACI,iBAEA,qBACI,gBACA,2BACA,iBACA,4CAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAOR,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,sBACA,qBACA,kBACI,sEAEJ,cACI,sEAEJ,UACI,sEAIR,sCACI,uBACA,uBACA,kBACI,uEAEJ,cACI,uEAEJ,UACI,uEAKZ,gBACI,mBACA,8BACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACI,UACA,6CACA,wCACA,qCAIR,yBACI,UAEA,6BACI,UAIR,2BACI,yCACA,oCAGJ,6BACI,2CACA,sCAKJ,oCAEI,mCACA,YACA,0FAGJ,kCAEI,kBAGJ,gDAEI,gCACA,YAEA,gFACI,kBAKA,kHAEI,kBAIR,sDACF,oCAEM,sHAEI,kBAGV,4DACC,kBACA,mBAGD,kEACC,kBAGD,0EACC,YACA,kBACA,MACA,OAKH,kBACI,cACA,2BACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBAKA,+CACI,mBAIR,6BACI,sBACA,oBACA,wBACA,mCACA,kBACA,oCAIR,qCAIQ,oCACI,yBAOZ,eACI,mCACA,YACA,0FAGJ,cACI,kBAGJ,gBACI,gCACA,YACA,kBAGJ,eACI,kBACA,kBAEA,iBACI,qBACA,aACA,mBACA,mBACA,4BACA,qBACA,yCACA,sDACA,iDACA,8CAEA,sEAGI,8BAWZ,YACI,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGJ,oBACI,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACF,uBACA,wBACA,kBACA,4BACM,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACN,+CACA,0CACA,uCAEM,wBACI,kBAGJ,0BACL,kBACM,0CACA,qCACA,kCAIP,qFAGC,qBAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,uBACI,oCACA,kBAGJ,qCAEI,YACI,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGJ,oBACI,QAGJ,uBACI,QACA","file":"style.min.css"}

assets/css/style.scss

@@ -61,6 +61,7 @@ em {
 a {
     color: var(--jet);
     text-decoration: underline;
+	border-radius: 2px;
     -webkit-transition: color 200ms ease-in-out;
     -o-transition: color 200ms ease-in-out;
     transition: color 200ms ease-in-out;
@@ -70,8 +71,14 @@ a {
     &:active {
         color: var(--black);
     }
-}
 
+	&:focus-visible {
+		outline: 1px dashed var(--black);
+		outline-offset: 2px;
+		-webkit-animation: expand-outline 200ms ease-out;
+	    animation: expand-outline 200ms ease-in-out;
+	}
+}
 
 // General grid layout
 
@@ -286,25 +293,34 @@ footer {
 			border-top: 1px solid var(--granite-gray);
 		}
 
-		a,
+		div {
-		span {
-			display: block;
 			padding: 1rem 0;
-			color: var(--light-gray);
-			text-decoration: none;
 			-webkit-transform: translateX(100%);
 			-ms-transform: translateX(100%);
 			transform: translateX(100%);
 			-webkit-transition: transform 400ms ease-in-out;
 			-o-transition: transform 400ms ease-in-out;
 			transition: transform 400ms ease-in-out;
+
+			a,
+			span {
+				color: var(--light-gray);
 			}
 
-		a:hover,
+			a {
-		a:focus,
+				text-decoration: none;
-		a:active {
+
+				&:hover,
+				&:focus,
+				&:active {
 					color: var(--white);
 				}
+
+				&:focus-visible {
+					outline: 1px dashed var(--white);
+				}
+			}
+		}
 	}
 
 	.header-bar__nav-item--active {
@@ -323,8 +339,7 @@ footer {
 		@for $i from 1 through 20 {
 			.header-bar__nav-item-#{$i} {
 
-				a,
+				div {
-				span {
 					-webkit-transform: translateX(0);
 					-ms-transform: translateX(0);
 					transform: translateX(0);
@@ -626,7 +641,7 @@ footer {
 		}
 
 		li + li {
-			margin: 0.5rem 0 0 0;
+			margin: 1rem 0 0 0;
 		}
 
 		li:before {
@@ -666,6 +681,7 @@ footer {
         margin: 1rem auto 0 auto;
         font-size: var(--caption-font-size);
         font-style: italic;
+        line-height: var(--text-line-height);
     }
 }
 
@@ -783,6 +799,7 @@ footer {
 
 
 		&:hover,
+		&:focus,
 	    &:active {
 			transform: scale(1.1);
 	    }

assets/js/app.js

@@ -21,13 +21,14 @@ let videoPlayers = [];
 // HEADER BAR ANIMATION //
 
 const headerBar = document.querySelector('.header-bar');
-const headerLogo =document.querySelector('.header-bar__logo');
+const headerLogo = document.querySelector('.header-bar__logo');
 let scrollOffset = 0;
 
 // NAVIGATION MENU ANIMATION //
 
 const headerNavBtn = document.querySelector('.header-bar__nav-button');
 const headerNavMenu = document.querySelector('.header-bar__nav-menu');
+const headerNavMenuListEls = document.querySelectorAll('.header-bar__nav-menu li');
 const headerNavOverlay = document.querySelector('.header-bar__nav-overlay');
 const touchPosition = {
 	initialX: null,
@@ -181,12 +182,8 @@ function setUpVideoPlayers() {
                 'duration',
                 'mute',
                 'volume',
-                'settings',
                 'fullscreen'
             ],
-            settings: [
-                'quality'
-            ],
             i18n: {
                 play: 'Lire',
                 pause: 'Mettre sur pause',
@@ -198,20 +195,6 @@ function setUpVideoPlayers() {
                 unmute: 'Activer le son',
                 enterFullscreen: 'Activer le mode plein écran',
                 exitFullscreen: 'Quitter le mode plein écran'
-            },
-            tooltips: {
-                controls: true,
-                seek: true
-            },
-            quality: {
-                default: 720,
-                options: [
-                    1080,
-                    720,
-                    480,
-                    360,
-                    240,
-                ]
             }
         });
     }
@@ -268,6 +251,16 @@ function toggleHeaderNav() {
     }
 }
 
+// Open header navigation
+function openHeaderNav() {
+    if (headerNavBtn && headerNavMenu) {
+        headerNavBtn.classList.add('header-bar__nav-button--custom-focus');
+        headerNavMenu.classList.add('header-bar__nav-menu--visible');
+		headerNavOverlay.classList.add('header-bar__nav-overlay--visible');
+        document.body.classList.add('body--hidden-overflow-y');
+    }
+}
+
 // Close header navigation
 function closeHeaderNav() {
     if (headerNavBtn && headerNavMenu) {
@@ -295,6 +288,24 @@ function closeHeaderNavOnClick() {
     });
 }
 
+// Open header navigation on menu list focusin event
+function openHeaderNavBeforeFocus() {
+    if (headerNavMenuListEls) {
+        for (let i = 0; i < headerNavMenuListEls.length; i++) {
+            headerNavMenuListEls[i].addEventListener('focusin', openHeaderNav);
+        }
+    }
+}
+
+// Close header navigation on menu list focusout event
+function closeHeaderNavAfterFocus() {
+    if (headerNavMenuListEls) {
+        for (let i = 0; i < headerNavMenuListEls.length; i++) {
+            headerNavMenuListEls[i].addEventListener('focusout', closeHeaderNav);
+        }
+    }
+}
+
 // Close header navigation on touchstart and touchmove events (swipe right)
 function closeHeaderNavOnSwipe() {
 	headerNavMenu.addEventListener('touchstart', function(e) {
@@ -352,4 +363,6 @@ document.addEventListener('scroll', function() {
 
 toggleHeaderNavOnClick();
 closeHeaderNavOnClick();
+openHeaderNavBeforeFocus();
+closeHeaderNavAfterFocus();
 closeHeaderNavOnSwipe();

site/templates/base.twig

@@ -21,13 +21,13 @@
             <div class="header-bar">
 
                 <div class="header-bar__logo" aria-hidden="true">
-                    <a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}">
+                    <a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}" tabindex="-1">
                         <h1 class="header-bar__logo-title">{{ site.title }}</h1>
                     </a>
                 </div>
 
                 <nav class="header-bar__nav" aria-label="Menu">
-                    <button class="header-bar__nav-button" tabindex="-1" aria-hidden="true">
+                    <button class="header-bar__nav-button" aria-hidden="true" tabindex="-1">
                         <svg viewBox="0 0 48 48" fill="currentColor">
                         	<path d="M7.5 36Q6.85 36 6.425 35.575Q6 35.15 6 34.5Q6 33.85 6.425 33.425Q6.85 33 7.5 33H30.5Q31.15 33 31.575 33.425Q32 33.85 32 34.5Q32 35.15 31.575 35.575Q31.15 36 30.5 36ZM7.5 25.4Q6.85 25.4 6.425 24.975Q6 24.55 6 23.9Q6 23.25 6.425 22.825Q6.85 22.4 7.5 22.4H24.5Q25.15 22.4 25.575 22.825Q26 23.25 26 23.9Q26 24.55 25.575 24.975Q25.15 25.4 24.5 25.4ZM7.5 15Q6.85 15 6.425 14.575Q6 14.15 6 13.5Q6 12.85 6.425 12.425Q6.85 12 7.5 12H30.5Q31.15 12 31.575 12.425Q32 12.85 32 13.5Q32 14.15 31.575 14.575Q31.15 15 30.5 15ZM34.75 23.95 41 30.2Q41.45 30.65 41.425 31.25Q41.4 31.85 40.95 32.3Q40.5 32.75 39.875 32.75Q39.25 32.75 38.8 32.3L31.5 25Q31.05 24.55 31.05 23.95Q31.05 23.35 31.5 22.9L38.8 15.6Q39.25 15.15 39.875 15.15Q40.5 15.15 40.95 15.6Q41.4 16.05 41.4 16.675Q41.4 17.3 40.95 17.75Z"/>
                         </svg>
@@ -35,40 +35,54 @@
                         	<path d="M24 26.1 13.5 36.6Q13.05 37.05 12.45 37.05Q11.85 37.05 11.4 36.6Q10.95 36.15 10.95 35.55Q10.95 34.95 11.4 34.5L21.9 24L11.4 13.5Q10.95 13.05 10.95 12.45Q10.95 11.85 11.4 11.4Q11.85 10.95 12.45 10.95Q13.05 10.95 13.5 11.4L24 21.9L34.5 11.4Q34.95 10.95 35.55 10.95Q36.15 10.95 36.6 11.4Q37.05 11.85 37.05 12.45Q37.05 13.05 36.6 13.5L26.1 24L36.6 34.5Q37.05 34.95 37.05 35.55Q37.05 36.15 36.6 36.6Q36.15 37.05 35.55 37.05Q34.95 37.05 34.5 36.6Z"/>
                         </svg>
                     </button>
-                    <ul class="header-bar__nav-menu">
+                    <ul class="header-bar__nav-menu" tabindex="-1">
                         {% set headerNavItemNo = 1 %}
                         {% if site.homePage.isActive %}
                             <li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
-                                <a href="{{ site.homePage.url }}" target="_self">{{ site.homePage.title }}</a>
+                                <div>
+                                    <a href="{{ site.homePage.url }}" target="_self" aria-current="page">{{ site.homePage.title }}</a>
+                                </div>
                             </li>
                         {% else %}
                             <li class="header-bar__nav-item-{{ headerNavItemNo }}">
+                                <div>
                                     <a href="{{ site.homePage.url }}" target="_self">{{ site.homePage.title }}</a>
+                                </div>
                             </li>
                         {% endif %}
                         {% set headerNavItemNo = headerNavItemNo + 1 %}
                         {% if pages.template('biography').first.isActive %}
                             <li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
-                                <a href="{{ pages.template('biography').first.url }}" target="_self">{{ pages.template('biography').first.title }}</a>
+                                <div>
+                                    <a href="{{ pages.template('biography').first.url }}" target="_self" aria-current="page">{{ pages.template('biography').first.title }}</a>
+                                </div>
                             </li>
                         {% else %}
                             <li class="header-bar__nav-item-{{ headerNavItemNo }}">
+                                <div>
                                     <a href="{{ pages.template('biography').first.url }}" target="_self">{{ pages.template('biography').first.title }}</a>
+                                </div>
                             </li>
                         {% endif %}
                         {% set headerNavItemNo = headerNavItemNo + 1 %}
                         <li class="header-bar__nav-item-{{ headerNavItemNo }}">
+                            <div>
                                 <span>Galeries</span>
+                            </div>
                             <ul>
                                 {% for gallery in pages.template('gallery') %}
                                     {% set headerNavItemNo = headerNavItemNo + 1 %}
                                     {% if gallery.isActive %}
                                         <li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
-                                            <a href="{{ gallery.url }}" target="_self">{{ gallery.title }}</a>
+                                            <div>
+                                                <a href="{{ gallery.url }}" target="_self" aria-current="page">{{ gallery.title }}</a>
+                                            </div>
                                         </li>
                                     {% else %}
                                         <li class="header-bar__nav-item-{{ headerNavItemNo }}">
+                                            <div>
                                                 <a href="{{ gallery.url }}" target="_self">{{ gallery.title }}</a>
+                                            </div>
                                         </li>
                                     {% endif %}
                                 {% endfor %}

site/templates/home.twig

@@ -7,14 +7,14 @@
 {% block main %}
     <main>
 
-        <section class="home-section">
+        <section class="home-section" aria-hidden="true">
 
             <div class="home">
                 <nav class="home__nav" aria-label="Menu">
                     {% set navItemNo = 1 %}
                     {% for gallery in pages.template('gallery') %}
                         <div class="home__nav-item-{{ navItemNo }}">
-                            <a href="{{ gallery.url }}" target="_self" class="home__nav-link">{{ gallery.title }}</a>
+                            <a href="{{ gallery.url }}" target="_self" class="home__nav-link" tabindex="-1">{{ gallery.title }}</a>
                         </div>
                     {% set navItemNo = navItemNo + 1 %}
                     {% endfor %}