https://www.codeslog.com/tags/aria/ Recent content in ARIA 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 ko Sat, 24 Oct 2026 01:20:00 +0900 https://www.codeslog.com/posts/lighthouse-agentic-browsing-accessibility/ Sat, 10 Oct 2026 23:55:00 +0900 https://www.codeslog.com/posts/lighthouse-agentic-browsing-accessibility/ Lighthouse 에이전트 브라우징(에이전트형 브라우징)을 결함 페이지로 재 보니, 키보드로 못 누르는 div 버튼이 접근성 100점과 2/2를 받았습니다. 이 점검이 보는 것과 놓치는 것, 에이전트 도구마다 다른 스냅샷까지 정리합니다. https://www.codeslog.com/posts/aria-live-status-messages/ Wed, 02 Sep 2026 01:24:30 +0900 https://www.codeslog.com/posts/aria-live-status-messages/ WCAG 4.1.3 상태 메시지를 aria-live로 구현할 때 polite와 assertive는 뭐가 다른지, 장바구니 개수가 연달아 바뀌면 스크린 리더가 어떻게 읽는지 데모로 확인합니다. 디바운스 타이머, 아이콘·소리 상태, 상태 메시지가 아닌 변화까지. https://www.codeslog.com/posts/aria-live-regions/ Wed, 02 Sep 2026 01:14:30 +0900 https://www.codeslog.com/posts/aria-live-regions/ aria-live를 분명히 달았는데 스크린 리더가 침묵합니다. 빈 컨테이너가 DOM에 먼저 있어야 하는 이유부터 스크린 리더별로 갈리는 동작, 알림 대신 포커스를 옮겨야 하는 경계까지, 라이브 리전이 안 읽히는 원인을 하나씩 짚습니다. https://www.codeslog.com/posts/webaim-million-2026/ Tue, 28 Jul 2026 01:42:21 +0900 https://www.codeslog.com/posts/webaim-million-2026/ 상위 100만 웹사이트를 WAVE로 분석한 WebAIM Million 2026 결과, 페이지당 평균 WCAG 오류가 56.1개로 1년 새 10.1% 늘며 접근성이 후퇴했습니다. 6대 단골 오류와 ARIA의 역설을 정리합니다. https://www.codeslog.com/posts/form-accessibility-mastery/ Sat, 11 Apr 2026 00:00:00 +0900 https://www.codeslog.com/posts/form-accessibility-mastery/ 회원가입 폼도 접근성 없이는 완전한 장벽이 됩니다. 라벨 연결, aria-describedby로 입력 형식 안내, 에러 처리, fieldset 그룹화, 키보드 내비게이션까지 WCAG 2.2 기준으로 직접 만든 데모와 함께 정리했습니다. https://www.codeslog.com/posts/google-antigravity-accessibility/ Tue, 17 Mar 2026 16:00:00 +0900 https://www.codeslog.com/posts/google-antigravity-accessibility/ Google Antigravity 홈페이지의 히어로 텍스트를 알파벳 하나하나 div로 감싼 구조가 스크린 리더와 브라우저 번역 기능을 어떻게 무력화하는지 분석하고, WCAG 2.2 기준과 개선 코드까지 함께 정리합니다. https://www.codeslog.com/posts/keyboard-accessibility-a-to-z/ Tue, 03 Feb 2026 00:01:00 +0900 https://www.codeslog.com/posts/keyboard-accessibility-a-to-z/ 마우스 없이 키보드만으로 쓸 수 있는 웹을 만드는 법. tabindex와 Tab 순서, 스킵 링크, 모달의 포커스 트랩과 포커스 복원, :focus-visible 포커스 스타일, 드래그 앤 드롭 대체 수단까지 코드 예제로 정리했습니다. https://www.codeslog.com/posts/language-switcher-banner/ Fri, 23 Jan 2026 08:00:00 +0900 https://www.codeslog.com/posts/language-switcher-banner/ 브라우저 언어(navigator.language)를 감지해 적절한 언어 버전을 자동으로 제안하는 배너를 Hugo 블로그에 직접 구현했습니다. WCAG 2.2 AA 기준의 키보드 네비게이션과 스크린 리더 지원까지 다룬 구현 과정을 공유합니다. https://www.codeslog.com/posts/aria-practical-guide/ Thu, 22 Jan 2026 02:00:00 +0900 https://www.codeslog.com/posts/aria-practical-guide/ ARIA를 실제 프로젝트에 적용하는 실전 가이드입니다. 언제 ARIA를 쓰고 언제 쓰지 말아야 하는지부터, aria-live 라이브 리전, 탭·아코디언·드롭다운 커스텀 위젯, 모달 다이얼로그 패턴까지 코드로 정리했습니다. https://www.codeslog.com/posts/code-block-accessibility-improvement/ Fri, 09 Jan 2026 20:00:00 +0900 https://www.codeslog.com/posts/code-block-accessibility-improvement/ Hugo PaperMod 블로그의 코드 블록을 개선한 기록입니다. 라인 넘버를 table 태그 대신 CSS Counter로 다시 구현해, 스크린 리더 사용자가 불필요한 표 정보 없이 코드를 읽을 수 있도록 더 시맨틱하고 접근성 높게 바꾼 과정을 정리합니다. https://www.codeslog.com/posts/web-accessibility-ai-era/ Tue, 23 Dec 2025 00:29:12 +0900 https://www.codeslog.com/posts/web-accessibility-ai-era/ AI가 만든 웹, 과연 모두가 쓸 수 있을까요. 생성형 AI가 놓치기 쉬운 접근성 허점부터 WCAG 2.2 네 가지 원칙(인식·운용·이해·견고성)의 코드 적용, AI로 대체 텍스트 생성하기, 접근 가능한 AI 챗봇 구현까지 정리했습니다.