WCAG 버튼을 이미지로 제출

Question

제 양식에 제출 버튼이 있습니다 (버튼 + 텍스트). value=""이 비어있어 버튼 이미지에 침입하지 않습니다.

내게 필요한 옵션 사용자가이 버튼을 이해하도록하려면 어떻게해야합니까?

<input type="submit" name="submit" id="submit" value="" class="button" style="background: url(img/enter-now-button.png) no-repeat;" /> 

(숨김) 레이블이 적절합니까?

<label class="hideForm" for="submit">Submit Form:</label> 
<input type="submit" name="submit" id="submit" value="" class="button" style="background: url(img/enter-now-button.png) no-repeat;" /> 

Answer 1

버튼의 내용을 CSS로 제공하는 것은 좋지 않습니다. CSS는 콘텐츠가 아닌 프레젠테이션 용입니다.

대신 당신은

image button state에서
• input element (및 alt attribute) 또는 자식 같은 img element (및 alt attribute)와
• button element를 사용할 수 있습니다.

Answer 2

버튼을 입력하고 그렇지 않으면

Answer 3

내가 @ 동의 이미지를 설명하는 제목 속성을 넣어 헛소리

을 필요로하지 않기 때문에 사용이

input type="image" alt="description of image" src="pathtoimage.ext" 

이 같은 행동해야 unor,하지만 버튼을 사용하는 대신 img 태그를 사용하는 대신 CSS를 사용하여 스타일을 지정하는 것이 좋습니다.

Answer 4

WCAG에 대한 나의 이해는 맹인뿐 아니라 모든 사람을 대상으로한다는 것입니다.

WCAG의 조언 된 기술 (http://www.w3.org/TR/WCAG20-TECHS/H36.html)에 정의 된대로 이미지로 텍스트를 대체하고 대체 텍스트를 제공하는 것이 많은 접근성 전문가에게 충분할 수있는 좋은 방법입니다.

이전 작성자가 준 답변은 대부분 만족해야합니다.

그러나 화면 판독기 나 마우스를 사용하지 않고도 이미지 자체가 작업의 목표를 이해하는 데 충분한 정보를 전달하지 않는 한 충분하지 않습니다.

실시간 안구 추적을 사용하여 웹 사이트를 탐색해야하는 하질증 환자를 생각해보십시오.

내 조언은 다음과 같습니다. 이전에 노출 된 기술 중 하나를 사용하십시오 (button, input [type = image]). 이미지가 수행 할 작업을 알기에 충분한 정보를 전달하는 경우. 다른 경우에는 보이는 캡션 (숨김 또는 화면에서 벗어남)을 사용하여 동작을 설명하십시오 ("요소 삭제를위한 십자가 클릭").