무료GitHub에 공개한국어 소개

aria-live-regions

양식 결과나 장바구니 갱신 등 화면의 변화를 화면 낭독기 사용자에게 전달하는지 점검합니다. ARIA 라이브 영역의 속성과 알림 우선순위를 검토합니다.

원문원문 설명 보기

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Announce dynamic content with ARIA live regions. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

thedaviddias/Front-End-Checklist

AI 평가90점/ 100 설치 방법 보기

이럴 때 유용합니다

양식 결과와 오류의 음성 안내 점검
장바구니 갱신을 화면 낭독기로 전달
로딩 상태와 상태 알림 점검
중대한 경고의 알림 우선순위 선택

한국어 소개

할 수 있는 일

양식 제출 결과나 장바구니 갱신처럼 화면에서 바뀌는 정보를 화면 낭독기 사용자에게 전달하는 구현을 점검합니다. 내용의 변화를 알리는 ARIA 라이브 영역을 확인합니다. 일반 갱신에는 aria-live='polite', 중대한 경고에는 aria-live='assertive'를 사용하며 role='alert'와 role='status'도 검토합니다.

이럴 때 유용합니다

알림, 입력 오류, 로딩 상태가 화면에 표시되지만 음성으로 전달되지 않을 때 유용합니다. 출력된 HTML과 조작 중의 상태를 살피고 필요에 따라 키보드 조작, 초점 흐름, 화면 낭독기의 출력도 확인합니다. 수정할 위치와 브라우저 접근성 기능이나 보조 기술로 검증하는 방법을 안내합니다.

사용 예시

“양식 결과와 오류를 읽어 주는지 확인해 주세요.”
“초점을 옮기지 않고 장바구니 수량 갱신을 알려 주세요.”
“일반 상태 알림과 중대한 경고의 우선순위를 검토해 주세요.”

주의 사항

알림 영역은 내용이 바뀌기 전부터 페이지 구조인 DOM에 있어야 합니다. assertive는 중대한 경고에만 사용합니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호라이브 영역으로 알림, 양식 오류, 로딩 상태를 전달하는 용도를 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호알림 속성 선택, DOM 내 존재 조건, 구체적인 문제 보고와 검증 방법을 지정합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호속성과 조작 상태 점검이 중심이며 외부 전송, 삭제, 인증 정보 읽기는 없습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: B일부 부족브라우저 접근성 도구나 보조 기술로 검증하지만 구체적인 도구와 설치 절차는 없습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(2)

SKILL.md1.9 KB
references/rule.md3.8 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Announce dynamic content with ARIA live regions

Without live regions, screen reader users miss dynamic updates entirely—they won't know their form submitted, their cart updated, or an error occurred.

Quick Reference

Use aria-live='polite' for non-urgent updates (cart count, status messages)
Use aria-live='assertive' only for critical alerts (errors, session expiry)
Use role='alert' or role='status' for semantic live regions
The live region must exist in DOM before content changes

Check

Verify that dynamic content changes (notifications, form errors, loading states) use aria-live regions appropriately.

Fix

Add aria-live attributes with correct politeness levels (polite, assertive) to containers with dynamic content.

Explain

Explain how ARIA live regions enable screen readers to announce content changes without requiring user focus.

Code Review

Review the rendered markup and interactive states that affect Announce dynamic content with ARIA live regions. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/accessibility/aria-live-regions

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬