무료GitHub에 공개한국어 소개

aria-hidden-body

body의 aria-hidden 설정으로 페이지 전체가 스크린 리더에서 숨겨지는지 점검합니다. 모달 표시 중의 잘못된 설정을 찾아 수정을 돕습니다.

원문원문 설명 보기

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Do not use aria-hidden on the document body. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

thedaviddias/Front-End-Checklist

실행 점수 미검증

설치 방법 보기

이럴 때 유용합니다

모달 표시 중 스크린 리더 낭독 확인
페이지가 낭독되지 않는 원인 조사
상태 변화에 따른 body 속성 점검

한국어 소개

할 수 있는 일

페이지 전체를 스크린 리더에서 숨길 수 있는 <body> 설정을 점검합니다. aria-hidden="true"는 보조 기술이 해당 요소를 인식하지 않도록 하는 속성입니다. 이 속성이 <body>에 붙으면 페이지 전체에 적용되므로, 처음 표시될 때뿐 아니라 사용자 조작에 따른 상태 변화 중에도 추가되는지 확인합니다.

이럴 때 유용합니다

모달을 열면 낭독이 멈추거나, 화면에 보이는 내용을 스크린 리더가 인식하지 못하는 원인을 조사할 때 적합합니다. 화면 구성 요소나 디자인 시스템을 검토하면서 배경을 숨기는 처리와 초점 이동을 확인할 때도 도움이 됩니다.

사용 예시

“모달을 열고 닫을 때 <body>에 aria-hidden="true"가 붙는지 확인해 주세요.”
“페이지 전체를 숨기는 설정을 없애고, 모달이 표시되는 동안 해당 배경 컨테이너만 숨기도록 수정안을 제안해 주세요.”

주의 사항

이 속성을 <body>에 지정하면 페이지 전체가 보조 기술에서 숨겨지므로 사용 중의 일시적인 상태도 점검 대상입니다. 수정 후에는 브라우저의 접근성 점검 도구나 보조 기술로 검증하는 방침이 제시되어 있습니다.

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

문서 점검

AI가 SKILL.md의 내용에서 주의가 필요한 작업과 도입 전제를 확인했습니다. 점수는 실제로 실행한 결과(실행 검증)만으로 매깁니다.

안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호수정 범위는 body와 배경 컨테이너이며 브라우저 접근성 도구나 보조 기술로 검증하도록 합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호검증에 브라우저 접근성 도구나 보조 기술을 제시하며 특정 제품이나 API 키는 요구하지 않습니다.

점수에는 넣지 않았습니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

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

포함된 파일(2)

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

SKILL.md(원문)

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

Do not use aria-hidden on the document body

Setting aria-hidden="true" on the body effectively silences the entire application for screen reader users, rendering the site completely unusable.

Quick Reference

The <body> element should never have aria-hidden="true"
Hiding the body makes the entire page invisible to assistive technologies
Often happens accidentally when managing modal states

Check

Check if the <body> element has aria-hidden="true" applied at any point in the lifecycle.

Fix

Remove aria-hidden="true" from the <body> and use it only on specific background containers when modals are open.

Explain

Explain the catastrophic impact of hiding the body element from assistive technologies.

Code Review

Review the rendered markup and interactive states that affect Do not use aria-hidden on the document body. 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-hidden-body

리뷰

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

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

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

같은 저장소의 스킬