무료GitHub에 공개한국어 소개

aria-dialog-name

대화 상자의 목적이 스크린 리더에 전달되는지 점검합니다. 제목과 레이블 지정 방식을 검토하고, 대상 요소와 수정 후 검증 방법을 안내합니다.

원문원문 설명 보기

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure dialogs have an accessible name. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

thedaviddias/Front-End-Checklist

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

이럴 때 유용합니다

모달의 읽기용 이름 점검
경고 대화 상자의 레이블 확인
공통 대화 상자 구성 요소 검토
수정 후 스크린 리더 출력 확인

한국어 소개

할 수 있는 일

대화 상자가 열릴 때 스크린 리더 사용자에게 목적을 전달하는 이름이 있는지 확인합니다. role="dialog" 또는 role="alertdialog"가 있는 요소를 대상으로 합니다. 읽기에 사용되는 이름이 충분하지 않으면 aria-labelledby로 제목을 참조하거나 aria-label로 이름을 직접 지정하는 방법을 안내합니다.

이럴 때 유용합니다

입력 화면이나 확인용 모달을 검토하고 공통 대화 상자 구성 요소를 정비할 때 유용합니다. 화면에 제목이 보이더라도 읽어 주는 내용만으로 목적을 이해할 수 있는지 확인할 수 있습니다. 관련된 포커스 이동과 키보드 조작도 점검합니다.

사용 예시

“이 모달에 스크린 리더용 이름이 있는지 확인하고, 부족하면 수정안을 제시해 주세요.”
“공통 대화 상자의 제목과 레이블이 올바르게 연결되어 있는지 검토해 주세요.”

주의 사항

렌더링된 HTML과 조작 중의 상태를 확인합니다. 수정 후에는 브라우저 접근성 검사 도구나 스크린 리더 등으로 검증합니다. 자세한 구현 예시는 함께 제공되는 references/rule.md를 참조합니다.

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

객관 평가

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

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호대상 역할을 지정하고 대화 상자 이름을 언제 어떻게 점검하는지 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호이름 확인, 속성을 통한 수정, 문제 요소 지적과 검증 방법 제시를 지정합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호명시된 작업은 마크업 점검과 수정안 제시이며 삭제나 외부 전송은 없습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호검증용 브라우저 도구나 보조 기술을 제시하며 전용 환경이나 API 키를 요구하지 않습니다.

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

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

포함된 파일(2)

SKILL.md1.7 KB
references/rule.md2.5 KB

SKILL.md(원문)

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

Ensure dialogs have an accessible name

When a dialog opens, screen readers should announce its purpose immediately so users know why their focus has shifted and what information is required.

Quick Reference

All dialog and alertdialog elements must have a descriptive label
Use aria-labelledby to point to a title or aria-label for a direct string
Helps users understand the context and purpose of the modal

Check

Verify that every element with role="dialog" or role="alertdialog" has an accessible name.

Fix

Provide an accessible name for the dialog using aria-labelledby (pointing to the header) or aria-label.

Explain

Explain why naming dialogs is crucial for orienting screen reader users when modals appear.

Code Review

Review the rendered markup and interactive states that affect Ensure dialogs have an accessible name. 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-dialog-name

리뷰

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

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

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

같은 저장소의 스킬