무료GitHub에 공개한국어 소개

definition-list

용어와 설명을 짝지어 나열하는 HTML 정의 목록을 점검하고 요소 중첩과 대응 관계의 문제를 찾습니다. 화면 읽기 프로그램에 정보 묶음이 전달되도록 구조 수정을 지원합니다.

원문원문 설명 보기

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

thedaviddias/Front-End-Checklist

AI 평가90점/ 100 설치 방법 보기

이럴 때 유용합니다

용어집의 HTML 구조 확인
용어와 설명의 대응 관계 점검
화면 읽기에서 이해하기 어려운 정의 목록 수정

한국어 소개

할 수 있는 일

용어와 설명을 짝지어 나열하는 HTML 정의 목록을 점검합니다. <dl> 안의 <dt>, <dd> 등의 요소를 확인하고, 부적절한 요소나 감싸는 방식으로 구조가 깨진 부분을 짚습니다. 문제가 있는 요소를 삭제하거나 감싸는 방식을 조정하도록 안내하여, 화면 읽기 프로그램에도 용어와 설명의 관계가 전달되도록 수정을 지원합니다.

이럴 때 유용합니다

용어집처럼 용어와 설명을 함께 나열하는 화면을 리뷰할 때 적합합니다. 시각적으로 정돈되어 있어도 화면 읽기에서는 정보의 구분이나 대응 관계를 이해하기 어려울 수 있습니다. 이때 실제로 표시된 HTML을 바탕으로 원인을 조사할 수 있으며, 디자인 시스템 안의 정의 목록을 확인할 때도 사용할 수 있습니다.

사용 예시

“이 용어집의 <dl>을 확인하고 용어와 설명의 구조에 문제가 있는지 살펴봐 주세요.”
“정의 목록의 부적절한 요소를 짚고 수정안과 화면 읽기로 확인하는 방법을 제시해 주세요.”

주의 사항

브라우저의 접근성 검사 도구나 보조 기술을 사용하여, 수정 후 관련 정보가 적절히 묶여 전달되는지 확인하는 절차가 포함됩니다.

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

객관 평가

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

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호정의 목록 구조를 점검하여 보조 기술에 용어와 설명의 관계를 전달한다는 목적이 명시되어 있습니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: B일부 부족점검과 수정 절차는 있지만 허용되는 감싸는 요소에 대한 설명이 일관되지 않습니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호부적절한 요소 삭제나 감싸는 방식 수정으로 범위를 정하고 보조 기술로 확인하도록 지시합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호확인 수단으로 브라우저 검사 도구나 보조 기술을 제시하며 API 키 등을 요구하지 않습니다.

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

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

포함된 파일(2)

SKILL.md1.8 KB
references/rule.md3.1 KB

SKILL.md(원문)

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

Use correct definition list structure

Broken list structures confuse assistive technologies, preventing users from understanding the relationship between terms and their definitions.

Quick Reference

Ensure <dl> contains only <dt>, <dd>, or <script>/<template> tags
Avoid wrapping list items in invalid container elements like <div>
Maintain semantic relationships between terms and descriptions

Check

Verify that all <dl> elements contain only valid child elements (dt, dd, or allowed wrappers).

Fix

Remove any invalid elements from within the <dl> or wrap them appropriately to maintain semantic integrity.

Explain

Explain how proper definition list structure helps screen readers navigate and group related information.

Code Review

Review the rendered markup and interactive states that affect Use correct definition list structure. 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/definition-list

리뷰

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

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

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

같은 저장소의 스킬