From d61534916465b668a9712335cde6a58af27eb8a6 Mon Sep 17 00:00:00 2001 From: Warp Date: Mon, 9 Mar 2026 21:42:59 +0000 Subject: [PATCH] Implement WCAG AA accessibility improvements - Add lang="he" dir="rtl" to on both pages (WCAG 3.1.1) - Add aria-label to theme-toggle button (WCAG 4.1.2) - Add role="button", tabindex="0", aria-pressed to toggle images (WCAG 2.1.1, 4.1.2) - Add keydown (Enter/Space) handler for toggle images (WCAG 2.1.1) - Update checkImage() to sync aria-pressed state dynamically - Add skip-to-main-content link (WCAG 2.4.1) - Wrap header area in
, prayer content in
(WCAG 1.3.1) - Add lang="en" to all English text passages (.instr paragraphs, accordion headings) (WCAG 3.1.2) - Add .skip-link and .visually-hidden CSS utilities - Add :focus-visible outlines for .toggleImg and #theme-toggle (WCAG 2.4.7) - Add prefers-reduced-motion media query (WCAG 2.3.3) - Upgrade Al_Hamichya.html jQuery from HTTP 1.11.2 to HTTPS 3.7.1 and jQuery UI to 1.14.0 Co-Authored-By: Oz --- Al_Hamichya.html | 50 ++++++++++++++++++++----------- Al_Hamichya_files/mainStyle.css | 53 +++++++++++++++++++++++++++++++++ index.html | 46 ++++++++++++++++++---------- 3 files changed, 115 insertions(+), 34 deletions(-) diff --git a/Al_Hamichya.html b/Al_Hamichya.html index 0f74a77..1e21601 100644 --- a/Al_Hamichya.html +++ b/Al_Hamichya.html @@ -1,6 +1,6 @@ - + @@ -9,10 +9,10 @@ - + - - + + +
+

ברכת מעין שלש

- Mezonos - Wine - Shivas Haminim + Mezonos + Wine + Shivas Haminim
+
+

בָּרוּךְ אַתָּה יהוה אֱלֹהֵינוּ מֶלֶךְ הָעוֹלָם,

@@ -106,17 +110,17 @@

ברכת מעין שלש

-

Rosh Chodesh

+

Rosh Chodesh

וְזָכְרֵנוּ לְטוֹבָה בְּיוֹם רֹאש הַחֹדֶשׁ הַזֶה.

-

Pesach

+

Pesach

וְשַׂמְּחֵנוּ בְּיוֹם חַג הַמַּצּוֹת הַזֶה.

-

Sukkos

+

Sukkos

וְשַׂמְּחֵנוּ בְּיוֹם חַג הַסֻּכּוֹת הַזֶה.

@@ -130,13 +134,13 @@

Sukkos

וְעַל פְּרִי הַגָּפֶן

-

* If the wine is from Eretz Yisrael, some substitute with:

+

* If the wine is from Eretz Yisrael, some substitute with:

וְעַל פְּרִי גַפְנָהּ

וְעַל הַפֵּרוֹת

-

* If the fruit is from Eretz Yisrael, some substitute with:

+

* If the fruit is from Eretz Yisrael, some substitute with:

וְעַל פֵּירוֹתֶיהָ.

@@ -148,17 +152,16 @@

Sukkos

וְעַל פְּרִי הַגָּפֶן

-

* If the wine is from Eretz Yisrael, some substitute with:

+

* If the wine is from Eretz Yisrael, some substitute with:

וְעַל פְּרִי גַפְנָהּ

וְעַל הַפֵּרוֹת

-

* If the fruit is from Eretz Yisrael, some substitute with:

+

* If the fruit is from Eretz Yisrael, some substitute with:

וְעַל פֵּירוֹתֶיהָ.

-
- -
+
+
@@ -188,11 +191,22 @@

Sukkos

checkImage("ShivasHaminim"); }); + $('.toggleImg').on('keydown', function(e) + { + if (e.key === 'Enter' || e.key === ' ') + { + e.preventDefault(); + $(this).trigger('click'); + } + }); + function checkImage(id) { var opacity = $("#" + id).css('opacity'); + var isActive = parseFloat(opacity).toFixed(1) !== '0.4'; + $("#" + id).attr('aria-pressed', isActive); - if (parseFloat(opacity).toFixed(1) === '0.4') + if (!isActive) { sectionShowHide(id, false) } diff --git a/Al_Hamichya_files/mainStyle.css b/Al_Hamichya_files/mainStyle.css index 38af12a..5d042b6 100644 --- a/Al_Hamichya_files/mainStyle.css +++ b/Al_Hamichya_files/mainStyle.css @@ -1,5 +1,36 @@ a {color:blue} +/* Skip navigation link (hidden until focused) */ +.skip-link { + position: absolute; + top: -50px; + left: 0; + background: #000; + color: #fff; + padding: 8px 16px; + z-index: 9999; + font-size: 1rem; + text-decoration: none; + border-radius: 0 0 4px 0; + transition: top 0.2s; +} +.skip-link:focus { + top: 0; +} + +/* Screen-reader-only utility */ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + html{ font-size:100%; } @@ -238,6 +269,16 @@ img{ cursor: pointer; } +.toggleImg:focus-visible { + outline: 3px solid #005fcc; + outline-offset: 3px; +} + +#theme-toggle:focus-visible { + outline: 3px solid #005fcc; + outline-offset: 2px; +} + #searcher .box{ background-color:#FFDC8A; } @@ -430,6 +471,18 @@ img{ margin-right: 5px; } +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + .skip-link { + transition: none; + } +} + @media (max-width: 750px) { html { font-size: 115%; diff --git a/index.html b/index.html index 7a468e1..934e50e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -71,22 +71,26 @@ +
+
- +

ברכת מעין שלש

- Mezonos - Wine - Shivas Haminim + Mezonos + Wine + Shivas Haminim
+
+

בָּרוּךְ אַתָּה יהוה אֱלֹהֵינוּ מֶלֶךְ הָעוֹלָם,

@@ -110,17 +114,17 @@

ברכת מעין שלש

-

Rosh Chodesh

+

Rosh Chodesh

וְזָכְרֵנוּ לְטוֹבָה בְּיוֹם רֹאש הַחֹדֶשׁ הַזֶה.

-

Pesach

+

Pesach

וְשַׂמְּחֵנוּ בְּיוֹם חַג הַמַּצּוֹת הַזֶה.

-

Sukkos

+

Sukkos

וְשַׂמְּחֵנוּ בְּיוֹם חַג הַסֻּכּוֹת הַזֶה.

@@ -134,13 +138,13 @@

Sukkos

וְעַל פְּרִי הַגָּפֶן

-

* If the wine is from Eretz Yisrael, some substitute with:

+

* If the wine is from Eretz Yisrael, some substitute with:

וְעַל פְּרִי גַפְנָהּ

וְעַל הַפֵּרוֹת

-

* If the fruit is from Eretz Yisrael, some substitute with:

+

* If the fruit is from Eretz Yisrael, some substitute with:

וְעַל פֵּירוֹתֶיהָ.

@@ -152,17 +156,16 @@

Sukkos

וְעַל פְּרִי הַגָּפֶן

-

* If the wine is from Eretz Yisrael, some substitute with:

+

* If the wine is from Eretz Yisrael, some substitute with:

וְעַל פְּרִי גַפְנָהּ

וְעַל הַפֵּרוֹת

-

* If the fruit is from Eretz Yisrael, some substitute with:

+

* If the fruit is from Eretz Yisrael, some substitute with:

וְעַל פֵּירוֹתֶיהָ.

-
- -
+
+
@@ -192,11 +195,22 @@

Sukkos

checkImage("ShivasHaminim"); }); + $('.toggleImg').on('keydown', function(e) + { + if (e.key === 'Enter' || e.key === ' ') + { + e.preventDefault(); + $(this).trigger('click'); + } + }); + function checkImage(id) { var opacity = $("#" + id).css('opacity'); + var isActive = parseFloat(opacity).toFixed(1) !== '0.4'; + $("#" + id).attr('aria-pressed', isActive); - if (parseFloat(opacity).toFixed(1) === '0.4') + if (!isActive) { sectionShowHide(id, false) }