首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关于无障碍设计的七件事

如果你选择使用浏览器的默认焦点,那么请用“更好”的视觉提示替换掉浏览器所提供的。 下面的?来自BBC。它使用颜色条来提示哪个链接处于焦点状态。 ?...当占位文本随着输入焦点消失后,没有标签的话,用户还能知道输入什么内容吗?是邮箱还是手机号(左边的例子)?是我喜欢的食物还是餐厅(右上角的例子)?价格的最大/最小吗(右下角的例子)? ?...菜单也有可能出现这样的问题。在下面维珍航空的例子中,虽然视觉上非常相似,但是右边的是菜单,左边的是非模态对话框。 ? 菜单是一个为用户提供选择列表的小组件。...一旦变成在菜单的每行提供多个选项,如上图左边的例子所示,这就不是菜单了。 键盘交互模型使用箭头键更改使用Tab键。 它会更改键盘焦点的处理方式以及下拉菜单关闭后的位置。...设计师需要了解细微的设计更改如何导致用户交互模型更改。 这将使帮助你为你的产品选择合适的模式。 7. 不要让用户犹豫不决地找东西 这主要是为有运动障碍的人提供服务。

3K30

JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

数据设置频繁更改的大型Web应用程序 动态SPA AngularJS: 框架领域的冠军 Angular.js是一个开源的Web应用程序框架,具有由Google提供的Model-View-Controller...Angularjs的优缺点 优点: 创建自定义的文档对象模型(DOM)元素。 简单的UI设计和更改。 在HTML文档中创建输入字段时,将为每个已渲染字段创建单独的数据绑定。...它对DOM一无所知,而是依赖于直接的文本操作,动态地构建HTML文档。 使用观察者来改变,这将导致仅渲染更改。 通过使用附件避免“脏检查”。 更快的启动时间和固有的稳定性。 性能焦点。...比较Angularjs Vs Reactjs Vs Emberjs功能 特性 AngularJS ReactJS Ember.js 动态UI绑定 允许在纯对象或甚至属性级别使用UI绑定。...使用Handlebars默认模板引擎。你必须在模型使用特定的setter方法来更新绑定到UI的,在Handlebars渲染页面的时候。

12.7K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    10分钟内就可以学会的几个CSS高招

    CSS 中与布局和位置相关的所有内容都受框模型的影响,如果你打开 chrome 开发工具,你可以看到如何在页面上的任何元素计算框模型。 ?...7、 变量的变量 注意我们如何在多个地方使用相同的颜色,如果我们决定更改颜色,我们需要修改引用它的每一行代码,更好的方法是在根选择器上定义一个全局变量。 ?...你还可以将它们组合成更复杂的,例如我们可以根据其他三个变量的定义我们的 RGB 颜色,这种灵活性将通过允许你快速更换网站的不同主题来真正改变。 ?...现在你永远不必担心在你的 HTML 中给东西编号,在构建一个复杂的下拉菜单时,你可能会假设一些 JavaScript 涉及到管理菜单的打开和关闭状态,但是你可能会惊讶于仅使用简单的 CSS 就能做到多远...现在,你很可能熟悉,当你进入表单输入或单击按钮时应用于元素的焦点伪类。 ? 问题在于构建下拉菜单时,你可能会使用焦点打开菜单,但是当你单击该菜单内的某些内容时,它会失去焦点并关闭。

    1.4K20

    Vs Code 2020年6月(1.47版)

    适用于macOS的Java Pack安装程序 -设置为在macOS上使用VS Code在Java中进行开发。 ? 右键一个文件的菜单 ?...之前 选择并保持焦点在列表视图中 有一个新命令,list.selectAndPreserveFocus它使您可以从列表中选择一个项目,同时将焦点放在该列表中。...focusResults-是否将焦点放在搜索结果或查询输入中。默认为true。 例如,以下键绑定在打开“搜索”编辑器时运行搜索,但是将焦点放在搜索查询控件中。...若要返回到旧的行为,请将设置回0。 ?...查看和排序 我们增加了对使用列表视图选项时按名称,路径(默认)和状态对源控件视图中的更改进行排序的支持。我们将视图选项(列表或树)和排序选项合并到上下文菜单中的新“ 视图和排序”菜单项中。 ?

    4.5K30

    【愚公系列】2023年11月 Winform控件专题 Label控件详解

    展示如何在Label控件中使用AutoEllipsis属性:label1.Text = "这是一段很长很长的文本,它将会超出Label控件的显示区域,使用AutoEllipsis可以自动添加省略号。"...如果您需要更精确地控制控件的位置,请使用Anchor属性或Dock属性。1.5 backcolorbackcolor属性用于设置控件的背景色。可以设置为预定义的颜色或自定义的颜色。...在该事件中,判断文本框中是否为空,如果为空则弹出提示框并阻止焦点离开控件。这样,用户就必须输入有效的才能离开文本框。...以下是一个具体的案例,用于说明如何在Winform中使用Label控件:在Visual Studio中创建一个新的Winform项目。在Form中添加一个Label控件。...右键单击Label控件,选择“属性”窗口,在“Text”属性中输入要显示的文本,比如“Hello World”。可以进一步设置Label控件的字体、颜色、大小和对齐方式等属性。

    80511

    Angularjs基础(十)

    HTML 元素在失去焦点时须执行的表达式。           ...语法:           参数值::expression 描述:失去焦点时执行的表达式。...ng-change 事件在的每次改变时触发,它不需要等等一个完成的修改过程或等待失去焦点的动作         ng-change 事件只针对输入框的真实修改,而不是通过JavaScript 来修改...ng-checked 规定元素是否被选中         实例:选择一个或选择所有选项:                        My:...ng-class 指令的可以是字符串,对象,或一个数组。             如果是字符串,多个类名使用空格分隔。

    3.3K50

    借助 Material You 动态配色丰富您的应用

    Android 12 可以通过动态配色提取算法来选择颜色,基于动态配色,您可根据用户的桌面壁纸颜色生成自定义调色板。动态的浅、深色方案可体现在整个用户系统界面,以及某些应用中。...接下来,它会为从调色板中选择颜色分配一组特定的角色和,并将这些角色和映射到我们称之为 "方案" 的组件上。...△ 新增的 Container 及 Tertiary 颜色色槽 Token 使用动态配色,意味着我们需要使用会在运行时改变的构建界面,这就需要我们根据语义,而非硬编码的来引用颜色。...那么如何使这一切成为可能呢?方法是使用 Token。Token 在 Material Design 2 颜色角色的基础上,提供了全局的样式色槽,它能够帮您更改颜色级联一致的角色分配。...如果您有现成的应用,您可以使用 Material 2 中的颜色配置 Primary 和 Secondary 颜色。随后,您可以点击右上角的导出代码菜单,然后在下拉列表中选择 "Compose"。

    2.5K30

    2022 年的 CSS 全览

    渐变的颜色空间会显著改变插结果。 颜色功能可帮助你混合和对比,并选择在哪个空间进行工作。...在渐变颜色空间之后,告诉浏览器使用哪个颜色空间进行颜色。这使开发人员和设计人员能够选择他们喜欢的渐变。默认色彩空间也更改为 LCH 而不是 sRGB。...这种引导式焦点策略被称为焦点捕获,因为开发人员会将焦点置于交互空间中,监听焦点更改事件,如果焦点离开交互空间,则强制返回。使用键盘或屏幕阅读器的用户会被引导回到互动空间,以确保在继续完成之前的任务。...:has()选择器开始成为一个神奇的实用工具,因为实际用例变得更加明显。例如,当前无法在包装图像时选择标签,因此很难确定锚定标记在该用例中如何更改其样式。...按下alt/opt键时,JavaScript设置鼠标x和y,然后将焦点大小更改为较小的,例如25%,在鼠标位置创建聚光灯焦点圆: .focus-effect { --focal-size: 100%

    4.2K20

    Pico Neo 3教程☀️ 三、SDK 的进阶功能

    Camera Y Offset: 是当选择Device的时候会在Camera的Y方向增加的偏移量。当选择Floor或者Tracking Reference的时候此offset无效。...注视点渲染 1️⃣ 如何设置注视点渲染 注视点渲染(Foveation Rendering)可以优化VR场景的渲染,该技术通过为视野中心提供全分辨率(无损),降低周边视野(人眼焦点区域之外)分辨率的方式来达到优化渲染的目的...动态注视点渲染(DFR)是指视野焦点会随着视线移动,除了开启和配置“Foveated Rendering”选项,还需配合 Neo3 Pro系列(支持EyeTracking的设备)实现。...它不会重新编译没有更改的文件,因此与Unity的编译相比,将编译和部署时间减少了10%到50%,而最终的.apk文件和Unity编译生成的完全一样。...要使用此功能,请按照以下步骤进行: 打开Build Settings,选中你想要打包的场景。 点击菜单栏中的PXR_SDK->Build Tool->Build And Run。

    13810

    【译】W3C WAI-ARIA最佳实践 -- 表单

    三态复选框示例: 演示如何使用 mixed 的 aria-checked 制作一个组件。...+ Space: - (可选):当焦点在一个menuitemcheckbox时,更改状态而不关闭菜单。...示例 单选按钮组示例使用动态tabindex 单选按钮组示例使用aria-activedescendant管理焦点 键盘交互 在单选按钮组获取焦点时: 如果有一个单选按钮被选中,那么焦点设置在这个按钮上...滑块 滑块是供用户从给定范围内选择的输入控件。滑块通常有个拖动拇指,可以沿着条或轨道移动来改变滑块的。 示例 水平滑块示例: 演示使用三个水平对齐的滑块来制作颜色选择器。...任何其他字符输入不会更改文本字段的内容和按钮的。 NOTE 操作过程中焦点仍在文本字段上。 适用于设备平台的标准单行文本编辑键: 包括输入键,光标移动,选择和文本操作。

    8.2K30

    【Hybrid开发高级系列】AngularJS(三)——开发实践

    用下面这行命令进入Yeoman的菜单: $ yo         用键盘的上下键来操作菜单,当选项’install agenerator’被高亮的时候按下回车键。...的菜单中操作已经安装好的生成器: $ yo         等一下!...generator-angular会询问你需不需要使用Sass和/或者Bootstrap,使用’n'和’y'进行选择。         然后你需要选择你需要使用的Angular模块。...你可以使用空格键来取消项目。下面来看一看默认。(当你在试用空格的效果时,确保所有的模块都被标记为绿色)         好的,现在按下回车键。...angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view不刷新 http://www.oschina.net/question/2356458

    24520

    >>开发工具:IntelliJ IDEA 2020.3基础技能

    要将当前布局保存为默认布局,请从主菜单选择“窗口” |“布局” 。将当前布局存储为默认。您可以使用相同的快捷方式 ⇧ F12来还原保存的布局。 跳至上一个活动窗口 按 F12。...更改IDE外观 1、按⌃` 。 2、在“切换”菜单中,选择所需的选项,然后按⏎。使用相同的快捷方式⌃` 撤消更改。 您也可以在编辑器|查找和调整颜色方案设置,包括针对视力障碍者的高对比度颜色方案。...从红色标记的错误到蓝色标记的TODO注释,不同颜色的条纹表示问题的严重性,但是您可以根据需要更改显示的颜色。 编辑器标签 您可以关闭,隐藏和分离编辑器选项卡。...从主菜单中,选择“窗口” |“窗口”。编辑器选项卡,查看您可以使用编辑器选项卡执行哪些其他操作。例如,向左关闭标签或向右关闭标签。您可以将选项卡的上下文菜单用于相同的目的。...在编辑器中更改字体大小 在“设置/首选项”对话框中⌘,转到“编辑器” | “首选项”。常规(“鼠标控制”部分)。选择使用Ctrl +鼠标滚轮更改字体大小选项。

    32720

    如何在 ASP.NET MVC 中集成 AngularJS(1)

    选择最新的软件技术时,有几个因素在起作用,其中包括如何将这些技术整合起来。过去两年中,我最喜欢的一项技术就是设计单页面应用(SPA)的 AngularJS。...根据功能模型的需求,动态的加载 AngularJS 的控制器和服务 本文的示例应用程序将包含三个主要文件夹:关于联系和索引的主文件夹、允许你创建,更新和查询客户的客户文件夹、允许你创建,更新和查询产品的产品文件夹...使用 RequireJS 来实现 MVC 捆绑的动态加载 在开发 AngularJS 单页的应用程序时,其中有一件事情是不确定的。...之后,我选择了 MVC 工程并在应用中会用到 MVC Web API 添加文件夹和引用。下一步是选择工具菜单中的“管理 NuGet 包的解决方案”,来下载并安装 NuGet AngularJS。...你不再需要使用 AngularJS 双向数据绑定技术来解析浏览器的文件对象模型,这也就使得你能够编写单元测试的 JavaScript 代码。

    7.6K60

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    方法来 动态地 为元素添加 focus 事件的处理函数 ; // 使用 addEventListener document.getElementById("myInput").addEventListener...: 使用 addEventListener 方法来 动态地 为元素添加 onblur 事件的处理函数 ; // 使用 addEventListener document.getElementById(...使用 标签选择器 获取元素 var text = document.querySelector('input'); // 2....); // 输出当前页面背景颜色 如果没有为 document.body.style.backgroundColor 显式设置 , 则它将 返回空字符串或浏览器默认的背景颜色 ; 通过直接设置 style.backgroundColor..., 可以 实时更改页面的背景颜色 , 这种方式 比修改 CSS 文件更为便捷 , 尤其适用于动态交互或响应用户事件的情况 ; 3、代码示例 代码示例 : <!

    9910

    前端学习

    模板     视图和模板   2 迭代器过滤     控制器   3 双向绑定   输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)。    ...AngularJS应用的解析   AngularJS应用程序的三个组成部分,及它们如何映射到模型-视图-控制器设计模式: 模板(Templates)   模板是您用HTML和CSS编写的文件,展现应用的视图...模型数据(Data)   模型是从AngularJS作用域对象的属性引申的。...模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。   AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。...angular与react之对比   如果应用时常要处理大量的动态数据集,并以相对简便和高性能的方式对大型数据表进行显示和变更,React是相当不错的选择

    2.3K10

    Guake 3.7.0下拉式终端发布,可根据每选项卡更改终端颜色

    Quake终端能通过使用分配的键(默认为F12)从屏幕上下滑动变化。...执行所需的命令或快速查看一些长时间运行的命令的输出,然后再次按该键(或将Guake设置为失去焦点时自动隐藏)以隐藏终端,因此您可以以最小的干扰返回到以前的工作。...在终端标签中运行guake --bgcolor=color(其中color是十六进制颜色,例如#rrggbb)以更改终端的背景色,或运行guake --fgcolor=color设置终端的前景色。...可以通过右键单击“终端”选项卡并选择“重置自定义颜色”来重置颜色(暂时没有上下文菜单可以更改颜色)。...D-Bus界面以及CLI取消全屏显示 许多错误修复 安装Guake3.7.0 上面链接的Guake安装说明提到了如何从Linux发行版的存储库中安装它,如何从PyPi

    1.8K20

    Qt Designer中的QWidget属性表介绍

    此属性的控制对应窗口可见时阻塞哪些类型的窗口获取输入。 在模式窗口可见时更改此属性无效,必须先调用hide()隐藏模式窗口,然后再调用show()显示模式窗口。...通过setFocusPolicy(Qt.FocusPolicy policy)设置焦点策略 ⑦contextMenuPolicy contextMenuPolicy为部件的快捷菜单策略,快捷菜单通过在部件上点击鼠标右键触发...---- 输入法使用它来检索有关输入法应如何操作的提示; 例如,如果设置了只允许输入数字的标志,则输入法可能会更改其可视组件,以反映只能输入数字。...请注意,该颜色可用于除文字以外的其他用途:一般文本颜色通常用于文本,但对于行,图标等使用文本颜色校色是很罕见的 ColorGroup颜色颜色组是指对应同一外观组合在 激活状态(active,指获得焦点...---- 上图中只有active 激活状态的,其他两种状态颜色是电脑根据规则计算出来的,如果要查看或者设置颜色组的三种状态,在上图中选择“show details”(显示细节)即可,如下图 image.png

    10.8K20
    领券