From fa9e24763faedabef5ad3d7dc31a6d197d92c7c3 Mon Sep 17 00:00:00 2001 From: Eric Wagoner Date: Wed, 24 Dec 2025 10:30:14 -0500 Subject: [PATCH] Improve accessibility throughout the application MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add skip-to-content link for keyboard users - Add ARIA roles and labels to modals (dialog, aria-modal, aria-labelledby) - Make inventory items keyboard accessible (tabindex, role=button, onkeydown) - Make container legend items keyboard accessible with aria-pressed state - Make stats clickable area keyboard accessible - Add aria-labels to FAB and lock buttons - Add aria-hidden to decorative SVGs and color dots - Add live regions for toast notifications and loading states - Associate form labels with inputs via for= attribute - Add visually-hidden CSS class for screen reader text 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- index.html | 87 +++++++++++++++++++++++++++++++++++------------------- 1 file changed, 57 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 378fd58..58ee1a2 100644 --- a/index.html +++ b/index.html @@ -591,6 +591,19 @@ font-size: 0.9rem; } + /* Accessibility: visually hidden but available to screen readers */ + .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; + } + .toast { position: fixed; bottom: 100px; @@ -622,8 +635,9 @@ -
- + +
+
@@ -642,7 +656,7 @@
0
In Stock
-
+
0
Out of Stock 📋
@@ -650,10 +664,11 @@
- + -
@@ -677,30 +692,30 @@

Print this QR code and place it on your pantry shelf for quick access.

- -

@@ -718,12 +733,12 @@ -