https://www.codeslog.com/en/series/frontend--accessibility/ Recent content in Frontend × Accessibility on Codeslog https://www.codeslog.com/images/default-cover.png?v=20260114T1436 https://www.codeslog.com/images/default-cover.png?v=20260114T1436 Hugo -- 0.168.0 en-US Sat, 24 Oct 2026 02:02:00 +0900 https://www.codeslog.com/en/posts/modal-dialog-implementation/ Sat, 24 Oct 2026 02:02:00 +0900 https://www.codeslog.com/en/posts/modal-dialog-implementation/ Compare dialog showModal() with a div modal: inert, focus trap, ESC, scroll lock, focus restoration, and why Tab leaves a dialog (measured in Chrome). https://www.codeslog.com/en/posts/form-ux-validation/ Tue, 15 Sep 2026 11:31:00 +0900 https://www.codeslog.com/en/posts/form-ux-validation/ Forms that flash errors on focus, or stay silent until submit, fail users. Get validation timing, aria-invalid, and aria-describedby right for accessible forms. https://www.codeslog.com/en/posts/spa-focus-management/ Tue, 15 Sep 2026 11:26:00 +0900 https://www.codeslog.com/en/posts/spa-focus-management/ Why screen readers stay silent after SPA route changes, and how to fix it in React and Next.js with focus management, aria-live, and focus restoration patterns. https://www.codeslog.com/en/posts/opacity-contrast-trap/ Tue, 21 Jul 2026 00:30:00 +0900 https://www.codeslog.com/en/posts/opacity-contrast-trap/ You put a dark gray in your CSS, yet the accessibility checker flags it for low contrast. The culprit is opacity. Here's how opacity mixes your text color into the background and quietly kills contrast — with a real case, the math, and the fix. https://www.codeslog.com/en/posts/high-contrast-mode/ Sat, 18 Jul 2026 22:47:00 +0900 https://www.codeslog.com/en/posts/high-contrast-mode/ Dark mode is about choosing colors; high contrast mode is about responding to the colors the OS forces. How to support low-vision users with the forced-colors media query, system color keywords, and prefers-contrast — with practical code. https://www.codeslog.com/en/posts/dark-mode-implementation/ Sat, 18 Jul 2026 02:44:00 +0900 https://www.codeslog.com/en/posts/dark-mode-implementation/ Design dark mode with CSS custom properties, implement prefers-color-scheme with JS toggle, and verify color contrast in both modes. A practical guide to dark mode that works for everyone.