무료GitHub에 공개한국어 소개

aria-required-attr

화면 요소의 역할을 전달하는 ARIA 역할에 필수 속성이 있는지 점검합니다. 실제 HTML과 조작 중 상태를 확인하여 화면 낭독기에 필요한 정보의 누락을 수정합니다.

원문원문 설명 보기

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Include required ARIA attributes for roles. 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 구성 요소의 접근성 검토
화면 낭독기에 전달되는 상태 정보 확인

한국어 소개

할 수 있는 일

화면 요소의 역할을 보조 기술에 전달하는 ARIA 역할에 필수 속성이 모두 있는지 확인합니다. 예를 들어 role="slider"에 현재 값을 나타내는 aria-valuenow가 빠져 있는지 점검하고 누락된 속성을 추가하도록 돕습니다. 실제로 렌더링된 HTML과 조작 중의 상태를 살펴 문제가 있는 요소나 역할을 구체적으로 짚습니다.

이럴 때 유용합니다

사용자 정의 조작 요소나 여러 화면에서 사용하는 공통 구성 요소를 검토할 때 유용합니다. 표준 HTML 요소 자체가 전달하는 의미를 먼저 확인하고, 필요에 따라 키보드 조작과 초점 이동, 접근 가능한 이름도 살펴봅니다. 화면 낭독기에 상태나 값을 전달하는 정보가 충분한지 검토할 수 있습니다.

사용 예시

“이 화면의 ARIA 역할에 WAI-ARIA 필수 속성이 있는지 확인해 주세요.”
“보조 기술에 사용자 정의 슬라이더의 현재 값이 전달되도록 누락된 속성을 추가해 주세요.”
“브라우저 접근성 도구나 보조 기술로 수정 결과를 확인하는 방법을 알려 주세요.”

주의 사항

특별한 주의 사항은 없습니다.

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

객관 평가

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

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호렌더링된 HTML과 상호작용 구성 요소의 ARIA 필수 속성을 점검한다고 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호슬라이더의 aria-valuenow를 예로 누락 확인, 추가, 문제 요소 보고와 검증을 지시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호수정 대상은 누락된 ARIA 속성이며 외부 전송, 삭제, 인증 정보 조작은 없습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호전용 서비스나 API 키가 필요하지 않으며 검증 수단으로 브라우저 접근성 도구를 제시합니다.

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

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

포함된 파일(2)

SKILL.md1.8 KB
references/rule.md2.3 KB

SKILL.md(원문)

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

Include required ARIA attributes for roles

Certain ARIA roles are incomplete without their required attributes, preventing assistive technologies from correctly communicating the element's state or value.

Quick Reference

Identify roles that require specific state or property attributes
Ensure attributes like aria-valuenow for sliders are present
Validate that all required ARIA attributes are correctly implemented

Check

Verify that all ARIA roles have their mandatory attributes as defined by the WAI-ARIA specification.

Fix

Add the missing required ARIA attributes to elements with specific roles (e.g., aria-valuenow for role="slider").

Explain

Explain how required ARIA attributes provide critical state information that screen readers need to function correctly.

Code Review

Review the rendered markup and interactive states that affect Include required ARIA attributes for roles. 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-required-attr

리뷰

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

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

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

같은 저장소의 스킬