[H36] '이미지 제출 버튼'에 alt 속성을 사용하자.

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H36.html

---

type속성이 'image'인 input요소는 alt 속성으로 대체 텍스트를 제공해야 합니다.

---

기술설명

type속성이 'image'인 input요소(<input type="image"...)에서 alt속성은 그 input요소의 레이블과 같습니다.

그 input요소의 alt는 버튼의 기능을 설명하고 있으며, 이미지에 대한 설명은 하지 않습니다.

페이지 내에 각각 다른 결과를 가져오는 제출 버튼이 여러 개인 경우, 레이블은 특히 중요합니다.

 

input요소는 다양한 종류의 폼 컨트롤을 사용하는데 사용됩니다. HTML 및 XHTML DTD의 모든 폼 컨트롤에 alt 속성을 사용할 수 있지만 type속성이 'image'인 경우에만 사용해야 합니다.

브라우저가 type속성이 'image'인 input요소를 잘 인식하지 못하기 때문입니다.

 

 

 

예시

type속성이 'image'인 input요소의 alt속성

<form action="action.php" method="post">
  <input type="image" name="submit" src="button.gif" alt="제출하기" />
</form>

 

 

관련기술

G94: 비텍스트 콘텐츠와 동일한 목적을 갖고 동일한 정보를 제공하는 비텍스트 콘텐츠에 대한 짧은 텍스트 대체 제공

 

 

점검절차

1. type속성이 'image'인 input요소가 alt 속성을 가지고 있는지 확인합니다.

2. alt 속성이 버튼의 기능을 설명하고 있는지 확인합니다.

---

https://link.coupang.com/a/cl4UpZ

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석: 한 권으로 끝내는 웹 기본 교과서 전면 개정판 - 프

https://link.coupang.com/a/cl4UBK

Do it! 인터랙티브 웹 페이지 만들기 - HTML/CSS | 쿠팡

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

나의 정리

input 요소로 다양한 폼 컨트롤을 만들 수 있으며 아래와 같이 label 요소를 이용하여 대체 텍스트를 제공합니다.

<label for="full_name">이름<label><input type="text" id="full_name" name="name" />

 

 

하지만 type속성이 'image'인 input요소의 경우 label이 지원 되지 않으며 따로 value 속성이 지원되지도 않습니다.

그래서 alt 속성을 사용하여 아래와 같이 사용해야 합니다.

<input type="image" name="submit" src="button.gif" alt="제출하기" />

여기에서 alt 속성은 label과 같다고 볼 수 있으며, 이미지보다는 기능을 설명하고 있습니다.

 

 

---

 

H36: Using alt attributes on images used as submit buttons

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H36.html

H36: Using alt attributes on images used as submit buttons | Techniques for WCAG 2.0