무료GitHub에 공개한국어 소개

aria-labels

버튼과 링크 등에 동작이나 이동 대상을 알려 주는 이름이 있는지 점검합니다. 표시 문구와 aria-label의 누락 또는 모호한 표현을 찾고 구체적인 수정안을 제시합니다.

원문원문 설명 보기

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for all interactive elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

thedaviddias/Front-End-Checklist

실행 점수 미검증

설치 방법 보기

이럴 때 유용합니다

이름이 없는 버튼과 링크 찾기
모호한 레이블 검토
공통 컴포넌트의 조작 이름 검토
레이블 수정 후 화면 낭독 내용 확인

한국어 소개

할 수 있는 일

aria-labels는 버튼, 링크, 위젯 등 조작 요소에 목적을 알 수 있는 이름이 있는지 점검합니다. 보조 기술에 전달되는 ‘접근 가능한 이름’을 확인하고 이름이 없거나 동작과 이동 대상을 설명하지 못하는 표현을 짚어 줍니다. 설명적인 표시 문구를 쓰거나 aria-label 속성을 추가하는 수정안을 제시합니다.

이럴 때 유용합니다

화면의 버튼과 링크를 한꺼번에 검토하거나 디자인 시스템의 공통 컴포넌트를 살펴볼 때 적합합니다. ‘여기를 클릭’, ‘더 보기’처럼 모호한 이름을 정리하고 각 조작의 의미가 전달되는 표현을 검토할 때도 활용합니다.

사용 예시

“이 화면의 버튼과 링크에서 이름이 없는 요소를 찾아 주세요.”
“동작을 이해하기 어려운 레이블을 짚고 수정안을 제시해 주세요.”
“공통 컴포넌트의 이름과 화면 낭독 내용을 확인해 주세요.”

주의 사항

먼저 HTML 요소가 본래 지닌 의미를 확인합니다. 필요에 따라 키보드 조작, 초점 이동, 화면 낭독 프로그램의 출력도 점검합니다. 자료에서는 브라우저의 접근성 확인 기능이나 보조 기술을 사용해 수정 결과를 검증하는 방법을 제시합니다.

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

문서 점검

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

안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호이름과 HTML 점검·수정이 중심이며 외부 전송, 삭제, 인증 정보 읽기를 지시하지 않습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호브라우저 접근성 도구나 보조 기술로 검증하며 외부 서비스나 API 키는 지정하지 않습니다.

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

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

포함된 파일(2)

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

SKILL.md(원문)

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

Provide accessible names for all interactive elements

Interactive elements are the core of web navigation; without names, they become 'mystery meat' that users cannot confidently interact with.

Quick Reference

Buttons, links, and other controls must have a discernable name
Names should be concise and describe the action or destination
Avoid generic names like 'Click Here' or 'More'

Check

Audit all interactive elements (buttons, links, widgets) for missing or unhelpful accessible names.

Fix

Add descriptive text content or aria-label attributes to all interactive elements.

Explain

Explain how clear labels on interactive elements improve accessibility and general usability.

Code Review

Review the rendered markup and interactive states that affect Provide accessible names for all interactive elements. 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-labels

리뷰

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

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

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

같은 저장소의 스킬