From c02d1971337d9c7a45971557c1d79f8eff392af6 Mon Sep 17 00:00:00 2001 From: Chris Henrick <161748+clhenrick@users.noreply.github.com> Date: Mon, 27 Nov 2023 14:56:00 -0800 Subject: [PATCH] Improve accessibility of home page slides (#125) * set attr inert to true for all non-active slides to remove non-viewable items from the tab index * set focus on active slide when updating * set attr aria-hidden to true on inactive slides: to hide their content from screen reader users * made slides section elements with accessible names - made slides container a main element * set active slide aria-hidden to false... rather than remove the attribute (is this better for assistive tech?) * updated dep caniuse-lite * adjust html to utilize carousel pattern from wai apg: see: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/:wq * fixed slides keyboard navigation (in dev env) * added missing alt text to images * updated slide 8 h4s to be h3s * added code comments * cleaned up logic for setting of active slide * fixed code comment --- app/src/components/keyboardNavigation.js | 3 +- app/src/components/slidesContainer.js | 14 +- app/src/hbs_templates/main.hbs | 377 ++++++++++++++--------- app/src/scss/_columns.scss | 6 +- app/src/scss/_slides.scss | 2 +- app/yarn.lock | 6 +- 6 files changed, 252 insertions(+), 156 deletions(-) diff --git a/app/src/components/keyboardNavigation.js b/app/src/components/keyboardNavigation.js index 99915387..75367c51 100644 --- a/app/src/components/keyboardNavigation.js +++ b/app/src/components/keyboardNavigation.js @@ -35,7 +35,8 @@ export class KeyboardNavigation extends Component { if ( event.target && typeof event.target.matches === "function" && - !event.target.matches("body") + // disregard the event when the target is NOT coming from a .slide div element + !event.target.matches("div.slide") ) { return; } diff --git a/app/src/components/slidesContainer.js b/app/src/components/slidesContainer.js index 118bdd8e..248973e5 100644 --- a/app/src/components/slidesContainer.js +++ b/app/src/components/slidesContainer.js @@ -55,8 +55,18 @@ export class SlidesContainer extends Component { } set activeSlide(value) { - this.slides.forEach((slide) => slide.classList.remove("active")); - this.slides[value].classList.add("active"); + this.slides.forEach((slide) => { + if (slide === this.slides[value]) { + slide.classList.add("active"); + slide.removeAttribute("inert"); + slide.setAttribute("aria-hidden", false); + slide.focus(); + } else { + slide.classList.remove("active"); + slide.setAttribute("inert", true); + slide.setAttribute("aria-hidden", true); + } + }); } get activeSlide() { diff --git a/app/src/hbs_templates/main.hbs b/app/src/hbs_templates/main.hbs index a0a9cc4e..4a6cd101 100644 --- a/app/src/hbs_templates/main.hbs +++ b/app/src/hbs_templates/main.hbs @@ -1,7 +1,7 @@ {{>navigation}}
- +

{{mobile_msg}}

@@ -12,173 +12,262 @@ {{>progress_indicator}} -
-
- -
- {{! LanguageToggle mobile / tablet only }} - {{>language_toggle}} +
+ {{!-- NOTE: aria-live is used here so that when the next slide becomes active the assistive tech (e.g. screen reader) notifies the user of the change --}} +
+
+
+ {{! LanguageToggle mobile / tablet only }} + {{>language_toggle}} +
+
+ + +

{{ slide01.h1 }}

+

{{ slide01.subhead }}

+

{{ slide01.landing }}

+

+ + {{ slide01.go_step_4 }} + +

+
+
-
- - -

{{ slide01.h1 }}

-

{{ slide01.subhead }}

-

{{ slide01.landing }}

-

- - {{ slide01.go_step_4 }} - -

+
+
+

{{slide02.h2}}

+

{{slide02.privacy}}

+ {{>address_search_form}} +
- -
-
-
-

{{slide02.h2}}

-

{{slide02.privacy}}

- {{>address_search_form}} +
+
+

{{slide03.checking }}

+

{{slide03.p}}

+
+
-
-
-
-

{{slide03.checking }}

-

{{slide03.p}}

-
-
-
+
+
+ -
-
- +
+

{{{slide04.no.p}}}

+
-
-

{{{slide04.no.p}}}

+
+ {{>search_result_map}} +

{{slide04.map.caption}}

+

{{slide04.map.view_map}}

+
-
- {{>search_result_map}} -

{{slide04.map.caption}}

-

{{slide04.map.view_map}}

-
+
- -
- -
-
- -

{{slide05.h2}}

-
-

{{slide05.mail}}

-

{{slide05.phone}}
718 739-6400

-

{{slide05.visit}}
{{slide05.office}}

+
+
+

{{slide05.h2}}

+
+

{{slide05.mail}}

+

{{slide05.phone}}
718 739-6400

+

{{slide05.visit}}
{{slide05.office}}

+
+

{{slide05.tell_them}}

+

{{slide05.mailed}}

-

{{slide05.tell_them}}

-

{{slide05.mailed}}

+
- -
-
-
- -

{{slide06.h2}}

-

- {{slide06.arrive}} -

-

- {{slide06.friends}} -

- {{>add_to_calendar}} +
+
+

{{slide06.h2}}

+

+ {{slide06.arrive}} +

+

+ {{slide06.friends}} +

+ {{>add_to_calendar}} +
+
- -
-
-
- -

{{slide07.h2}}

- - - -

- {{slide07.p}} -

+
+
+

{{slide07.h2}}

+ + + +

+ {{slide07.p}} +

+
+
- -
-
-
- -

{{slide08.h2}}

- -
-

{{slide08.option01}}

-

- {{slide08.no_local_tr.a}} - {{slide08.no_local_tr.p}} -

+
+
+

{{slide08.h2}}

+
+

{{slide08.option01}}

+

+ {{slide08.no_local_tr.a}} + {{slide08.no_local_tr.p}} +

- + -

{{slide08.option02}}

-

{{slide08.p1}} - {{slide08.a}} - {{slide08.p2}} -

+

{{slide08.option02}}

+

{{slide08.p1}} + {{slide08.a}} + {{slide08.p2}} +

+
+
- -
-
-
-

{{slide09.h2}}

- -
- - - {{slide09.learn}} - -
- -
+
diff --git a/app/src/scss/_columns.scss b/app/src/scss/_columns.scss index 238d78bf..f9346660 100644 --- a/app/src/scss/_columns.scss +++ b/app/src/scss/_columns.scss @@ -124,7 +124,7 @@ } } - h4 { + h3 { position: relative; margin-top: 0; font-family: $header-font; @@ -133,10 +133,6 @@ text-align: center; color: $green; - &:last-child { - top: -3px; - } - @include responsive(small-screens) { font-size: 1.5em; } diff --git a/app/src/scss/_slides.scss b/app/src/scss/_slides.scss index 1ca907d7..9f3084e3 100644 --- a/app/src/scss/_slides.scss +++ b/app/src/scss/_slides.scss @@ -1,4 +1,4 @@ -.slides-container { +.slides { position: absolute; top: 60px; width: 960px; diff --git a/app/yarn.lock b/app/yarn.lock index 6e6ca701..caacc354 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -2498,9 +2498,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001449: - version "1.0.30001450" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz#022225b91200589196b814b51b1bbe45144cf74f" - integrity sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew== + version "1.0.30001564" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz" + integrity sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg== capture-exit@^2.0.0: version "2.0.0"