创建现代形式,可访问等的最佳实践是什么？特别是,标签与占位符斗争

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属性将标签链接到输入,简而言之,它遵循最佳实践.它具有其他用户体验优势:如果用户单击输入然后分心,标签将始终显示在其旁边,并且可以轻松地提醒他们输入正在等待的信息.

但是,我的产品所有者和我的设计师非常希望我删除标签并使用占位符代替,所以代码就是

<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>

这两个论点是,它在屏幕上使用的空间更少/更漂亮,而且,用户将示例值误认为是他们可能输入的内容,并且不知道该字段不为空的原因(这当然是对比问题,占位符是浅灰色的,不应该被误认为是真正的值,深黑色,但是呃,根据PO,他们这样做.

我该怎么办？我应该努力争取将标签保留在设计中吗？如果我display: none在标签上添加,屏幕阅读器是否还会读取它？我应该换一个position: absolute; left: -9999px; top: -9999px;吗？

目前的最佳做法是什么？

Answer 1

该官方规格的placeholder属性特别说给未使用占位符的标签.

警告!使用占位符属性作为标签的替代可能会降低控件的可访问性和可用性

占位符文本存在很多问题:

• 文本可能会被误认为已输入的内容
• 文字的色彩对比度不足
• 当输入字段获得焦点时,文本消失

其中许多是认知问题,这是可访问性的一个巨大领域.即使所有这些原因看起来都很"愚蠢",因为你永远不会遇到任何这些问题,但你并不是每个人的代表性样本.

一些替代方案是在输入字段"内部"出现"浮动"标签,但是当字段获得焦点时,标签浮动在字段外. 布拉德弗罗斯特有一个很好的例子. CSS-Tricks有一个,但我不喜欢美学(但你肯定可以调整它).要查看实时示例,Discover Card会在其登录区域中使用它们.

如果您希望教学文本与输入字段相关联,例如显示日期格式(mm/dd/yy vs ddmmmyy vs whatever)或电子邮件格式或电话号码格式等,则文本应显示在屏幕上与字段分开但通过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这样的东西很难决定它是1月2日还是2月1日,但是使用locality可以帮助),或使用"选择器"小部件来选择日期或国家或其他.