무료GitHub에 공개한국어 소개

autoplay-media

페이지 로딩 시 음성과 영상의 자동 재생을 점검합니다. 자동 재생 해제나 음소거, 키보드로 쓰는 일시 정지 기능을 마련해 사용자가 재생을 제어하도록 합니다.

원문원문 설명 보기

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autoplaying media. 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 설치 방법 보기

이럴 때 유용합니다

로딩 시 음성과 영상의 자동 재생 점검
영상 음소거와 일시 정지 기능 추가
재생 제어 기능의 키보드 접근 확인
여러 미디어의 일괄 정지 기능 검토

한국어 소개

할 수 있는 일

웹페이지가 로드될 때 음성이나 영상이 자동으로 재생되는지 살펴보고, 사용자가 재생을 제어하도록 수정합니다. 미디어 요소의 autoplay 속성을 제거하거나, 자동 재생이 필요한 영상의 muted 속성과 눈에 잘 띄는 일시 정지 기능을 확인합니다. 미디어가 여러 개 있는 페이지에서는 한꺼번에 정지하는 버튼도 검토합니다.

이럴 때 유용합니다

영상이 있는 페이지나 음성을 포함한 컴포넌트의 접근성을 검토할 때 적합합니다. 갑작스러운 소리가 스크린 리더의 읽기를 방해하는 문제와 조용한 환경이나 데이터 사용량이 제한된 환경에서 생기는 부담을 확인합니다. 재생 제어 기능을 키보드로 빠르게 사용할 수 있는지도 살펴봅니다.

사용 예시

“이 페이지가 로드될 때 자동 재생되는 음성이나 영상을 확인해 주세요.”
“자동 재생이 필요한 영상을 음소거하고 일시 정지 기능을 추가해 주세요.”
“키보드로 정지 버튼에 빠르게 이동할 수 있는지 확인해 주세요.”

주의 사항

음성 자동 재생은 피하는 방침입니다. 영상 자동 재생이 필요하면 기본 음소거와 즉시 사용할 수 있는 정지 기능을 확인합니다. 재생이 오 초 후 멈추거나 정지 수단을 제공하는지도 검사합니다. 수정 후에는 브라우저 접근성 기능이나 보조 기술로 검증합니다.

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

객관 평가

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

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호로딩 시 자동 재생을 검사하고 음소거와 키보드로 사용하는 정지 기능을 마련하는 용도가 명확합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호autoplay 제거, muted 추가, 처음 몇 번의 탭 이동으로 제어 기능에 접근하는지 확인하도록 명시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호수정 범위는 재생 속성과 제어 기능이며 브라우저 접근성 도구나 보조 기술을 통한 검증도 안내합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호브라우저 접근성 도구나 보조 기술로 검증하며 API 키나 유료 서비스를 전제로 하지 않습니다.

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

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

포함된 파일(2)

SKILL.md2.0 KB
references/rule.md3.6 KB

SKILL.md(원문)

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

Avoid autoplaying media

Autoplaying audio drowns out screen reader speech, startles users, and wastes bandwidth—providing user control is essential for accessibility and good UX.

Quick Reference

Never autoplay audio—it interferes with screen readers
If video must autoplay, ensure it's muted by default
Provide immediately accessible pause/stop controls
Autoplay should stop after 5 seconds or provide stop mechanism

Check

Verify no audio or video autoplays on page load. If autoplay is essential, confirm media is muted by default and pause controls are immediately accessible via keyboard within the first few tab stops.

Fix

Remove autoplay attributes from media elements. If autoplay is required, add muted attribute and provide prominent, keyboard-accessible pause controls. Consider adding a global pause button for pages with multiple media elements.

Explain

Explain how autoplaying media interferes with screen readers, startles users with cognitive disabilities, and creates barriers for users in quiet environments or with limited bandwidth.

Code Review

Review the rendered markup and interactive states that affect Avoid autoplaying media. 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/autoplay-media

리뷰

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

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

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

같은 저장소의 스킬