WCAG submit button as image

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 предназначен для презентации, а не для контента.

Вместо этого вы можете использовать

• input element в image button state (и его alt attribute) или
• в button element с img element (и его alt attribute), как ребенок.

Answer 2

Использование

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

это должно действовать так же, как и кнопка отправки и не требует махинаций

В противном случае поставить атрибут заголовка, который описывает изображение

Answer 3

Я согласен с @ unor, но я бы рекомендовал использовать css для стилизации кнопки вместо использования тега img внутри кнопки.

Answer 4

Мое понимание WCAG заключается в том, что оно предназначено для всех, а не только для слепых.

Замена текста изображением и предоставление альтернативы в тексте, как определено в советованных методах WCAG (http://www.w3.org/TR/WCAG20-TECHS/H36.html), является хорошей вещью, которая будет достаточной для многих экспертов по доступности.

Ответы предыдущих авторов должны удовлетворять большинству из них.

Но этого будет недостаточно, если само изображение не передает достаточной информации, чтобы понять цель действия без использования экранного ридера или мыши.

Подумайте о параплегическом человеке, который должен, например, перемещаться по веб-сайту с помощью отслеживания глаз в реальном времени.

Так что мой совет будет: использовать один из методов, открытых ранее (кнопка, input [type = image]), если изображение передает достаточную информацию, чтобы узнать, какое действие оно будет делать. В других случаях используйте также видимый заголовок (не скрытый или вне экрана), чтобы описать действие («щелкните крест для удаления элемента»).