::placeholder

您所在的位置:网站首页 textarea的placeholder垂直居中 ::placeholder

::placeholder

2024-07-17 18:46| 来源: 网络整理| 查看: 265

对比度

占位文本通常采用较浅的颜色处理,以表明它是对输入的建议,而不是任何实际的输入。

重要的是要确保占位文本的颜色与输入的背景之间的对比度足够高,以便视力较差的人能够阅读它,同时还要确保占位文本与输入文本的颜色有足够的差异,以免用户将占位符误认为是输入的数据。

色彩对比度是通过比较占位文本和输入背景的颜色的亮度来确定的。为了满足当前的 Web 内容无障碍指南(WCAG),文本内容需要达到 4.5:1 的对比度,而较大的文本(如标题)需要达到 3:1 的对比度。大文本定义为 18.66px 及以上的粗体文本,或 24px 及以上的文本。

WebAIM:色彩对比度检查器 MDN:了解 WCAG,指南 1.4 的解释 了解成功标准 1.4.3 | W3C:了解 WCAG 2.0 可用性

具有足够色彩对比度的占位文本可能会被理解为输入的内容。占位文本在用户向 元素输入内容后也会消失。这两种情况都可能影响表单的成功填写,尤其是对于存在认知障碍的人。

另一种方法是在输入框外部的视觉接近位置包含占位信息,然后使用 aria-describedby 以编程的方式将 与其提示关联起来。

通过这种方式,即使在输入框中输入了信息,提示内容也是可用的,而且在加载页面时,输入框看起来是没有预先存在的输入内容的。大多数屏幕阅读技术会在输入的标签文本被宣告后使用 aria-describedby 读取提示内容,并且使用屏幕阅读器的人可以在确定额外信息并不必要时将其静音。

html你的电子邮件地址 示例:[email protected] 表单字段中的占位符是有害的——尼尔森诺曼集团


【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3