Прогрессивное улучшение

Прогрессивное улучшение

От автора: В своей статье Создание эффективной формы для пожертвований Брэд Фрост (Brad Frost) рекомендует использовать кнопки вместо переключателей c типом radio, цитируя твит Люка Роблевски (Luke Wroblewski). Я не согласился, а Брэд ответил, что у него другая точка зрения. После того как к обсуждению присоединилось больше людей, демо-пример был обновлен. И в нем уже стали использовать radio переключатели, но я считаю, что можно сделать еще лучше. Я собираюсь продемонстрировать, что простой хороший семантический HTML + CSS могут дать нам очень многое.

Суть обсуждения

Как можно разметить и стилизовать такую вот форму, как представлено ниже (оригинал):

Взгляните на демо-страницу

Основные моменты

Главной целью будет построение формы с использованием семантической разметки и с учетом принципа прогрессивного улучшения. Отправка формы и доступ к ее содержимому должны осуществляться без использования JavaScript.

Исходная разметка

Оригинальный пример (псевдокод):

<form>
  <fieldset>
    <h4></h4>
      <ul>
        <li><button data-message="...">$25</button></li>
        <li><button data-message="...">$50</button></li>
        <li><button data-message="...">$100</button></li>
        <li><button data-message="...">$250</button></li>
        <li><button data-message="...">$500</button></li>
        <li><input type="text" value=""></li>
      </ul>
    <div>
    <input type="checkbox" /><label></label>
  </fieldset>
  ...
</form>

Заголовок

В обновленной версии контент заголовка генерируется автоматически, чтобы подстроиться под значение атрибута data-message у тегов label для каждого radio переключателя (я предполагаю, что также было и с элементами button).

Проблема здесь заключается в том, что данные ключевые метки предназначены для JavaScript и недоступны (невидимы) пользователям, использующим экранные дикторы. Чтобы изменить данную ситуацию необходимо использовать активные области ARIA:

Активные области информируют пользователей, использующих вспомогательные технологии, об обновлениях, происходящих в документе, без отрыва пользователей от текущих действий (Обновление активных областей WAI-ARIA).

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

В качестве дополнительного замечания стоит отметить, что каждый «шаг» процесса пожертвования обернут в тег fieldset. Поэтому было бы правильно использовать здесь тег legend вместо заголовка (хотя это может быть «назойливым» или бесполезным фактором для пользователей, использующих экранные дикторы).

Теги fieldset

Тег fieldset должен содержать элемент legend:

Требуется, чтобы элементы fieldset и legend использовались вместе. Элемент fieldset не может использоваться без элемента legend и наоборот (Элементы Fieldset, legend и экранные дикторы).

Первым элементом внутри элемента fieldset должен быть элемент legend, дающий название или описание всей группы внутри элемента fieldset (H71: Указание описания для групповых элементов управления формами).

Хотя это сложно сделать, потому что, я должен признать, что, несмотря на то, что в моем примере содержится тег legend, ему задано свойство display:none. Все потому, что элемент legend будет излишним для такой маленькой формы. Более того, программа чтения экрана (Voice Over) будет озвучивать элемент legend после элементов label.

Обновление: элемент legend также остался скрытым, но сейчас я применяю атрибут aria-labelledby для элемента fieldset. И теперь он привязан к заголовку.

Список

Я не вижу здесь необходимости в создании списка. Возможно, его использование как-то оправдано в случае с кнопками, но не с radio переключателями (?), потому что radio переключатели уже подразумевают организацию группы, в отличие от кучки кнопок. Я не думаю, что от этого кому-то станет хуже, но поскольку список здесь неуместен, то в нем нет необходимости.

Кнопки

Кнопки увеличивают количество позиций табуляции для пользователей, использующих клавиатуру, и требуют использования JavaScript для отправки данных. Radio переключатели гораздо лучше подходят, потому что они созданы для этого (единственный вариант).

Атрибут @type

Замена type=»text» на type=»number» для поля «другая сумма» дает нам возможность осуществлять бесплатную валидацию на стороне клиента (\w00t/).

Атрибут placeholder

Атрибут @placeholder – это не замена элемента label. У нас нет тега label, связанного с полем «другая сумма», и я не вижу также атрибута @title (смотрите H65).

Простой хороший семантический HTML

Используя простой хороший семантический HTML, разметка может выглядеть вот так:

<form>
    <div>
        <fieldset>
            <legend></legend>
            <input type="radio" />
            <label><b>$25 ...</b></label>
            <input type="radio" />
            <label><b>$50 ...</b></label>
            <input type="radio" />
            <label><b>$100 ...</b></label>
            <input type="radio" />
            <label><b>$250 ...</b></label>
            <input type="radio" />
            <label><b>$500 ...</b></label>
        </fieldset>
        <input type="number" value=""><label></label>
        <p><input type="checkbox" /><label></label></p>
    </div>
  ...
</form>

Посмотрите на страницу без CSS

Нет больше заголовка, нет списка и нет больше атрибута @data-message. Значение этого атрибута теперь является частью контента, который передается пользователям, использующим экранные дикторы, когда они осуществляют навигацию по элементам управления формой.

Имея эту базовую разметку, пользователи уже могут осуществить выбор и отправить форму без использования JavaScript. А благодаря атрибуту type=»number» мы можем произвести валидацию тега input.

Я поместил пару input/label для «ежемесячного пожертвования» в самый конец формы, но мне нравится предложение Тоби Марсдена (Toby Mardsen) поднять ее наверх, перед всеми вариантами.

Улучшение

Теперь, когда у нас есть функциональная форма, мы можем поиграть с ней, используя CSS. Мы можем использовать псевдоклассы :focus/:hover с добавлением селектора дочерних элементов (+), чтобы создать всплывающий эффект у содержимого элементов label, чтобы заставить «маркер» (который выделяет выбор) скользить между элементами label, чтобы генерировать контент, чтобы стилизовать тень в DOM и т.д.:

/* всплывающий эффект для элемента label у выбранного radio переключателя */
input:checked + label > b {
    display: block;
}
/* оформление сгенерированного контента, связанного с выбранным radio переключателем, или оформление элемента label при наведении на него указателем мыши */
input:checked + label:before,
label:hover:before {
    font-size: 1em;
    text-shadow: none;
}
/* убираем кнопку «spin» (позволяющую увеличивать значение) */
::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
/* заставляем текст атрибута placeholder исчезнуть, когда поле находится в фокусе */
#other-amount:focus::-webkit-input-placeholder {
    opacity: 0;
    transition: opacity .3s;
}
/* посмотрите на стили в теге style на демо-странице */

Это конечный результат

Дополнительно

С этого момента мы будем…

Использовать JavaScript для управления разными «состояниями» элементов управления:

снимать/сбрасывать выбор radio переключателей, если пользователь выбрал поле «другая сумма»

очищать поле «другая сумма», если пользователь снова выбрал один из radio переключателей

Редактировать CSS правила для обеспечения браузерной совместимости, поскольку сейчас мой подход подтвержден в рамках использования движка WebKit.

Убрать знак валюты из CSS, чтобы облегчить создание локализации.

Заменить float на inline-block, чтобы при желании было легче отцентрировать элементы label и подстроиться под языки, использующие написание справа налево (RTL – right-to-left).

Автор: Thierry Koblentz

Источник: http://cssmojo.com/

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree