开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

用方框阴影替换表单输入的轮廓是否违反任何WCAG准则？

使用方框阴影替换表单输入的轮廓是否违反任何WCAG（Web Content Accessibility Guidelines）准则，主要取决于具体的实现方式和上下文。以下是对这个问题的详细解答：

基础概念

WCAG是一系列由W3C（World Wide Web Consortium）发布的指南，旨在使网页内容对所有用户（包括残障人士）都易于访问。这些准则分为多个级别，包括A、AA和AAA，每个级别都有更严格的要求。

相关优势

视觉一致性：使用方框阴影可以提供一致的视觉反馈，帮助用户识别哪些元素是可交互的。
美观性：设计上可能会更美观，符合某些设计风格。

类型

轮廓（Outline）：通常是围绕表单输入元素的虚线框，用于指示焦点状态。
方框阴影（Box Shadow）：在元素周围添加阴影效果，可以用于视觉突出或装饰。

应用场景

自定义焦点样式：在某些情况下，开发者可能希望自定义焦点样式以匹配网站的整体设计风格。

问题及原因

问题：使用方框阴影替换表单输入的轮廓可能会违反WCAG准则，特别是如果这样做导致焦点状态不明显或难以识别。

原因：

可访问性问题：残障用户（如使用屏幕阅读器的用户）依赖于视觉提示来理解页面的交互结构。如果焦点状态不明显，他们可能无法有效地导航和操作页面。
对比度不足：如果方框阴影的对比度不足，可能会导致视觉上的混淆，使得焦点状态难以辨认。

解决方法

保持焦点可见性：确保焦点状态在任何情况下都是明显且易于识别的。可以使用高对比度的颜色或样式来突出焦点。
提供替代方案：如果必须使用方框阴影，可以同时保留轮廓或使用其他视觉提示（如颜色变化）来明确指示焦点状态。
测试和验证：使用可访问性测试工具（如WAVE Web Accessibility Evaluation Tool）来验证你的实现是否符合WCAG准则。

示例代码

以下是一个简单的示例，展示如何在保持焦点可见性的同时使用方框阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Input Focus</title>
    <style>
        input:focus {
            outline: none; /* 移除默认轮廓 */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 添加方框阴影 */
            border-color: #007bff; /* 增加边框颜色对比度 */
        }
    </style>
</head>
<body>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
    </form>
</body>
</html>

参考链接

通过上述方法，可以在保持设计美观的同时，确保表单输入的焦点状态对所有用户都是明显且易于识别的。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

从0开始编写一个开关组件

WCAG违反（Level A WCAG violation）。...我在这里做了三件事: 我把标签文本变成蓝色，给整个胶囊形状添加了阴影，还在拇指指甲形状上添加了一个小圆盘。...在本例中，只需将拇指指甲形状移动到中间并选择一个中性的背景颜色即可。因为我们已经为禁用的复选框处理了颜色，所以我们不需要为禁用的不确定情况做任何特殊的事情。 ?...实现这一点是一个选择好的颜色与良好的对比度的问题。在我的示例中，我将表单重置为接近黑色(#101010)，文本重置为白色。...回顾本文包含的内容: 只使用带有CSS的复选框来增强它们; 支持禁用控件; 支持混合状态的复选框; 按文本样式缩放，符合WCAG 1.4.12:文本间距(A); 颜色达到至少3:1对比度，符合WCAG

2.4K2 0

如何提高 Web 可访问性，让残障人士拥有更好的体验？

你知道装饰性图片、信息性图片和功能性图片之间的区别吗？你知道为它们编写好的替换文本意味着什么吗？你知道所有直播和预录视频都需要音频描述吗？...让你的内容更容易访问不能仅仅依靠 Web 开发人员，或者只是勾选视频字幕和替换文本框。...创建可访问 Web 内容的准则是什么？...对于等级 AAA，在任何一秒钟内都不能有任何东西闪动超过三次。让图片可访问在 Web 上使用图片时，其中一个最好的做法是尽可能不使用带有文字的图片或文字密集的图形。...从设计的角度来看，应该经常检查文本的颜色，以确认是否有足够的颜色对比。

7252 0

前端如何提高用户体验：增强可点击区域的大小

作者：Ahmad Shadded 译者：前端小智来源：css-tricks 你是否曾经试着点击或点击一个元素(例如:按钮、链接)，并且注意到只有单击该元素的特定区域，它才会响应？...WCAG准则 WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则，简单的说就是为了方便残障人士（包括低视患者，盲人，聋人，学习障碍，行动不便，认知障碍...举个例子，在WCAG准则2.3.2中规定：网页不包含任何闪光超过3次/秒的内容。用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。...在下面的图中，我模拟了两个按钮的不同情况。在左侧，按钮更小，更远，用户需要更多的时间与它互动。在右侧，按钮大小更大，更接近于它的同级输入元素，这将使交互更容易、更快。 ?...注意：记住WCAG准则和费兹法则的概念。按钮在需要时使用实际真实(包含可点击区域)非常重要。

4.8K2 0

纯干货！谷歌MD深色主题设计规范详解（附Sketch官方文件下载）

使用 OLED 屏幕的设备可以在任何时候确保黑色像素是不发光的。原则在有较大纵深的环境当中，使用深灰色而非黑色来呈现高程和空间。更深的灰色 ?...为了保持品牌本身的可识别性，品牌色应该可以在深色主题之下充分地使用，但是这种跨主题配色的元素应该控制在一两个元素的范围内，比如只有品牌LOGO 和品牌按钮是这样用的。...重要、中等重要和被禁用的文本区别定制应用 Material Design 中的一些用例可以帮你更好的设计深色主题。...禁用状态所有的被禁用的组件，都使用不透明度为 12% 的白色用来呈现外轮廓和填充色，并使用不透明度为 38% 的白色来显示文本和表层的内容。 ?...轮廓容器：不透明度为12%的白色标签/图标：不透明度为38%的白色色彩填充容器：不透明度为12%的白色相关资源 Sticker sheet 是和 Sketch for Android 这套组件一起使用的

9.8K1 0

增强网站无障碍功能的十条准则

我们列出了十条关于网站无障碍功能的准则，它们能保证你的网站对任何人（包括残疾人）都是可用的。 W3C的主席蒂姆·伯纳斯-李说过一句话：“网络的力量在其普遍性”。...我们设计的这十条准则，就是为了保证所有的网站都是普世的。这些准则不仅能帮助读屏的用户，也能改善在连接较慢时的浏览用户体验。...最理想的是在设计的时候就检查颜色对比度是否能满足符合要求，因此一定要让你和设计团队有正确的工具进行检查。我们推荐Sketch的插件Stark plugin，来检查你的设计是否能满足无障碍的需求。...2.不要禁止缩放行为（约五分钟）在这个自适应设计遍布的时代，我们总会犯一些违反自适应性的错误。一个常见的错误就是使用 maximum-scale=1.0，因为它禁止了在移动设备上网页的缩放功能。...散光影响欧洲、亚洲约30%~60％的成年人，但模糊的内容会影响到所有年龄和国籍的人（嗨，妈妈，说的就是你！）。允许网页放大不仅是WCAG的另一个准则，也是简化这些人日常生活的工具。

1K4 1

可访问性测试（无障碍测试）

最终，一切都转化为“更好的业务-更多的钱”。如何衡量网页可访问性? web的可访问性可以通过W3C创建的web内容可访问性准则(WCAG)来衡量。...Firefox:打开Firefox并在地址栏中输入about:config，您将得到如下所示的输出。...尽量不要触摸鼠标，用键盘来访问网站。您可以使用“Tab”键在链接之间切换‍ “Tab”+“Shift”会带你回到原来的位置。...#6)使用字段标签:它在填写表单时很有用，字段标签是你在查看模板时看到的。通过使用它，人们可以在网上注册或订购东西时填写必要的信息。 #7)将字体大小改为大:使用大字体和连续可访问性检查。...可访问性扩展插件管理器界面点击扩展后，你会得到一个搜索插件的选项。 #7) TAW在线:它让你可以选择测试检查软件是否按照WCAG 1.0或WCAG 2.0的指导方针开发。

7735 1

UI设计师一定要了解的15个表单设计原则

不过，表单这种控件应用范畴极为广泛，应用情况牵涉到方方面面，所以请注意，今天的文章里我们所提及的设计准则都只是一般准则，每一种其实都有例外的情况。...不过作为一般准则，它们可以很好地引导你设计出一个可用性极佳的表单，同时，作为设计师的你还需要根据实际情况，灵活地调整细节。接下来，我们一起来看看这些准则都包含了哪些内容吧。尽量使用单列设计 ?...●○● 用户有的时候并不知道哪些字段是必须填写哪些可以不用填写的，通常会使用星号（*）来区分两者，但是星号有的时候并不能为用户理解，所以尽量用文字来标识差异。相关信息分组 ?...值得思考的问题设计师应当考虑可选字段是否真的必要，并且尽量从更多的渠道搜集数据。用户数据的搜集和录入日趋完善甚至日益复杂化。...在不违反上述一般法则的基础上，设计师能做的事情还有很多，为什么不让表单更有趣呢?

2.1K4 0

关于无障碍设计的七件事

译者注：Color Safe（http://colorsafe.co/）根据你输入的背景色，生成符合WCAG的字体颜色的可选色板。 ?...WebAIM颜色对比度检查器（https://webaim.org/resources/contrastchecker/）根据你输入的字体颜色和背景颜色，检查是否符合WCAG标准。 ?...上图相当于Mac电脑针对无障碍提供的功能，但是这需要网页配合这一功能。如果你选择不使用浏览器的默认焦点，那么请用“更好”的视觉提示替换掉浏览器所提供的。下面的?来自BBC。...缺失一：没有边框的表格下面是传统的文本输入的示例。它是一个具有定义边界的矩形。表单输入区域可以填充颜色（当然不一定要填充）。还有一个可见标签，在这个例子里位于字段的左侧。 ?...要设计一个记笔记的或者博客APP，你会怎么做？缺失二：没有标签的表格 “标签”告诉用户该字段的用途。当焦点在输入框内时，如今常见的用“占位文本”来替代标签是一种不太好的做法。

3K3 0

AngularDart4.0 指南- 表单顶

一路上你将学习如何：用组件和模板构建一个Angular表单。使用ngModel创建读取和写入输入控制值的双向数据绑定。跟踪状态变化和表单控件的有效性。...请注意提交按钮被禁用，并且输入控件从绿色变为红色。您将以小步骤构建此表单：创建英雄模型类。创建控制表单的组件。用初始表单布局创建一个模板。...用model替换诊断绑定表达式。通过这种方式，您可以确认双向数据绑定适用于整个英雄模型。...名称输入是必需的，清除它将框的轮廓变为红色。这说明有些事情是错的，但用户不知道什么是错的，或者该怎么做。利用控件的状态来显示有用的消息。...用ngSubmit提交表单用户应该能够在填写表单后提交这个表单。表单底部的Submit按钮本身不做任何事情，但是由于它的类型（type =“submit”），它会触发一个表单提交。

17.5K3 0

Web内容的无障碍性(1):概述为什么Accessibility无障碍如此重要

信息无障碍信息无障碍，英文词语来自“Accessibility”，是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息、利用信息（注意是任何人，无论是健全人还是残疾人，无论是年轻人还是老年人等等）...它的作用就是方便任何人可以精准的找到键盘字母的位置，从而可以在不看键盘的情况下，快速的打字，俗称“盲打”，大家都知道它的含义，没有人会把这个词理解为“盲人打字”吧。...理解WCAG 2.0- 理解和实施WCAG 2.0的指南。对于WCAG 2.0的每一个准则和成功标准，这些主要议题都有一个简短的“理解”文档。...用声音传达的信息无法被听障用户所理解，简单解决方法是提供另外途径的信息传达方式，而不仅仅是声音，例如用文字描述、用图片。...残障用户经常无法使用鼠标，除非创建网站的导航和输入方式的需求中就考虑残障人士的需求，否则残障人士可能完全无法使用你的网站。认知和神经障碍用户网站往往比较复杂，要想找到我们所想要的信息经常不太容易。

8581 0

为啥你的UI界面感觉乱？这7个常见问题一定要避免

任何错误消息都是用户流程的障碍。因此，我们需要帮助用户进行处理，提供任何可能的解决方案，并设法消除不良体验，尤其是这不是用户犯错的情况下。...例如，一个好的解决方案可能是设计404和500页的插图或动画。 a.表单合法性检查在设计错误状态时，请尽量避免惹恼用户。特别要注意所有可能的形式检查。 ‍ 例如，假设您有一个包含必填字段的表单。...成熟的设计师更倾向于克制的做设计。比如将文字缩小到8px甚至更小，使用浅灰色阴影（因为它看起来不错）。虽然它更适合我的UI界面布局，但是它忽略了有视力障碍的访客。...WCAG（Web内容可访问性指南）提到，必须要保证4.5:1的对比度。为了确保您符合这些标准，请下载Stark，它将检查您的设计是否可访问。...· 圆角半径—如果您的图标包含一些矩形形状，请比较集合中每个图标的圆角半径。如果不同的图标不同，则最好对其进行修复。 · 风格形状（用于轮廓图标）—可以是矩形或圆形。

1.4K4 0

【Web前端】CSS中的图像、媒体和表单元素

网页开发中，图像、媒体和表单元素是构建用户界面的重要组成部分。正确地使用 CSS 来处理这些元素可以大幅提高用户体验，增强页面的美观性和功能性。一、什么是替换元素？图像和视频被描述为“替换元素”。...也就是说，替换元素的高度和宽度通常是由其外部内容来决定的。示例 : 替换元素的基本用法的替换元素网页布局中，替换元素的使用非常普遍。无论是图像、视频还是其他媒体元素，合理安排这些元素的位置能够提升页面的可读性和美观性。示例 : 布局中的替换元素表单的布局和样式进行了美化，使其更具吸引力。五、样式化输入元素文本输入元素是表单中最常见的元素之一，通过 CSS，可以调整其外观，使其与网页整体设计相一致。...border-radius: 4px; /* 圆角边框 */ padding: 10px; /* 内边距 */ outline: none; /* 去掉聚焦时的轮廓

811 0

独家 | KNIME分析平台简介

也可以运行一种优化方法得到最优的聚类数，如肘部法，轮廓优化法，或间隙统计法。从k=3开始。在k-Means节点的节点配置窗口中（图7）中，决定是用数据集的前k行还是用k个随机数据点初始化算法。...图8：三个聚类的质心 d)用轮廓系数确定聚类质量成功地确定了三个聚类之后，需要对聚类质量进行评价，更准确地说，何以对选取的k是否足够好做出评价？...当节点成功执行之后，可以右键单击它，打开表单，其中显示了每个元组的聚类关联和轮廓系数，表中报告了每个聚类的平均轮廓系数和总体均值。...具体来说，KNIME是一个免费的开放平台，无论资源是否可用，使用者有无经验，任何想要理解数据的人都可以利用KNIME平台做数据分析。...具体来说，KNIME是一个免费的开放平台，无论资源是否可用，使用者有无经验，任何想要理解数据的人都可以利用KNIME平台做数据分析。

1.2K1 0

使用 Python 和 OpenCV 构建 SET 求解器

阴影识别卡片阴影或 “填充” 的方法使用卡片最大轮廓内的像素密度。颜色识别卡片颜色的方法包括评估三个颜色通道 (RGB) 的值并比较它们的比率。...然后每个变体都被编码为一个整数，这样任何卡片都可以用四个整数的数组表示。例如，带有两个空菱形符号的紫色卡片可以表示为 [1,1,3,2]。现在卡片表示为数组，让我们评估一下 SET！...评估 SET 为了检查已识别卡片中的集合，将卡片对象数组传递给 SetEvaluator 类。方法一：所有可能的组合至少有两种方法可以评估卡的数组表示形式是否为有效集。...如果没有余数，这些值的任何其他总和都不能被3整除。我们将这种方法应用于所有 660 种组合，保存了有效的组合。快看，我们有了我们的 SET！...方法 1 的一种更有效的替代方法是迭代地选择两张卡片，计算它们的 SET 密钥，并检查该密钥是否出现在剩余的卡片中。

1.3K6 0

H5 和 CSS3 新特性

summary 标签包含 details 元素的标题 dialog 定义对话框，比如提示框增强型表单 HTML5 拥有多个新的表单 Input 输入类型。...url URL 地址的输入域 week 选择周和年 html5 也新增以下表单元素表单元素描述 datalist 元素规定输入域的选项列表，使用 input 元素的 list 属性与 datalist...元素的 id 绑定 keygen 提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段 output 用于不同类型的输出，比如计算或脚本输出 html5 新增的表单属性表单属性描述 placehoder...resize box-sizing outline-offset resize 属性规定是否可由用户调整元素尺寸。...就可以轻松完成 inherit：规定应从父元素继承 box-sizing 属性的值 outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓 CSS 兼容内核 -moz-：代表

2.4K1 0

10条提高网站可访问性的建议

我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的，包括残疾人。 W3C和万维网的负责人Tim Berners-Lee发表了一篇报道，他说：“网络的力量在于它的普遍性”。...缩放的能力不仅仅是WCAG的另一个准则，而是简化这些人日常生活的工具。所以下一次你正在建立一个响应式的网站，想想视力模糊的这些人。...subtitle和captions 这可能是WCAG实现的最困难的准则之一，而不是因为技术上的困难，而是因为它可能是耗时的。...8、关于隐藏元素有几种方法可以用HTML和CSS隐藏东西。...Color Filter:使用此在线工具测试您的网站不同类型的色盲。 W3C Validator: 这个官方的W3C工具将让您知道您的HTML标记是否遵循网络无障碍规则！

1K1 0

JavaScript--DOM总结

在提交表单之前调用 Form表单提交的三种方式直接在form表单中设置提交按钮或button 使用HTML5方法,在表单外面也可使用,类似label 使用JavaScript中的submit()方法...设置或返回用于阴影的颜色 shadowBlur 设置或返回用于阴影的模糊级别 shadowOffsetX 设置或返回阴影距形状的水平距离 shadowOffsetY 设置或返回阴影距形状的垂直距离...rotate() 旋转当前绘图 translate() 重新映射画布上的 (0,0) 位置 transform() 替换绘图的当前转换矩阵 setTransform() 将当前转换重置为单位矩阵。...x,y 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。标准 Event 属性下面列出了 2 级 DOM 事件标准定义的属性。...设置元素的顶边距 outline 在一行设置所有的outline属性 outlineColor 设置围绕元素的轮廓颜色 outlineStyle 设置围绕元素的轮廓样式 outlineWidth 设置围绕元素的轮廓宽度

761 0

寒假提升｜ Day6 CSS 第四部分

总结元素隐藏的方法，并且说出他们的区别 display:none 元素不显示出来, 并且也不占据位置, 不占据任何空间 visibility:hidden 会占据元素应该占据的空间 rgba设置颜色...轮廓效果 1.3. box-shadow 盒子阴影 – box-shadow **box-shadow **属性可以设置一个或者多个阴影每个阴影用表示多个阴影之间用逗号,隔开，从前到后叠加...文字阴影 - text-shadow text-shadow用法类似于 box-shadow ，用于给文字添加阴影效果的常见格式如下(没有向内) 我们可以通过一个网站测试文字的阴影:...https://html-css-js.com/css/generator/box-shadow/ 行内非替换元素的注意事项以下属性对行内级非替换元素不起作用 width、height、margin-top...，其他图片按顺序层叠在下面注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的 3.2. background-repeat background-repeat 用于设置背景图片是否要平铺

1.3K2 0

如何为移动应用设计出色的图标

阅读有关颜色心理学的知识，以使您的颜色与您的应用目的保持一致。使用A / B测试帮助您检查颜色选择是否正确。选择不常见的颜色（例如紫色或青绿色的阴影）时要小心：它将区分您的应用，无论是好是坏。...建议为Apple Store创建正方形图标，因为该图标将始终按照蒙版形状显示轮廓。因此，在Apple Store中，只有少数图标具有圆形或不规则形式。...谷歌物料设计模板 Android为Play商店图标提供了不同的形状。他们的所有准则都包含在“ Material Design”文档中。 ?...您可以自由探索自己喜欢的任何自定义形状，有时将图标中的元素直接使用会很好。甚至谷歌也这么做了。 ?...对于复杂的表单和图形，也会发生相同的可伸缩性问题，这就是大多数图标设计简单的原因。如果这些表单与特定的徽标或公司图片没有关联，至少它们应该与应用的功能相关。

1.4K2 0

（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

在使用HTML5之前，w3c希望用XHTML来替代HTML，因为HTML与XHTML相比，XHTML是一种更加严格，更加规范的HTML代码，这是因为XHTML要求HTML必须是一种XML文档格式，XML...表单相关元素和属性 form元素用于生成输入表单，action用于被提交到的地址，method用于提交表单发送哪种类型的请求，属性值为get或是post，enctype用于指定表单内容编码使用的字符集...autofocus属性自动获取焦点，pattern属性用于验证表单输入的内容，相反novalidate属性提交表单时不对其进行验证，required属性规定必须在提交之前必须填入输入的值。...阴影的水平方向偏移的距离 v-shadow 阴影的垂直方向偏移的距离 blur 模糊的半径距离 spread 阴影的额外增加的尺寸 color 阴影的颜色 inset 切换为内部阴影 outline-offset...轮廓可以增加一个属性，设置轮廓的偏移量变形属性，transform和transform-origin 3D变形属性，transform属性： rotateX: 表示元素沿着x轴旋转 rotateY：

1.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭