Input date type firefox: — HTML: HyperText Markup Language

1. Может легко управляться пользователями мыши.
2. Можно легко управлять касанием — на смартфонах, планшетах или настольных компьютерах/ноутбуках с сенсорными экранами.
3. Можно легко управлять с помощью клавиатуры, что важно для зрячих пользователей, использующих только клавиатуру, и пользователей программ чтения с экрана настольных компьютеров/ноутбуков.
4. Может легко управляться программой распознавания речи, такой как Dragon NaturallySpeaking.
5. Может легко использоваться пользователями с инструментами увеличения экрана.
6. Могут быть легко поняты и управляемы пользователями программ чтения с экрана — знают ли они, что от них ожидается?

Тестирование

Чтобы проверить поддержку input type="date" , я создал тестовую страницу ввода даты. На этой странице я включил 3 ввода даты. У одного из них установлено значение по умолчанию, у другого установлено максимальное и минимальное значение, а у третьего вообще нет ограничений. Я также включил простое текстовое поле, чтобы можно было провести сравнение с текстовым полем в браузерах, которые не поддерживают input type="date" .

В тестах я собираюсь проверить, как этот тип поля ввода ведет себя в следующих браузерах и с соответствующими вспомогательными технологиями:

• Firefox 65 для Windows, включая программу чтения с экрана NVDA.
• Chrome 72 для Windows, в том числе с программами чтения с экрана JAWS и Dragon NaturallySpeaking
• Internet Explorer 11 для Windows, в том числе с программой чтения с экрана JAWS и Dragon NaturallySpeaking
• Edge 17 для Windows, в том числе с программой чтения с экрана JAWS и Dragon NaturallySpeaking
• Safari 12 на MacOS 10, включая Voiceover
• Safari на iOS11 — в том числе с Voiceover
• Chrome 72 на Android 8, в том числе с Talkback
• Firefox 65 на Android 8 — в том числе с Talkback
• Браузер UTC на Android 8, в том числе с Talkback

Эти документы были полезны при планировании моего тестирования: вспомогательные данные для ввода даты в разделе «Можно ли использовать» и статья журнала Smashing Magazine о типах ввода HTML5, в которой есть раздел, посвященный вводу даты. Заметки Mozilla Developer Network о вводе даты также содержат некоторую информацию о тестировании поддержки браузером версии 9.0446 тип ввода=»дата» .

Резюме результатов

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

Достаточно ли поддержки для input type="date" , чтобы сделать его безопасным для использования в составе доступного веб-сайта или веб-приложения?

Хотя некоторые браузеры довольно хорошо поддерживают тип ввода = «дата», включая наши требования к специальным возможностям, наш ответ, к сожалению, должен быть… «Нет».

Основные причины, по которым я пришел к такому выводу:

• Кажется невозможным успешно взаимодействовать с вводом данных с помощью Dragon NaturallySpeaking.
• Отсутствие объявления сообщений об ошибках проверки браузера в Safari/iOS с VoiceOver и Firefox/Android с Talkback сводит на нет полезную встроенную функциональность элемента управления и означает, что по-прежнему потребуется более «традиционная» проверка ошибок.
• Некоторые сообщения об ошибках проверки браузера следуют неудобному для пользователя шаблону «гггг-мм-дд», а не используют настройки локали пользователя.
• На устройствах Android с Talkback, чтобы прослушать ранее выбранную дату в элементе управления, необходимо открыть представление календаря. Текущее значение должно считываться после метки элемента управления.
• Поля, содержащие недопустимые даты, иногда выделяются цветом, но программы чтения с экрана не всегда объявляют их недействительными.
• Отсутствие поддержки в IE11 и, что более важно, в Safari на Mac. Эти браузеры обрабатывают ввод даты как текстовые поля, что само по себе не является проблемой, но любая дата по умолчанию или ранее введенная дата отображается в недружественном формате, что может сбить с толку посетителей сайта.

Фокус озвучивания перемещается в верхнюю часть страницы после взаимодействия с барабанами календаря в Safari/iOS также раздражает, но, похоже, это особенность Safari при взаимодействии с элементами — это не недостаток удобства использования характерно для input type="date" . Новые элементы HTML5 могут многое предложить для улучшения взаимодействия с пользователем и обеспечения согласованности и доступности «из коробки», чтобы сэкономить время разработчиков. Но, как мы видели в случае с элементами и , в настоящее время эти концепции разочаровывают из-за небрежности или отсутствия поддержки со стороны производителей браузеров и вспомогательных технологий. Что вы думаете? Мы надеемся, что эти идеи будут вам полезны, и хотели бы узнать о вашем опыте внедрения элементов управления датами. Поделитесь своими комментариями ниже. Хотите больше? Если этот блог был полезен, вы можете подписаться на информационный бюллетень Hassell Inclusion, чтобы ежемесячно получать по электронной почте дополнительную информацию. Подробные результаты испытаний Firefox 65 в Windows Firefox неплохо справляется с тип ввода="дата" . Первоначальное представление выглядит как текстовое поле и показывает дату по умолчанию в правильном формате для региона моего ноутбука — в моем случае дд/мм/гггг. Ввод даты без предопределенного значения также показывает «дд-мм-гггг», как если бы это был заполнитель. Вкладка в элементе управления показывает, что пользователи клавиатуры фактически имеют дело с тремя отдельными компонентами, и значения можно изменить с помощью клавиш со стрелками вверх и вниз. В качестве альтернативы я могу печатать непосредственно в каждой части. При вводе даты в Firefox отображается подсветка клавиатуры в части дня Щелчок по элементу управления датой приводит к появлению средства выбора даты в стиле календаря. Для дат, для которых установлены минимальные и/или максимальные значения, они отражаются в календаре, и недопустимые даты нельзя выбрать с помощью мыши. Также есть подсветка текущей выбранной даты. Щелчок по маленькому значку X внутри поля полностью очищает значение. При вводе даты в Firefox отображается интерфейс выбора даты после щелчка в элементе управления С помощью клавиатуры можно выбрать недопустимые даты, но при отправке формы отображается сообщение об ошибке, сгенерированное браузером. Обратите внимание, что дата в сообщении об ошибке отображается в формате гггг-мм-дд, что отражает фактическое значение атрибута, а не более удобочитаемое представление. При вводе даты в Firefox отображается сообщение об ошибке после отправки формы с неверной датой Таким образом, этот элемент работает в Firefox довольно хорошо. Но я обнаружил ошибку в Bugzilla, связанную с форматированием сообщения. С NVDA В Firefox лучшим средством чтения с экрана является NVDA, поскольку JAWS 18 плохо работает с более новыми версиями Firefox. Когда NVDA работает, когда пользователи сталкиваются с элементом управления датой, считывается метка, и NVDA называет элемент управления «редактированием даты». Затем он озвучивает, с какой из «кнопок вращения» вы взаимодействуете, и объявляет текущее значение. При перемещении между «кнопками прокрутки» метка считывается только в первый раз. Используя клавиши со стрелками вверх/вниз для изменения значения, каждый раз объявляется новое значение. Отправка формы приведет к тому, что любые недопустимые даты — например, 31 февраля 2019 года — будут вызваны NVDA. Кроме того, если дата выходит за пределы любого заданного минимального или максимального значения, сообщение об ошибке будет прочитано в менее удобном для пользователя формате гггг-мм-дд. Эти автоматически объявляемые сообщения не включают метку поля, поэтому форма с несколькими записями дат может немного запутать пользователей программ чтения с экрана. Однако переход к полю с недопустимой датой приводит к тому, что программа чтения с экрана объявляет о недопустимой записи. Chrome 72 в Windows Подобно Firefox, Chrome для Windows довольно хорошо справляется с input type="date" . Опять же, при первоначальном просмотре это выглядит как текстовое поле, а там, где отображается значение по умолчанию, оно имеет формат, соответствующий моей локали. Щелкнув по нему или перейдя по нему, вы увидите, что есть три компонента — по одному для дня, месяца и года. Также есть интерактивный X для очистки ввода и маленькие интерактивные стрелки вверх и вниз для изменения значений. В правом конце находится большая стрелка вниз, при нажатии на которую открывается вид календаря. Пользователи клавиатуры могут взаимодействовать с каждой частью, используя клавиши со стрелками вверх и вниз для перемещения по значениям, а также можно ввести дату непосредственно в элемент управления. Ввод даты в Chrome Открытие представления календаря для ввода даты, где установлены минимальные и/или максимальные значения, показывает, как различаются действительные даты и сегодняшняя дата. Недопустимые даты не могут быть выбраны пользователями мыши в представлении календаря. Просмотр календаря Chrome только для пользователей мыши Если с клавиатуры вводятся неверные даты и форма отправляется, отображается сообщение об ошибке, сгенерированное браузером. Обратите внимание, что, в отличие от Firefox, сообщение об ошибке содержит дату в более удобном для пользователя формате. При вводе даты Chrome отображается сообщение об ошибке С JAWS Использование JAWS с Chrome дает мне всю информацию, необходимую для понимания того, для чего нужны входные данные и что от меня ожидается. Он сообщает мне, когда я нахожусь в день, месяц или год, и считывает этикетку (каждый раз!). Он говорит мне, что я нахожусь в «поле редактирования счетчика», и говорит мне, что я могу ввести значения или использовать клавиши со стрелками вверх или вниз. Счетчики для дня и месяца зацикливаются, когда достигают максимально возможных значений – 31 для дня, 12 для месяца. Я также могу получить доступ к средству выбора даты, перейдя к кнопке и нажав пробел. Мне приказано использовать клавиши со стрелками для перемещения по датам. И я также могу выбрать месяцы отдельно. Единственным недостатком этого доступного (хотя и многословного) интерфейса является то, что JAWS не озвучивает генерируемые браузером сообщения об ошибках с допустимой датой. Таким образом, если допустимый диапазон не указан в метке для ввода даты, пользователи JAWS не будут знать, почему форма не будет отправлена. С драконом Естественно говорящий С помощью Dragon я не могу выбрать поля даты, либо говоря «щелкните текст», либо «щелкните [ часть метки ]». Я могу поместить фокус в поля даты, нажав табуляцию, а затем сказав «нажмите ввод», чтобы открыть представление календаря, но тогда кажется невозможным взаимодействовать с календарем. В качестве альтернативы я могу использовать «Сетку мыши», чтобы нажимать на части ввода даты, но после этого я не могу вводить какие-либо числа в отдельные элементы. Кажется, что Dragon не поддерживает input type="date" . Internet Explorer 11 в Windows Как и следовало ожидать, Internet Explorer 11 не поддерживает input type="date" каким-либо особым образом. Вместо этого браузер показывает просто текстовое поле, которое пусто, если не указано значение. Internet Explorer 11 просто показывает текстовое поле для элемента управления вводом даты К сожалению, там, где указано значение, IE11 показывает немодифицированный формат «гггг-мм-дд», что не всегда удобно для пользователя. Неудивительно, что ничто не мешает пользователям вводить неверные даты, если они указаны атрибутами, и нет встроенной проверки браузера и сообщения об ошибке при отправке формы. С ЧЕЛЮСТЯМИ JAWS относится к вводам как к «Редактировать», как и к текстовым полям. Этикетка читается так, как вы ожидаете. Неудивительно, что все даты по умолчанию считываются в неудобном для пользователя формате «гггг-мм-дд». С драконом Естественно говорящий Хотя они могут выглядеть как текстовые поля, Dragon не видит вводимые данные как текстовые поля. Если я скажу «Click type text», я могу ожидать, что Dragon добавит свои флаги выбора к вводу даты, но, как мы видим здесь, этого не происходит: Результат попытки выбрать текстовые поля в Dragon NaturallySpeaking Также кажется невозможным сосредоточить внимание на полях ввода даты, заключая текст метки в кавычки в любой комбинации, что мне было бы легко сделать с другими типами ввода. В крайнем случае, я мог бы использовать голосовые команды для перехода к вводу даты или использовать сетку мыши для направления указателя мыши. Но, сделав это, кажется, невозможно что-либо продиктовать в поля ввода даты. Это существенный блокировщик. Край 17 в Windows В то время как MS Edge в Windows разочаровал, когда мы рассмотрели поддержку и , с input type="date" поддержка намного лучше. При первом просмотре элемент управления выглядит как текстовое поле, а значение по умолчанию представлено в соответствии с моей локалью — для меня «дд/мм/гггг». Ввод даты в браузере Edge Когда я перехожу к элементу управления, индикация фокуса означает, что это один ввод. Однако я не могу ввести дату непосредственно в поле. Но если я вместо этого нажму Enter или щелкну элемент управления, мне будет показан интерфейс календаря, который напоминает мне средство выбора даты по умолчанию в iOS (см. Раздел iOS ниже). Когда отображается этот интерфейс, пользователи клавиатуры могут переходить к каждой части и использовать клавиши со стрелками вверх/вниз для изменения значений, наконец, нажав Enter, чтобы завершить свой выбор, или Escape, чтобы закрыть интерфейс, не делая выбора. Пользователи с сенсорным экраном могут перетаскивать значения вверх или вниз по мере необходимости. Пользователям мыши не все так просто, поскольку им приходится несколько раз нажимать выше или ниже, чтобы приблизиться к нужному значению. Таким образом, этот элемент управления может быть не так хорош для пользователей мыши, выбирающих, например, дату рождения. Селектор даты в браузере Edge Если установлены минимальные и максимальные значения, интерфейс календаря соответствующим образом укорачивается, поэтому он хорошо предотвращает неверный ввод. Браузер Edge ограничивает выбор, чтобы разрешить только действительные даты С ЧЕЛЮСТЯМИ Я не могу получить ничего значимого ни с одной страницы, используя JAWS с Edge. С драконом Естественно говорящий Мне никогда не удавалось успешно использовать Dragon NaturallySpeaking с Edge. Safari 12 на MacOS 10 К сожалению, в Safari на Mac полностью отсутствует поддержка ввода даты. Поля ввода даты представлены так, как если бы они были текстовыми полями, а значение по умолчанию в первом поле не интерпретируется повторно в удобочитаемый формат, как в других браузерах. Ввод даты в Safari на Mac — точно так же, как текстовые поля Другая проблема заключается в том, что при вводе или отправке неверных дат нет проверки браузера и сопутствующего сообщения об ошибке. Safari на Mac принимает ввод недопустимых дат При тестировании с MacOS Voiceover поведение такое же, как если бы поля были текстовыми полями. Это означает, что Mac Safari наиболее близок к IE11 в обработке input type="date" . Потребуются некоторые функции сценариев для представления значений по умолчанию в более удобном формате и для обеспечения проверки полей. В Webkit Safari обнаружена нерешенная ошибка из-за отсутствия поддержки input type="date" . Сафари на iOS11 При первоначальном просмотре ввод даты отображается как раскрывающийся список. Там, где указаны даты по умолчанию, они отображаются в удобочитаемой форме — например, «6 февраля 2019 года». Первоначальный просмотр ввода даты в Safari на iOS Прикосновение к элементу управления открывает стандартное средство выбора даты iOS с 3 барабанами, где пользователи могут перемещать каждый из них вверх и вниз отдельно, чтобы выбрать дату. Счетчики календаря закрываются нажатием где-нибудь за пределами представления календаря — действие, которое выбирает дату, отображаемую в данный момент в счетчиках календаря. Катушки календаря iOS отображаются после нажатия на элемент управления датой Нет ограничений на даты, которые можно выбрать, даже в элементах управления, где указана минимальная и/или максимальная дата. Отправка формы с недопустимой датой приводит к тому, что счетчики календаря снова отображаются, а также отображается сообщение об ошибке, сгенерированное браузером: «Значение должно быть меньше или равно 2019-03-05». Обратите внимание, что в сообщении об ошибке используется неудобный для пользователя формат гггг-мм-дд. И я не уверен, что люди думают о датах с точки зрения «меньше чем» или «больше чем». Возможно, лучше использовать слова «до» или «после». В тех случаях, когда отправленные даты выходят за допустимый диапазон, отображается сообщение об ошибке Использование озвучивания Когда фокус достигает элемента управления датой, VoiceOver называет его «всплывающей кнопкой» и успешно считывает метку и любую отображаемую в данный момент дату. Двойное нажатие на элемент управления открывает барабаны календаря, но фокус находится на кнопке «Очистить» вверху. Пользователь может провести пальцем по каждому из трех «элементов выбора» и провести пальцем вверх или вниз, чтобы изменить выбор по одному шагу за раз. Кажется, это нормальное поведение для средства выбора даты iOS. Чтобы выбрать дату, пользователю VoiceOver нужно коснуться где-нибудь за пределами наложения календаря, а затем дважды коснуться. Это действие выбирает любую дату, отображаемую в барабанах календаря. Но, к сожалению, кажется, что фокус VoiceOver теперь переместился прямо к стрелке «Назад» в самом верху экрана Safari. Это действительно плохое удобство использования, так как теперь мне нужно найти, где я был на странице — либо прокручивая, либо водя пальцем по экрану, пока я не найду это. Было бы намного лучше, если бы фокус VoiceOver оставался на вводе даты, с которым я только что взаимодействовал. Как упоминалось выше, если для ввода даты установлены минимальные и/или максимальные значения, а форма отправлена, браузер генерирует сообщение об ошибке. Однако VoiceOver никогда не озвучивает это сообщение, даже если я пытаюсь провести пальцем по нему вручную. На мой взгляд, это огромная проблема. Chrome 72 на Android 8 В Chrome на Android поля даты отображаются в виде прямоугольника с градиентным фоном и стрелкой вниз. Там, где установлены значения по умолчанию, они отображаются в формате, соответствующем моей локали – для меня дд/мм/гггг. Как ввод даты отображается в Chrome на Android При нажатии на элемент управления открывается представление календаря ОС Android по умолчанию, чтобы пользователи могли выбрать дату. Невозможно ввести дату в элемент управления. Если установлены минимальные или максимальные значения, недопустимые даты для текущего месяца отображаются более светлым цветом и не могут быть выбраны. Кроме того, в опции года будут указаны только действительные годы. Поэтому невозможно выбрать неверную дату. Представление календаря Android с недопустимыми датами, выделенными серым цветом После закрытия представления календаря вокруг элемента управления, с которым в последний раз взаимодействовали, появляется тонкая индикация фокуса. Использование двусторонней связи Использование стандартного представления календаря ОС должно гарантировать хорошую доступность, и если вы знакомы с тем, как работает представление календаря Android, использование Talkback для выбора даты не составит труда. Как и прежде, невозможно выбрать недопустимые даты. Chrome на Android с работающим Talkback. Talkback успешно объявляет лейбл Однако одной из особенностей использования Talkback является то, что если я пролистываю ввод даты, где значение уже было установлено, Talkback не объявляет текущее значение, если только я дважды не нажму, чтобы открыть представление календаря, что заставляет Talkback объявить ранее выбранная дата. Это кажется ненужной дополнительной работой, которую должны выполнять пользователи программ чтения с экрана. Клавиатура Bluetooth Использование Bluetooth-клавиатуры (без Talkback), подключенной к Android-устройству, также не вызывает проблем. Я могу перейти к полям даты и нажать Enter, чтобы открыть представление календаря. Затем я могу использовать клавишу табуляции и клавиши со стрелками для перемещения фокуса по мере необходимости, чтобы выбрать альтернативные годы, месяцы, а затем дни, когда я нахожусь в нужном месяце. Индикация фокусировки очевидна. Использование клавиатуры Bluetooth с календарем Android. Серый круг показывает фокус клавиатуры Firefox 65 на Android 8 Начальный вид ввода даты показывает, что они выглядят как текстовые поля. Но, как и в случае с Chrome, прикосновение к ним показывает представление календаря Android, хотя и с немного другой цветовой схемой. Обратите внимание, что текущая дата (8 февраля) выделена другим цветом. Просмотр календаря Android в Firefox Выбор даты касанием точно такой же, как и в Chrome. С двусторонней связью Работа с Talkback разочаровывает. Во-первых, при переходе к вводу даты Talkback не объявляет метку элемента управления, когда фокус переходит на элемент управления. Фокус перемещается между тремя частями ввода, а также символами «/» между частями дня, месяца и года. Talkback не объявляет текущее значение каждой из частей ввода, когда я пролистываю. Firefox на Android. Выделение на дневной части Чтобы прослушать текущую выбранную дату, я должен дважды коснуться одной из частей ввода — действие, которое открывает представление календаря Android. Сначала фокус идет на год, и мне нужно провести пальцем вперед, чтобы услышать день и месяц. Это вынуждает пользователей использовать гораздо больше жестов, чем им нужно, — не лучший опыт. Если я каким-то образом выбрал неверную дату и отправляю форму, используя Talkback, я никогда не слышу сгенерированное браузером сообщение об ошибке, которое отображается в форме. Формат даты в сообщении об ошибке соответствует неудобному для пользователя формату гггг-мм-дд. Также обратите внимание, что недопустимое поле обведено красным. Это не лучший опыт. Отправка даты вне допустимого диапазона в Firefox на Android. Браузер сгенерировал сообщение об ошибке, не прочитанное Talkback Клавиатура Bluetooth С клавиатурой Bluetooth, подключенной к устройству Android, Firefox на Android ведет себя точно так же, как Firefox на ноутбуке. Переход к вводу даты показывает, что я взаимодействую с тремя элементами и могу использовать клавиши со стрелками вверх и вниз. Можно выбрать недопустимые даты с помощью клавиатуры, но попытка отправить форму приводит к отображению сообщения об ошибке, информирующего пользователя о том, что не так с датой. Кроме того, как и в версии Firefox для ноутбуков, это сообщение об ошибке ссылается на дату в неудобном для пользователя формате гггг-мм-дд. Браузер UC на Android 8 Внешний вид и прикосновение В браузере UC (4-й по популярности браузер в мире, особенно используемый в Китае) внешний вид и функциональность элементов управления датами такие же, как в Chrome на Android. Представление календаря имеет немного другую цветовую схему, но в остальном все работает так же. С двусторонней связью Кажется, что при использовании Talkback с UC Browser вообще невозможно что-то сделать, поэтому этот тест был отменен. Клавиатура Bluetooth При подключенной клавиатуре Bluetooth UC Browser ведет себя практически так же, как Chrome.Навигация по записямКак поставить большое тире: Несколько способов поставить длинное тире в ВордеЦена веб дизайн: Сравнение: Сколько стоит сайт Фриланс VS АгенствоДобавить комментарий Отменить ответВаш адрес email не будет опубликован. Обязательные поля помечены *Комментарий *

Имя *

Email *

Сайт