Skip to content

Implement WCAG AA accessibility improvements#5

Open
TManITtech wants to merge 1 commit intomasterfrom
accessibility-improvements
Open

Implement WCAG AA accessibility improvements#5
TManITtech wants to merge 1 commit intomasterfrom
accessibility-improvements

Conversation

@TManITtech
Copy link
Owner

Summary

Implements all accessibility improvements identified in the WCAG AA audit.

Changes

Critical fixes

  • WCAG 3.1.1 — Added lang="he" dir="rtl" to <html> on both pages so screen readers select the correct Hebrew TTS engine
  • WCAG 4.1.2 — Added aria-label="Toggle dark/light theme" to the theme toggle button (index.html)
  • WCAG 2.1.1 + 4.1.2 — Toggle images are now keyboard-accessible: role="button", tabindex="0", aria-pressed state, and an Enter/Space keydown handler

Serious fixes

  • WCAG 2.4.1 — Added a visually-hidden skip-to-main-content link that becomes visible on focus
  • WCAG 1.3.1 — Added <header> around the actionBox and <main id="main-content"> around the prayer text
  • WCAG 2.4.7 — Added :focus-visible outlines for .toggleImg and #theme-toggle (3 px solid blue)

Moderate fixes

  • WCAG 3.1.2 — Added lang="en" to all English-language passages (.instr paragraphs and accordion <h2> headings)
  • WCAG 2.3.3 — Added @media (prefers-reduced-motion: reduce) block to suppress animations/transitions for users who prefer it
  • Security / mixed content — Upgraded Al_Hamichya.html jQuery from HTTP 1.11.2 → HTTPS 3.7.1 and jQuery UI from 1.11.3 → 1.14.0

CSS additions (mainStyle.css)

  • .skip-link — slide-in-on-focus pattern
  • .visually-hidden — standard screen-reader-only utility class
  • focus-visible rules for interactive elements
  • prefers-reduced-motion media query

This PR was generated with Oz.

- Add lang="he" dir="rtl" to <html> 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 <header>, prayer content in <main id="main-content"> (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 <oz-agent@warp.dev>
@kilo-code-bot
Copy link

kilo-code-bot bot commented Mar 9, 2026

Code Review Summary

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity Count
WARNING 1
Issue Details (click to expand)

WARNING

File Line Issue
index.html 168 HTML nesting issue: .barticle div is closed after </main>, which breaks proper element nesting
Al_Hamichya.html 164 Same HTML nesting issue as index.html
Positive Observations

This PR contains significant accessibility improvements:

  • jQuery update: Upgraded from 1.11.2 to 3.7.1 (security improvement)
  • jQuery UI update: Upgraded from 1.11.3 to 1.14.0
  • RTL support: Added lang="he" dir="rtl" to html elements
  • Skip navigation: Added skip link for keyboard users
  • Semantic HTML: Added <header> and <main> elements
  • ARIA improvements: Added role, tabindex, and aria-pressed to toggle images
  • Keyboard accessibility: Added Enter/Space key handlers for toggle images
  • Focus indicators: Added :focus-visible styles for better keyboard navigation
  • Reduced motion: Added prefers-reduced-motion media query
  • Language marking: Added lang="en" to English text elements
Files Reviewed (3 files)
  • Al_Hamichya.html - 1 issue
  • Al_Hamichya_files/mainStyle.css - No issues
  • index.html - 1 issue

Note: The HTML nesting issue is a WARNING because while browsers are lenient and may render this correctly, it can cause:

  1. Screen reader navigation issues
  2. Potential CSS styling problems for the .barticle element
  3. Invalid HTML that may cause issues in strict XML/HTML parsers

To fix: Ensure .barticle div is closed before </main>:

</div>  <!-- close .barticle -->
</main>

instead of:

</main>
</div>  <!-- .barticle closes AFTER main - invalid nesting! -->

Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d615349164

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".


</div>
</div>
</main>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Add missing closing div before closing main

Here </main> is emitted while the <div class="article barticle"> opened above is still unclosed (this revision leaves the page with 19 <div> openings but only 18 </div> closings). Browsers will auto-repair malformed markup, but that can produce inconsistent DOM structure for styling/accessibility tools and makes the landmark/content hierarchy unreliable; insert the missing </div> before closing main (the same pattern is present in Al_Hamichya.html).

Useful? React with 👍 / 👎.

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@codex address that feedback

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary

  • Addressed the review feedback by fixing invalid element nesting in index.html: the .article.barticle container is now explicitly closed before </main>. index.htmlL163-L170
  • Applied the same nesting fix in Al_Hamichya.html so both pages have consistent, valid structure (.article.barticle closes before </main>). Al_Hamichya.htmlL159-L166
  • Committed the changes (5ecb1d5) and created a follow-up PR titled “Follow-up: fix invalid main/article nesting in accessibility PR.”

Testing

  • for f in index.html Al_Hamichya.html; do echo "== $f =="; echo -n "open div: "; rg -o '<div\\b' "$f" | wc -l; echo -n "close div: "; rg -o '</div>' "$f" | wc -l; done
  • git diff -- index.html Al_Hamichya.html

View task →

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant