WCAG违反（Level A WCAG violation）。...我在这里做了三件事: 我把标签文本变成蓝色，给整个胶囊形状添加了阴影，还在拇指指甲形状上添加了一个小圆盘。...在本例中，只需将拇指指甲形状移动到中间并选择一个中性的背景颜色即可。因为我们已经为禁用的复选框处理了颜色，所以我们不需要为禁用的不确定情况做任何特殊的事情。 ?...实现这一点是一个选择好的颜色与良好的对比度的问题。在我的示例中，我将表单重置为接近黑色(#101010)，文本重置为白色。...回顾 本文包含的内容: 只使用带有CSS的复选框来增强它们; 支持禁用控件; 支持混合状态的复选框; 按文本样式缩放，符合WCAG 1.4.12:文本间距(A); 颜色达到至少3:1对比度，符合WCAG
你知道装饰性图片、信息性图片和功能性图片之间的区别吗？你知道为它们编写好的替换文本意味着什么吗？你知道所有直播和预录视频都需要音频描述吗？...让你的内容更容易访问不能仅仅依靠 Web 开发人员，或者只是勾选视频字幕和替换文本框。...创建可访问 Web 内容的准则是什么？...对于等级 AAA，在任何一秒钟内都不能有任何东西闪动超过三次。 让图片可访问 在 Web 上使用图片时，其中一个最好的做法是尽可能不使用带有文字的图片或文字密集的图形。...从设计的角度来看，应该经常检查文本的颜色，以确认是否有足够的颜色对比。
作者：Ahmad Shadded 译者：前端小智 来源：css-tricks 你是否曾经试着点击或点击一个元素(例如:按钮、链接)，并且注意到只有单击该元素的特定区域，它才会响应？...WCAG准则 WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则，简单的说就是为了方便残障人士（包括低视患者，盲人，聋人，学习障碍，行动不便，认知障碍...举个例子，在WCAG准则2.3.2中规定：网页不包含任何闪光超过3次/秒的内容。 用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。...在下面的图中，我模拟了两个按钮的不同情况。在左侧，按钮更小，更远，用户需要更多的时间与它互动。在右侧，按钮大小更大，更接近于它的同级输入元素，这将使交互更容易、更快。 ?...注意：记住WCAG准则 和费兹法则 的概念。 按钮 在需要时使用实际真实(包含可点击区域)非常重要。
使用 OLED 屏幕的设备可以在任何时候确保黑色像素是不发光的。 原则 在有较大纵深的环境当中，使用深灰色而非黑色来呈现高程和空间。 更深的灰色 ?...为了保持品牌本身的可识别性，品牌色应该可以在深色主题之下充分地使用，但是这种跨主题配色的元素应该控制在一两个元素的范围内，比如只有品牌LOGO 和品牌按钮是这样用的。...重要、中等重要和被禁用的文本区别 定制应用 Material Design 中的一些用例可以帮你更好的设计深色主题。...禁用状态 所有的被禁用的组件，都使用不透明度为 12% 的白色用来呈现外轮廓和填充色，并使用不透明度为 38% 的白色来显示文本和表层的内容。 ?...轮廓容器：不透明度为12%的白色 标签/图标：不透明度为38%的白色 色彩填充容器：不透明度为12%的白色 相关资源 Sticker sheet 是和 Sketch for Android 这套组件一起使用的
我们列出了十条关于网站无障碍功能的准则，它们能保证你的网站对任何人（包括残疾人）都是可用的。 W3C的主席蒂姆·伯纳斯-李说过一句话：“网络的力量在其普遍性”。...我们设计的这十条准则，就是为了保证所有的网站都是普世的。 这些准则不仅能帮助读屏的用户，也能改善在连接较慢时的浏览用户体验。...最理想的是在设计的时候就检查颜色对比度是否能满足符合要求，因此一定要让你和设计团队有正确的工具进行检查。我们推荐Sketch的插件Stark plugin，来检查你的设计是否能满足无障碍的需求。...2.不要禁止缩放行为（约五分钟） 在这个自适应设计遍布的时代，我们总会犯一些违反自适应性的错误。 一个常见的错误就是使用 maximum-scale=1.0，因为它禁止了在移动设备上网页的缩放功能。...散光影响欧洲、亚洲约30%~60％的成年人，但模糊的内容会影响到所有年龄和国籍的人（嗨，妈妈，说的就是你！）。 允许网页放大不仅是WCAG的另一个准则，也是简化这些人日常生活的工具。
最终，一切都转化为“更好的业务-更多的钱”。 如何衡量网页可访问性? web的可访问性可以通过W3C创建的web内容可访问性准则(WCAG)来衡量。...Firefox:打开Firefox并在地址栏中输入about:config，您将得到如下所示的输出。...尽量不要触摸鼠标，用键盘来访问网站。 您可以使用“Tab”键在链接之间切换 “Tab”+“Shift”会带你回到原来的位置。...#6)使用字段标签:它在填写表单时很有用，字段标签是你在查看模板时看到的。通过使用它，人们可以在网上注册或订购东西时填写必要的信息。 #7)将字体大小改为大:使用大字体和连续可访问性检查。...可访问性扩展 插件管理器界面 点击扩展后，你会得到一个搜索插件的选项。 #7) TAW在线:它让你可以选择测试检查软件是否按照WCAG 1.0或WCAG 2.0的指导方针开发。
不过，表单这种控件应用范畴极为广泛，应用情况牵涉到方方面面，所以请注意，今天的文章里我们所提及的设计准则都只是一般准则，每一种其实都有例外的情况。...不过作为一般准则，它们可以很好地引导你设计出一个可用性极佳的表单，同时，作为设计师的你还需要根据实际情况，灵活地调整细节。 接下来，我们一起来看看这些准则都包含了哪些内容吧。 尽量使用单列设计 ?...●○● 用户有的时候并不知道哪些字段是必须填写哪些可以不用填写的 ，通常会使用星号（*）来区分两者，但是星号有的时候并不能为用户理解，所以尽量用文字来标识差异。 相关信息分组 ?...值得思考的问题 设计师应当考虑可选字段是否真的必要，并且尽量从更多的渠道搜集数据。 用户数据的搜集和录入日趋完善甚至日益复杂化。...在不违反上述一般法则的基础上，设计师能做的事情还有很多，为什么不让表单更有趣呢?
信息无障碍信息无障碍，英文词语来自“Accessibility”，是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息、利用信息（注意是任何人，无论是健全人还是残疾人，无论是年轻人还是老年人等等）...它的作用就是方便任何人可以精准的找到键盘字母的位置，从而可以在不看键盘的情况下，快速的打字，俗称“盲打”，大家都知道它的含义，没有人会把这个词理解为“盲人打字”吧。...理解WCAG 2.0- 理解和实施WCAG 2.0的指南。对于WCAG 2.0的每一个准则和成功标准，这些主要议题都有一个简短的“理解”文档。...用声音传达的信息无法被听障用户所理解，简单解决方法是提供另外途径的信息传达方式，而不仅仅是声音，例如用文字描述、用图片。...残障用户经常无法使用鼠标，除非创建网站的导航和输入方式的需求中就考虑残障人士的需求，否则残障人士可能完全无法使用你的网站。认知和神经障碍用户网站往往比较复杂，要想找到我们所想要的信息经常不太容易。
一路上你将学习如何： 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值的双向数据绑定。 跟踪状态变化和表单控件的有效性。...请注意提交按钮被禁用，并且输入控件从绿色变为红色。 您将以小步骤构建此表单： 创建英雄模型类。 创建控制表单的组件。 用初始表单布局创建一个模板。...用model替换诊断绑定表达式。 通过这种方式，您可以确认双向数据绑定适用于整个英雄模型。...名称输入是必需的，清除它将框的轮廓变为红色。 这说明有些事情是错的，但用户不知道什么是错的，或者该怎么做。 利用控件的状态来显示有用的消息。...用ngSubmit提交表单 用户应该能够在填写表单后提交这个表单。表单底部的Submit按钮本身不做任何事情，但是由于它的类型（type =“submit”），它会触发一个表单提交。
译者注：Color Safe（http://colorsafe.co/）根据你输入的背景色，生成符合WCAG的字体颜色的可选色板。 ?...WebAIM颜色对比度检查器（https://webaim.org/resources/contrastchecker/）根据你输入的字体颜色和背景颜色，检查是否符合WCAG标准。 ?...上图相当于Mac电脑针对无障碍提供的功能，但是这需要网页配合这一功能。 如果你选择不使用浏览器的默认焦点，那么请用“更好”的视觉提示替换掉浏览器所提供的。 下面的?来自BBC。...缺失一：没有边框的表格 下面是传统的文本输入的示例。它是一个具有定义边界的矩形。表单输入区域可以填充颜色（当然不一定要填充）。还有一个可见标签，在这个例子里位于字段的左侧。 ?...要设计一个记笔记的或者博客APP，你会怎么做？ 缺失二：没有标签的表格 “标签”告诉用户该字段的用途。当焦点在输入框内时，如今常见的用“占位文本”来替代标签是一种不太好的做法。
任何错误消息都是用户流程的障碍。因此，我们需要帮助用户进行处理，提供任何可能的解决方案，并设法消除不良体验，尤其是这不是用户犯错的情况下。...例如，一个好的解决方案可能是设计404和500页的插图或动画。 a.表单合法性检查 在设计错误状态时，请尽量避免惹恼用户。特别要注意所有可能的形式检查。 例如，假设您有一个包含必填字段的表单。...成熟的设计师更倾向于克制的做设计。比如将文字缩小到8px甚至更小，使用浅灰色阴影（因为它看起来不错）。虽然它更适合我的UI界面布局，但是它忽略了有视力障碍的访客。...WCAG（Web内容可访问性指南）提到，必须要保证4.5:1的对比度。为了确保您符合这些标准，请下载Stark，它将检查您的设计是否可访问。...· 圆角半径—如果您的图标包含一些矩形形状，请比较集合中每个图标的圆角半径。如果不同的图标不同，则最好对其进行修复。 · 风格形状（用于轮廓图标）—可以是矩形或圆形。
也可以运行一种优化方法得到最优的聚类数，如肘部法，轮廓优化法，或间隙统计法。 从k=3开始。在k-Means节点的节点配置窗口中（图7）中，决定是用数据集的前k行还是用k个随机数据点初始化算法。...图8：三个聚类的质心 d)用轮廓系数确定聚类质量 成功地确定了三个聚类之后，需要对聚类质量进行评价，更准确地说，何以对选取的k是否足够好做出评价？...当节点成功执行之后，可以右键单击它，打开表单，其中显示了每个元组的聚类关联和轮廓系数，表中报告了每个聚类的平均轮廓系数和总体均值。...具体来说，KNIME是一个免费的开放平台，无论资源是否可用，使用者有无经验，任何想要理解数据的人都可以利用KNIME平台做数据分析。...具体来说，KNIME是一个免费的开放平台，无论资源是否可用，使用者有无经验，任何想要理解数据的人都可以利用KNIME平台做数据分析。
阴影 识别卡片阴影或 “填充” 的方法使用卡片最大轮廓内的像素密度。 颜色 识别卡片颜色的方法包括评估三个颜色通道 (RGB) 的值并比较它们的比率。...然后每个变体都被编码为一个整数，这样任何卡片都可以用四个整数的数组表示。例如，带有两个空菱形符号的紫色卡片可以表示为 [1,1,3,2]。 现在卡片表示为数组，让我们评估一下 SET！...评估 SET 为了检查已识别卡片中的集合，将卡片对象数组传递给 SetEvaluator 类。 方法一：所有可能的组合 至少有两种方法可以评估卡的数组表示形式是否为有效集。...如果没有余数，这些值的任何其他总和都不能被3整除。 我们将这种方法应用于所有 660 种组合，保存了有效的组合。快看，我们有了我们的 SET！...方法 1 的一种更有效的替代方法是迭代地选择两张卡片，计算它们的 SET 密钥，并检查该密钥是否出现在剩余的卡片中。
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-：代表
总结元素隐藏的方法，并且说出他们的区别 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 用于设置背景图片是否要平铺
我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的，包括残疾人。 W3C和万维网的负责人Tim Berners-Lee发表了一篇报道，他说：“网络的力量在于它的普遍性”。...缩放的能力不仅仅是WCAG的另一个准则，而是简化这些人日常生活的工具。 所以下一次你正在建立一个响应式的网站，想想视力模糊的这些人。...subtitle和captions 这可能是WCAG实现的最困难的准则之一，而不是因为技术上的困难，而是因为它可能是耗时的。...8、关于隐藏元素 有几种方法可以用HTML和CSS隐藏东西。...Color Filter:使用此在线工具测试您的网站不同类型的色盲。 W3C Validator: 这个官方的W3C工具将让您知道您的HTML标记是否遵循网络无障碍规则！
在提交表单之前调用 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 设置围绕元素的轮廓宽度
某些类型的组件具有响应式的海拔高度，会根据用户的输入（例如 正常状态、获取焦点、按下）和系统事件来改变自身的海拔。这些海拔高度的改变通常是通过动态海拔高度偏移来实现的。...动态海拔高度偏移是组件从静止海拔高度向目标海拔高度所移动的距离。所有组件在被按下时，默认所增加的海拔高度是一样的。一旦输入事件完成或取消，组件会回到原来静止的海拔高度。...View 进行裁剪 通过 outlin.canClip() 方法来检查是否支持擦肩。...物质材料内部可以展示任何形状和颜色，但其内容不会增加材料的厚度。...但是设置最好不需要这样，用 Button 自身的阴影效果就可以了，它的阴影会根据 Button 在页面中的位置的不同阴影还不同。
在使用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：
阅读有关颜色心理学的知识，以使您的颜色与您的应用目的保持一致。 使用A / B测试帮助您检查颜色选择是否正确。 选择不常见的颜色（例如紫色或青绿色的阴影）时要小心：它将区分您的应用，无论是好是坏。...建议为Apple Store创建正方形图标，因为该图标将始终按照蒙版形状显示轮廓。因此，在Apple Store中，只有少数图标具有圆形或不规则形式。...谷歌物料设计模板 Android为Play商店图标提供了不同的形状。他们的所有准则都包含在“ Material Design”文档中。 ?...您可以自由探索自己喜欢的任何自定义形状，有时将图标中的元素直接使用会很好。甚至谷歌也这么做了。 ?...对于复杂的表单和图形，也会发生相同的可伸缩性问题，这就是大多数图标设计简单的原因。 如果这些表单与特定的徽标或公司图片没有关联，至少它们应该与应用的功能相关。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
