Какова лучшая практика для создания современной формы, доступной и т. Д.?Особенно, лейбл против заполнителя борьбы

Question

Я ищу советы и отзывы, так как не могу решить, каким будет путь.

Я создаю форму HTML5 и хочу, чтобы они были максимально простыми в использовании.Вот почему я всегда использовал label для объяснения того, что вводить в поле, и заполнитель в качестве примера значения в хорошем формате.

Итак, мой код всегда выглядит так:

<form>
    <fieldset>
        <p>
            <label for="origin-field">Please enter your origin address</label>
            <input type="text" name="origin" id="origin-field" placeholder="23th Street, New York City" required />
        </p>
        <p>
            <label for="destination-field">Please enter you destination address</label>
            <input type="text" name="destination" id="destination-field" placeholder="Ashbury Street, San Francisco" required />
        </p>
    </fieldset>
    <p>
        <input type="submit" />
    </p>
</form>

Этот код доступен, ярлыки связаны с входами с помощью атрибута for, короче говоря, он учитывает лучшие практики.У него есть и другие преимущества UX: если пользователь нажимает на вход, а затем отвлекается, рядом с ним всегда отображается метка, которая может легко напомнить им, какую информацию ожидает ввод.

Однако владелец моего продукта иМой дизайнер очень хочет, чтобы я удалил метку и использовал вместо этого заполнитель, поэтому код будет

<form>
    <fieldset>
        <p>
            <input type="text" name="origin" id="origin-field" placeholder="Origin address" required />
        </p>
        <p>
            <input type="text" name="destination" id="destination-field" placeholder="Destination address" required />
        </p>
    </fieldset>
    <p>
        <input type="submit" />
    </p>
</form>

Два аргумента: он занимает меньше места на экране / более красив, а также пользователи ошибочно принимаютПример значения как то, что они могли бы ввести и не понять, почему поле не пустое (это, конечно, проблема с контрастом, заполнитель светло-серый, и его не следует путать с настоящим значением, глубоким черным, ноСогласно СП, они делают).

Что мне делать?Стоит ли бороться, чтобы сохранить ярлык в дизайне?Если я добавлю display: none на этикетку, будет ли он по-прежнему читаться программами чтения с экрана?Должен ли я вместо этого поставить position: absolute; left: -9999px; top: -9999px;?

Какова текущая лучшая практика?

Answer 1

Официальная спецификация для атрибута placeholder специально говорит, что не использует заполнитель в качестве метки.

Внимание! Использование атрибута заполнителя в качестве замены метки может уменьшить доступность и удобство использования элемента управления

Существует много проблем с текстом заполнителя:

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

Многие из них - когнитивные проблемы, которые огромная область в доступности.Даже если все эти причины кажутся «глупыми», потому что you никогда не будет иметь ни одной из этих проблем, you не является репрезентативной выборкой для всех.

Некоторые альтернативыиметь «плавающую» метку, которая появляется «внутри» поля ввода, но когда поле получает фокус, метка перемещается за пределы поля. Брэд Фрост имеет действительно хороший пример. CSS-хитрости есть, но мне не нравится эстетика (но вы, конечно, можете ее подправить).Чтобы увидеть живой пример, Discover Card использует их в своей области входа в систему.

Если вы хотите, чтобы учебный текст был связан с полем ввода, например, чтобы показать формат даты (мм /дд / гг против ддмммй против чего бы то ни было) или формат электронной почты или формат номера телефона и т. д., текст должен быть виден на экране и отделен от поля, но связан с полем через атрибут aria-describedby.Например:

<label for="phone">Phone number</label>
<input id="phone" aria-describedby="info">
<span id="info">(xxx)-xxx-xxxx</span>

Конечно, с точки зрения общего UX, у вас не должно быть полей ввода, в которые пользователь может вводить недопустимый текст.Вы должны попытаться выяснить, что они напечатали, и отформатировать их для них.Существует множество алгоритмов телефонных номеров, позволяющих пользователю печатать любой формат по своему усмотрению или позволяющим ему вводить дату в любом формате (хотя что-то вроде 1/2/18 может быть трудно решить, будет ли это 2 января или 1 февраля, но с использованиемместность может помочь), или используя виджет "селектор", чтобы выбрать дату или страну или что-то еще.

Answer 2

Наличие только текста-заполнителя вместо меток имеет некоторые проблемы.

1. Текст-заполнитель исчезает, когда пользователь начинает вводить данные в поле ввода.Затем он нарушает SC 3.2.2, так как нет видимых ярлыков или инструкций.
2. Когда текст вводится поверх текста заполнителя, некоторые комбинации средства чтения с экрана и браузера будут заполнять значение заполнителя как доступное имя в API доступности, если в коде нет другой метки, а некоторые средства чтения с экрана не«т.Таким образом, они еще не поддерживаются равномерно.
3. Даже если метки предоставляются только для чтения с экрана или закадровым текстом, это выгодно пользователям SR, но отсутствие визуальной метки является проблемой для пользователей с когнитивными нарушениями, низким дефицитом внимания и т. Д.

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

Answer 3

Отвечая на ваши вопросы:

Какая лучшая практика для создания современной формы, доступной и т. Д.?В частности, метка против битвы с заполнителями

Используйте потрясающий начальный загрузчик и шрифт, если вы объедините их, вы получите потрясающую загрузочную форму :) используйте form-group

Что следуетЯ делаю?Стоит ли бороться, чтобы сохранить ярлык в дизайне?Если я положу дисплей: на этикетке нет, будет ли он читаться программами чтения с экрана?Должен ли я поставить позицию: абсолют;слева: -9999 пикселей;верх: -9999px;вместо этого?

Какова текущая лучшая практика?

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

Bootstrap

Fontawesome