[웹접근성 완벽가이드 ④] [프롬프트]코딩 작업물 접근성 보완 프롬프트 예시

코딩 작업물에 접근성을 보완하고 싶을 때 사용할 수 있는 ChatGPT 프롬프트 예시입니다.

코딩 작업물 접근성 보완 프롬프트 예시

1. HTML/CSS 접근성 향상 요청

이 HTML/CSS 코드의 웹접근성을 향상시켜줘. 시맨틱 태그 사용, ARIA 속성 추가, 스크린리더 대응 등 필요한 부분을 보완해춰.보완한 부분에 태그표시로 설명해줘

2. 커스텀 UI 컴포넌트 접근성 보완

첨부한 코드에서 커스텀 버튼/모달/아코디언/탭 UI가 있는데, 스크린리더 사용자와 키보드 사용자도 사용할 수 있도록 WAI-ARIA 속성과 키보드 조작을 추가해주고 태그표시로 설명해줘

3. 스크린리더 최적화 요청

스크린리더 사용자에게 정확히 정보가 전달되도록 ARIA 속성, 숨김 텍스트, 대체 텍스트 등을 추가해줘

4. 키보드 내비게이션 보완 요청

첨부한 코드에서 키보드로 모든 인터랙션이 가능하도록 tabindex 및 키 이벤트를 추가해 주세요. 접근성을 고려한 방식으로 구현해줘

5. 전체 구조 접근성 점검 요청

첨부한 코딩 작업물의 접근성 구조(시맨틱 마크업, 헤딩 구조, landmark 역할 등)를 점검하고 개선안을 제시해줘

6. 접근성 평가 기준 기반 점검 요청

이 코드가 WCAG 2.1 기준(Level AA)에 부합하는지 확인해 주고, 부족한 부분이 있다면 수정해줘

Tip: 특정 상황별 추가 요청 예시

• 시각장애인을 위한 대체 텍스트 요청
• 이미지나 아이콘에 적절한 대체 텍스트(alt 속성)를 추가해줘
• ARIA 속성만 점검하고 싶을 때
• 이 코드에 필요한 ARIA role, state, property 속성이 누락된 부분이 있다면 보완해줘
• 티스토리 블로그에 코드 예제로 활용할 수 있도록 요청
• 이 코드를 티스토리에 게시할 수 있도록 접근성 예제로 정리해 주세요. 코드 설명과 접근성 포인트를 함께 써줘

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.