https://www.codeslog.com/en/tags/web-accessibility/ Recent content in Web-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/lighthouse-agentic-browsing-accessibility/ Sat, 10 Oct 2026 23:55:00 +0900 https://www.codeslog.com/en/posts/lighthouse-agentic-browsing-accessibility/ On test pages, a div button no keyboard can press scored Accessibility 100 and Agentic Browsing 2/2. What the check sees, what it misses, and where agent tools split. https://www.codeslog.com/en/posts/webaim-million-2026-page-complexity/ Fri, 25 Sep 2026 23:35:52 +0900 https://www.codeslog.com/en/posts/webaim-million-2026-page-complexity/ WebAIM Million 2026's 22.5% jump in page complexity was a miscalculation; one-year growth was 14.3%. How to read DOM size, means, and error density. 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/claude-code-default-model-a11y/ Thu, 03 Sep 2026 11:01:31 +0900 https://www.codeslog.com/en/posts/claude-code-default-model-a11y/ Claude Code's default Fable model moved to 5.1. I ran 40 accessibility-blind prompts across four models and compared the modal and form code by hand. https://www.codeslog.com/en/posts/aria-live-status-messages/ Wed, 02 Sep 2026 01:24:30 +0900 https://www.codeslog.com/en/posts/aria-live-status-messages/ How do screen readers handle aria-live status messages? A demo-driven look at WCAG 4.1.3, polite vs. assertive, debounce timers, and icon or sound status. https://www.codeslog.com/en/posts/aria-live-regions/ Wed, 02 Sep 2026 01:14:30 +0900 https://www.codeslog.com/en/posts/aria-live-regions/ You added aria-live correctly, but the screen reader stays silent. Why the container must exist before its content, and when to use focus instead. https://www.codeslog.com/en/posts/wcag-3-accessibility-support-sets/ Wed, 19 Aug 2026 18:20:00 +0900 https://www.codeslog.com/en/posts/wcag-3-accessibility-support-sets/ WCAG 3's March 2026 draft structures accessibility-support sets into a formal clause (§3.2.2) — what its English default leaves blank for Korea's Sense Reader. https://www.codeslog.com/en/posts/wcag-22-new-criteria/ Wed, 19 Aug 2026 18:10:00 +0900 https://www.codeslog.com/en/posts/wcag-22-new-criteria/ A code-first, try-it-yourself rundown of WCAG 2.2's 6 most-used new success criteria, plus the 3 AAA criteria and how KWCAG 2.2 and global standards stack up. https://www.codeslog.com/en/posts/markdown-syntax-guide/ Sat, 15 Aug 2026 01:00:27 +0900 https://www.codeslog.com/en/posts/markdown-syntax-guide/ A beginner's guide to Markdown syntax: the nine basics, three pitfalls everyone hits (line breaks, broken bold, dividers), and why Markdown is semantic HTML. https://www.codeslog.com/en/posts/frontend-testing-ai-pitfalls/ Fri, 07 Aug 2026 14:59:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-ai-pitfalls/ AI-written code is wrong in plausible ways. The accessibility and edge cases AI repeatedly drops, and how the test suite from this series reports each hole automatically — with a real before and after. https://www.codeslog.com/en/posts/browser-features-accessibility-2026/ Wed, 05 Aug 2026 15:07:00 +0900 https://www.codeslog.com/en/posts/browser-features-accessibility-2026/ A green support table doesn't mean everyone can use it. Here's a 2026 accessibility check on popover, anchor positioning, dialog, and view transitions — and what you still have to do yourself for each. https://www.codeslog.com/en/posts/frontend-testing-ci-github-actions/ Mon, 03 Aug 2026 01:59:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-ci-github-actions/ A pipeline where unit tests, E2E, and accessibility checks run on every PR. Set up a merge gate with GitHub Actions in one workflow file — CI beginners welcome, terms explained in three minutes. https://www.codeslog.com/en/posts/eu-ai-act-accessibility/ Thu, 30 Jul 2026 01:02:04 +0900 https://www.codeslog.com/en/posts/eu-ai-act-accessibility/ The EU AI Act's high-risk obligations begin August 2, 2026. Article 16 ties accessibility to the Web Accessibility Directive and the European Accessibility Act — and how Korea's AI Basic Act compares. https://www.codeslog.com/en/posts/disability-pride-month-2026/ Tue, 28 Jul 2026 01:44:21 +0900 https://www.codeslog.com/en/posts/disability-pride-month-2026/ July is Disability Pride Month. Its ADA origins, a pride flag redesigned for accessibility, and what the 2026 theme means from a developer's seat. https://www.codeslog.com/en/posts/webaim-million-2026/ Tue, 28 Jul 2026 01:42:21 +0900 https://www.codeslog.com/en/posts/webaim-million-2026/ WebAIM Million 2026 scanned the top million home pages: errors per page rose to 56.1, up 10.1% in a year, reversing years of progress. Covers the top 6 recurring errors and the ARIA paradox. https://www.codeslog.com/en/posts/page-sampling-algorithm/ Tue, 28 Jul 2026 00:47:04 +0900 https://www.codeslog.com/en/posts/page-sampling-algorithm/ How do you pick which pages to audit out of thousands? A deterministic algorithm on WCAG-EM 2.0 stratified sampling — URL clustering finds representative pages without fetching a page body. https://www.codeslog.com/en/posts/frontend-testing-axe-e2e/ Mon, 27 Jul 2026 14:38:51 +0900 https://www.codeslog.com/en/posts/frontend-testing-axe-e2e/ Catch page-wide accessibility violations automatically, in a real browser. What axe-core is and how it works, how to integrate it into Playwright E2E, and what automation catches — and can't. https://www.codeslog.com/en/posts/wcag-em-2-evaluation-methodology/ Fri, 24 Jul 2026 10:05:57 +0900 https://www.codeslog.com/en/posts/wcag-em-2-evaluation-methodology/ W3C has published WCAG-EM 2.0, its accessibility evaluation methodology, twelve years after 1.0. What changed — from websites to apps, e-books and kiosks — the five-step procedure, sampling and random checks, and how it maps to Korea's certification. https://www.codeslog.com/en/posts/a11ychk-accessibility-audit/ Thu, 23 Jul 2026 13:28:00 +0900 https://www.codeslog.com/en/posts/a11ychk-accessibility-audit/ Meet A11y Check, an open-source web accessibility checker. It audits against WCAG 2.2 and KWCAG together, finds violations, and hands you an AI-ready fix guide — plus a compliance badge, and why the engine is open source. 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. https://www.codeslog.com/en/posts/frontend-testing-a11y-queries/ Fri, 17 Jul 2026 01:37:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-a11y-queries/ A well-written test is an accessibility check. Use role-based queries and accessible names to catch accessibility regressions with the tests you already write — no new tools required. https://www.codeslog.com/en/posts/eaa-carrefour-ruling/ Tue, 14 Jul 2026 00:40:00 +0900 https://www.codeslog.com/en/posts/eaa-carrefour-ruling/ A court in Caen gave Carrefour six months to fix its site and app or pay 500 euros a day — Europe's first EAA enforcement ruling. Why 71% RGAA conformity wasn't enough. https://www.codeslog.com/en/posts/frontend-testing-testing-library/ Fri, 10 Jul 2026 01:27:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-testing-library/ React Testing Library's core philosophy: test like a user. Learn the query priority built around getByRole, and how testing behavior instead of implementation makes tests survive refactoring. https://www.codeslog.com/en/posts/frontend-testing-why-now/ Fri, 03 Jul 2026 16:33:17 +0900 https://www.codeslog.com/en/posts/frontend-testing-why-now/ The faster AI writes code, the more testing matters. In this opener of the Frontend Testing, Done Right series, we cover what tests really give you, pyramid vs. trophy strategy, and the full curriculum ahead. https://www.codeslog.com/en/posts/gaad-2026-accessibility-for-everyone/ Wed, 20 May 2026 00:01:00 +0900 https://www.codeslog.com/en/posts/gaad-2026-accessibility-for-everyone/ Captions, dark mode, one-handed phone use... you're already benefiting from accessibility features. On GAAD 2026, let's explore what 'accessibility for everyone' really means. https://www.codeslog.com/en/posts/daoncard-a11y-card-family-month/ Fri, 08 May 2026 23:25:57 +0900 https://www.codeslog.com/en/posts/daoncard-a11y-card-family-month/ Digital cards are often unusable with a screen reader or low vision. Daon Card (daoncard.com) is a free WCAG 2.2 AA card service I built, with real-time contrast checks and keyboard support. https://www.codeslog.com/en/posts/moduweb-accessibility-seminar/ Thu, 23 Apr 2026 22:30:00 +0900 https://www.codeslog.com/en/posts/moduweb-accessibility-seminar/ A recap of presenting ModuWeb, an open-source overlay accessibility tool, at an AI Accessibility seminar in Seoul — plus an honest take on overlay-tool criticism and other speakers' talks. https://www.codeslog.com/en/posts/president-site-redesign-accessibility/ Tue, 21 Apr 2026 00:00:57 +0900 https://www.codeslog.com/en/posts/president-site-redesign-accessibility/ We audited the redesigned Cheong Wa Dae website (president.go.kr) against KWCAG 2.2 — skip navigation and dark mode are wins, but ARIA landmarks, tabindex, and image alt text still need fixes. https://www.codeslog.com/en/posts/disability-day-commendation-2026/ Mon, 20 Apr 2026 22:50:00 +0900 https://www.codeslog.com/en/posts/disability-day-commendation-2026/ Reflecting on 15 years of web accessibility work at a university — from earning the nation's first classroom accessibility certification to open-sourcing ModuWeb and receiving Korea's Minister of Education Commendation. https://www.codeslog.com/en/posts/form-accessibility-mastery/ Sat, 11 Apr 2026 00:00:00 +0900 https://www.codeslog.com/en/posts/form-accessibility-mastery/ A complete guide to form accessibility based on WCAG 2.2 — from label associations and ARIA usage to error handling and keyboard navigation. Learn with a live demo. https://www.codeslog.com/en/posts/2025-web-accessibility-survey/ Mon, 30 Mar 2026 23:40:00 +0900 https://www.codeslog.com/en/posts/2025-web-accessibility-survey/ South Korea's 2025 web accessibility survey, now measured against KWCAG 2.2's 32 checkpoints: the average score rose to 70.4, yet alt text compliance is only 17.1 percent, the lowest of all items. https://www.codeslog.com/en/posts/color-accessibility/ Fri, 06 Mar 2026 00:00:00 +0900 https://www.codeslog.com/en/posts/color-accessibility/ Color design for color vision deficiency and low vision: the WCAG 2.2 contrast ratio of 4.5:1 and how it's calculated, never relying on color alone, dark mode contrast, and brand colors that fail. https://www.codeslog.com/en/posts/seollal-gov-accessibility/ Sun, 15 Feb 2026 02:40:12 +0900 https://www.codeslog.com/en/posts/seollal-gov-accessibility/ One month after Korea's Digital Inclusion Act took effect, I compare the Blue House's image-only Seollal card news, which has no alt text, against the Ministry of Health and Welfare's text-based approach. https://www.codeslog.com/en/posts/keyboard-accessibility-a-to-z/ Tue, 03 Feb 2026 00:01:00 +0900 https://www.codeslog.com/en/posts/keyboard-accessibility-a-to-z/ Making a site fully usable without a mouse: tabindex and Tab order, skip links, focus traps and focus restoration in modals, :focus-visible focus styling, and keyboard alternatives to drag and drop. https://www.codeslog.com/en/posts/wcag-3-assertions/ Sun, 01 Feb 2026 00:10:00 +0900 https://www.codeslog.com/en/posts/wcag-3-assertions/ WCAG 3.0 Assertions document accessibility procedures automated tests cannot verify. This post covers the 28 assertions in the March 2026 Draft and how they differ from WCAG 2.2's Conformance Claim. https://www.codeslog.com/en/posts/wcag-3-atomic-holistic-tests/ Mon, 26 Jan 2026 01:00:00 +0900 https://www.codeslog.com/en/posts/wcag-3-atomic-holistic-tests/ Compare WCAG 3.0’s quantitative/qualitative testing flow with WCAG 2.2’s success-criteria model. We cover Atomic/Holistic concepts, view/process scope, and how tests connect to scoring from a practical perspective. https://www.codeslog.com/en/posts/wcag-3-scoring-conformance/ Sun, 25 Jan 2026 00:10:00 +0900 https://www.codeslog.com/en/posts/wcag-3-scoring-conformance/ Explore how WCAG 3(3.0)'s conformance model moves beyond A/AA/AAA. Covers the Core/Supplemental/Assertions structure, the returning Bronze/Silver/Gold levels, and views/processes-based scope, based on the March 2026 draft. https://www.codeslog.com/en/posts/language-switcher-banner/ Fri, 23 Jan 2026 08:00:00 +0900 https://www.codeslog.com/en/posts/language-switcher-banner/ Built a banner that detects browser language via navigator.language and auto-suggests the right version of a Hugo blog, with WCAG 2.2 AA keyboard navigation and screen reader support built in. https://www.codeslog.com/en/posts/aria-practical-guide/ Thu, 22 Jan 2026 02:00:00 +0900 https://www.codeslog.com/en/posts/aria-practical-guide/ A practical guide to applying ARIA in real projects: when to use it and when not to, plus code patterns for aria-live regions, custom tab/accordion/dropdown widgets, and accessible modal dialogs. https://www.codeslog.com/en/posts/wcag-3-structure-outcomes/ Mon, 19 Jan 2026 08:30:00 +0900 https://www.codeslog.com/en/posts/wcag-3-structure-outcomes/ WCAG 3.0 restructures accessibility into Guidelines, Outcomes, and Methods. Covers the 153 requirements (Core 92 + Supplemental 61), Atomic vs. Holistic Tests, and a login-form example vs WCAG 2.2. https://www.codeslog.com/en/posts/wcag-3-era-why-new-guidelines/ Mon, 12 Jan 2026 23:00:00 +0900 https://www.codeslog.com/en/posts/wcag-3-era-why-new-guidelines/ WCAG evolved from 1.0 to 2.2 over 26 years. This post explains why WCAG 3.0 exists: the All-or-Nothing dilemma, checkbox accessibility, and the shift from pass/fail checklists to user outcomes. https://www.codeslog.com/en/posts/code-block-accessibility-improvement/ Fri, 09 Jan 2026 20:00:00 +0900 https://www.codeslog.com/en/posts/code-block-accessibility-improvement/ A record of improving code blocks on a Hugo PaperMod blog. We replaced table-based line numbers with CSS counters so screen reader users can read code without the noise of table markup — a more semantic, accessible approach. https://www.codeslog.com/en/posts/ai-basic-act-accessibility/ Wed, 07 Jan 2026 18:59:00 +0900 https://www.codeslog.com/en/posts/ai-basic-act-accessibility/ Reading Korea's AI Basic Act (effective Jan 22, 2026) through a web accessibility lens: mapping WCAG's four principles onto its transparency, high-impact AI, and generative AI labeling duties. https://www.codeslog.com/en/posts/digital-inclusion-act/ Tue, 06 Jan 2026 18:59:00 +0900 https://www.codeslog.com/en/posts/digital-inclusion-act/ A people-centered look at Korea's Digital Inclusion Act (effective Jan 22, 2026): how it differs from the Framework Act on Intelligent Informatization, kiosk usability obligations, and impact assessment duties developers should know. https://www.codeslog.com/en/posts/digital-inclusion-new-era/ Mon, 05 Jan 2026 23:50:00 +0900 https://www.codeslog.com/en/posts/digital-inclusion-new-era/ Ahead of the Digital Inclusion Act (Jan 22), this piece shows how accessibility is expanding to digital inclusion through real cases and frames the questions we must ask for inclusive design. https://www.codeslog.com/en/posts/ai-evaluation-review/ Wed, 31 Dec 2025 01:51:00 +0900 https://www.codeslog.com/en/posts/ai-evaluation-review/ My experience as a citizen evaluator for an AI agent competition. Recording the questions I asked about accessibility, failure response, and communication design. https://www.codeslog.com/en/posts/evaluation-panel-seoul/ Tue, 30 Dec 2025 01:07:37 +0900 https://www.codeslog.com/en/posts/evaluation-panel-seoul/ A full day of my time, travel paid out of pocket, and just 50,000 won in return — yet I'm heading to Seoul as a citizen evaluator for an AI agent competition. A reflection on why a seemingly losing choice can plant seeds for the future. https://www.codeslog.com/en/posts/semantic-html-guide/ Tue, 23 Dec 2025 02:32:17 +0900 https://www.codeslog.com/en/posts/semantic-html-guide/ Move from div-only markup to semantic HTML: when to use header, nav, main, article, and section, how article and section differ, plus heading levels and ARIA landmarks, with before-and-after examples. https://www.codeslog.com/en/posts/web-accessibility-ai-era/ Tue, 23 Dec 2025 00:29:12 +0900 https://www.codeslog.com/en/posts/web-accessibility-ai-era/ Can everyone use the web that AI builds? The accessibility gaps generative AI tends to miss, the four WCAG 2.2 principles in code, AI-generated alt text, and building an accessible AI chatbot.