무료GitHub에 공개한국어 소개

aria-meter-name

배터리 잔량이나 저장 용량을 나타내는 미터의 접근성 이름을 점검합니다. 누락된 이름을 추가해 스크린 리더가 수치의 의미를 전달하도록 돕습니다.

원문원문 설명 보기

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for meter elements. 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 설치 방법 보기

이럴 때 유용합니다

잔량 및 용량 미터의 레이블 확인
미터에 스크린 리더용 이름 추가
공통 UI 컴포넌트의 미터 점검
수정 후 스크린 리더 출력 확인

한국어 소개

할 수 있는 일

수치를 음성으로 들을 때도 의미를 알 수 있도록 미터의 이름을 점검합니다. 대상은 <meter> 요소와 role="meter"가 지정된 요소입니다. 보조 기술이 참조하는 접근성 이름이 없는 부분을 찾고, aria-label이나 aria-labelledby로 측정 대상을 설명하도록 수정을 돕습니다. 렌더링된 HTML과 관련 상태를 살펴보고 브라우저 접근성 검사 도구나 보조 기술로 확인하는 방법도 제시합니다.

이럴 때 유용합니다

배터리 잔량, 저장 용량, 비밀번호 강도를 보여 주는 화면을 검토할 때 사용합니다. “50%”라는 값만으로 무엇을 나타내는지 알기 어려운 표시를 개선하거나, 공통 UI 컴포넌트의 미터에 레이블이 있는지 확인할 때 유용합니다.

사용 예시

“이 화면의 미터에 스크린 리더용 이름이 있는지 확인해 주세요.”
“용량 미터에 aria-labelledby를 추가하고 음성 출력 확인 방법을 알려 주세요.”

주의 사항

수정 사항은 브라우저 접근성 검사 도구나 스크린 리더 등의 보조 기술로 확인합니다. 구현 세부 사항은 함께 제공되는 references/rule.md를 참조하는 구성입니다.

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

객관 평가

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

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호meter 요소를 대상으로 이름 누락 확인과 레이블 추가를 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호대상 요소와 추가할 속성, 보조 기술을 통한 수정 확인 방법을 구체적으로 제시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호HTML 레이블 수정과 음성 출력 확인이 대상이며 삭제나 외부 전송 지시는 없습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호확인에 사용할 브라우저 검사 도구나 보조 기술을 명시하며 API 키를 요구하지 않습니다.

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

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

포함된 파일(2)

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

SKILL.md(원문)

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

Provide accessible names for meter elements

A meter represents a scalar measurement; without a label, a user might hear a value (e.g., '50%') but have no idea if it refers to battery life, storage space, or a password strength.

Quick Reference

The <meter> element or role="meter" must have an accessible label
Use aria-label or aria-labelledby to provide context
Helps users understand what measurement is being displayed

Check

Check for <meter> elements or elements with role="meter" that lack an accessible name.

Fix

Add an aria-label or aria-labelledby to the meter element to describe the measurement.

Explain

Explain why measurements need context through accessible names for screen reader users.

Code Review

Review the rendered markup and interactive states that affect Provide accessible names for meter 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-meter-name

리뷰

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

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

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

같은 저장소의 스킬

404-page

무료

Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

Creating a helpful custom 404 page
Adding search and navigation for broken links
Checking missing pages that return HTTP 200