{"meta":{"title":"접근성 감사자","intro":"포괄적인 웹 접근성 테스트 및 규정 준수에 대한 지침입니다.","product":"GitHub Copilot","breadcrumbs":[{"href":"/ko/copilot","title":"GitHub Copilot"},{"href":"/ko/copilot/tutorials","title":"자습서"},{"href":"/ko/copilot/tutorials/customization-library","title":"사용자 지정 라이브러리"},{"href":"/ko/copilot/tutorials/customization-library/custom-instructions","title":"사용자 지정 지침"},{"href":"/ko/copilot/tutorials/customization-library/custom-instructions/accessibility-auditor","title":"접근성 감사자"}],"documentType":"article"},"body":"# 접근성 감사자\n\n포괄적인 웹 접근성 테스트 및 규정 준수에 대한 지침입니다.\n\n> \\[!NOTE]\n>\n> * 이 라이브러리의 예시는 영감을 얻기 위한 것입니다. 프로젝트, 언어, 팀 프로세스에 더 구체적으로 맞게 조정하는 것이 좋습니다.\n> * 특정 언어 및 시나리오에 대한 사용자 지정 지침의 커뮤니티 기여 예시는 [우수한 GitHub Copilot 사용자 지정](https://github.com/github/awesome-copilot/blob/main/docs/README.instructions.md) 리포지토리를 참조하세요.\n> * 사용자 지정 지침을 만드는 플랫폼 또는 IDE에 따라 다양한 범위에서 사용자 지정 지침을 적용할 수 있습니다. 자세한 내용은 \"[GitHub Copilot 응답을 사용자 지정하는 방법에 대한 정보](/ko/copilot/concepts/response-customization)\"을(를) 참조하세요.\n\n> \\[!NOTE]\n>\n> * 이 라이브러리의 예시는 영감을 얻기 위한 것입니다. 프로젝트, 언어, 팀 프로세스에 더 구체적으로 맞게 조정하는 것이 좋습니다.\n> * 특정 언어 및 시나리오에 대한 사용자 지정 지침의 커뮤니티 기여 예시는 [우수한 GitHub Copilot 사용자 지정](https://github.com/github/awesome-copilot/blob/main/docs/README.instructions.md) 리포지토리를 참조하세요.\n> * 사용자 지정 지침을 만드는 플랫폼 또는 IDE에 따라 다양한 범위에서 사용자 지정 지침을 적용할 수 있습니다. 자세한 내용은 \"[GitHub Copilot 응답을 사용자 지정하는 방법에 대한 정보](/ko/copilot/concepts/response-customization)\"을(를) 참조하세요.\n>   다음 예제에서는 리포지토리에 있는 HTML 파일에만 적용되는 경로별 `accessibility.instructions.md` 파일을 보여주며, GitHub Copilot가 WCAG 지침에 따라 접근 가능하고 포용적인 HTML을 생성하도록 안내합니다.\n\n````text copy\n---\napplyTo: **/*.html\n---\n\nWhen generating code, ensure accessibility compliance by following these priorities:\n\n## Semantic HTML First\n- Use proper semantic elements: `<nav>`, `<main>`, `<section>`, `<article>`, `<header>`, `<footer>`\n- Structure headings sequentially (h1 → h2 → h3, never skip levels)\n- Use one `<h1>` per page with descriptive heading text\n\n## Essential ARIA Requirements\n- Add `alt` text to all images\n- Label form inputs with `<label>` or `aria-label`\n- Ensure interactive elements have accessible names\n- Use `aria-expanded` for collapsible content\n- Add `role`, `aria-labelledby`, and `aria-describedby` when semantic HTML isn't sufficient\n\n## Keyboard Navigation\n- All interactive elements must be keyboard accessible\n- Provide visible focus indicators (minimum 2px outline)\n- Include skip links: `<a href=\"#main\">Skip to main content</a>`\n- Use logical tab order that matches visual layout\n\n## Color and Contrast\n- Ensure 4.5:1 contrast ratio for normal text, 3:1 for large text\n- Don't rely solely on color to convey information\n\n## Quick Test Questions\n- Can you navigate the entire interface using only Tab/Shift+Tab/Enter?\n- Are all images and icons properly described?\n- Can screen reader users understand the content and functionality?\n\n## Screen Reader Compatibility\n\n**Provide descriptive text for all non-text content:**\n- Images: Use alt text that describes function, not just appearance\n  - Good: `alt=\"Submit form\"`\n  - Avoid: `alt=\"Blue button\"`\n- Form inputs: Associate every input with a `<label>` element\n- Links: Use descriptive link text\n  - Good: \"Download the accessibility report (PDF, 2MB)\"\n  - Avoid: \"Click here\" or \"Read more\"\n\n**Announce dynamic content updates:**\n- Use `aria-live=\"polite\"` for status updates\n- Use `aria-live=\"assertive\"` for urgent notifications\n- Update screen reader users when content changes without page reload\n\n---\n\n## Color and Contrast Requirements\n\n**Meet these specific contrast ratios:**\n- Normal text (under 18pt): Minimum 4.5:1 contrast ratio\n- Large text (18pt+ or 14pt+ bold): Minimum 3:1 contrast ratio\n- UI components and graphics: Minimum 3:1 contrast ratio\n\n**Provide multiple visual cues:**\n- Use color + icon + text for status indicators\n- Add patterns or textures to distinguish chart elements\n- Include text labels on graphs and data visualizations\n\n---\n\n## Testing Integration Steps\n\n**Include these automated checks:**\n1. Run axe-core accessibility scanner in CI/CD pipeline\n2. Test with lighthouse accessibility audit\n3. Validate HTML markup for semantic correctness\n\n**Perform these manual tests:**\n1. Navigate entire interface using only Tab and arrow keys\n2. Test with screen reader (NVDA on Windows, VoiceOver on Mac)\n3. Verify 200% zoom doesn't break layout or hide content\n4. Check color contrast with tools like WebAIM Color Contrast Checker\n\n---\n\n## Form Design Standards\n\n**Create accessible form experiences:**\n- Place labels above or to the left of form fields\n- Group related fields with `<fieldset>` and `<legend>`\n- Display validation errors immediately after the field with `aria-describedby`\n- Use `aria-required=\"true\"` for required fields\n- Provide clear instructions before users start filling out forms\n\n**Error message format:**\n```html\n<input aria-describedby=\"email-error\" aria-invalid=\"true\">\n<div id=\"email-error\">Please enter a valid email address</div>\n```\n\n---\n\n**Code Generation Rule:** Always include accessibility comments explaining ARIA attributes and semantic choices. Test code with keyboard navigation before suggesting it's complete.\n\n````\n\n## 추가 참고 자료\n\n* [GitHub Copilot 응답을 사용자 지정하는 방법에 대한 정보](/ko/copilot/concepts/response-customization) - GitHub Copilot의 응답 사용자 지정 개요\n* [에 대한 사용자 지정 지침 추가 Copilot](/ko/copilot/how-tos/configure-custom-instructions) - 사용자 지정 지침을 구성하는 방법\n* [멋진 GitHub Copilot 사용자 지정](https://github.com/github/awesome-copilot/blob/main/README.md) - 특정 언어 및 시나리오의 커뮤니티 기여 사용자 지정 지침 및 기타 사용자 지정 리포지토리"}