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

Я настраиваю кнопки отправки в моей контактной форме и подписке на блог. Каждая буква слова ОТПРАВИТЬ имеет свой цвет. Я могу использовать изображение для этого или, благодаря помощи, которую я получил в другом потоке, я могу использовать кнопку вместо ввода и стилизовать каждую букву с помощью тегов span и nth-of-type.

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

Кто-нибудь знает, как это влияет на доступность? Спасибо.

Источник

3 ответа

Решение

button является правильным элементом для этого случая (в идеале также с ролью = "представить"). Окрашивание каждой буквы по-разному выглядит как ненадежный UX-вызов; это служебная кнопка, поэтому она должна быть понятной и легко читаемой.

Говоря о доступности, помните, что:

  • некоторые программы чтения с экрана (вспомогательные технологии) будут приостанавливать работу всех тегов HTML, включая встроенные пролеты.

  • если вы напишите свою кнопку так:

    <button>SEND</button>

    программы чтения с экрана произнесут это как "ОТПРАВИТЬ" - по одной букве за раз, как аббревиатуру. Вы можете избежать этого с небольшим количеством CSS.

    HTML:

    <button>Send</button>

    CSS:

    button { text-transform: uppercase; }
Источник

Нет особого значения для доступности, за исключением того, что буквы разных цветов могут создавать ненужные когнитивные проблемы: пользователь может спросить себя, что означают цвета. Но есть вероятность, что это не проблема. Это больше похоже на вопрос стиля; это может выглядеть по-детски.

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

По сравнению с изображением нет большой разницы в доступности, если изображение представляет собой кнопку отправки изображения с адекватным alt приписывать. Это другая проблема, если вы используете только img элемент с действием, связанным с ним с использованием JavaScript; тогда вам нужно будет позаботиться об атрибутах доступности, и страница не будет работать без JavaScript (вероятно, без веской причины).

Источник

Кнопки всегда хороши, потому что они выглядят кликабельными. Это хорошо, что пользователи могут понять вещи.

Не используйте больше цветов, чем необходимо. Цвета используются для поиска внимания, если вы злоупотребляете ими, то ничто не привлекает внимания.

Лучшее сочетание кнопок - иконки со словами. Первое, что привлекает внимание, это значки, которые должны соответствовать "стандартам" (конверт для почты, дом для домашней ссылки...), то же самое с цветами. Красный не так, зеленый хорошо...

О доступности - это больше атрибутов, которые вы вводите в html, чтобы читатели могли использовать его или голосовые переводчики... Например, изображения должны иметь тег "alt", описания...

Если HTML-код чистый и соответствует стандартам, вы уже делаете доступную сеть.

http://www.w3.org/WAI/intro/accessibility.php

Я рекомендую (и многие делают это) книгу Стива Круга "Не делай мне ничего" (я знаю, что это выходит за рамки вопроса).

Источник
Другие вопросы по тегам