首页
学习
活动
专区
工具
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控件的字体、颜色、大小和对齐方式等属性。

66311

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.4K30

2022 年的 CSS 全览

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

4.2K20

【译】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

23620

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

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

30220

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

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

7.5K60

前端学习

模板     视图和模板   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.4K20

Xcelsius(水晶易表)系列7——多选择器交互用法

关于选择器的用法,之前的几篇零零碎碎的讲了些,今天是专门讲解水晶易表中几种重要的选择器用法——标签式菜单(在案例1中曾经讲过,不过具体用法不同,那里是匹配的原数据,按行插入,这里仅仅作为按钮选择工具,按插入目标...通过offset+match函数嵌套在源数据表中匹配对应指标的12个月份。 最后完成数据模型构建,就可以导入水晶易表链接数据,创建可视化动态交互仪表盘。...此时你可以随意更改U3(1~3之内)、U7(1~3之内)、U11(1~31之内)单元格(在范围内更改),看我们所设置的所有带函数的单元格是否成功变动(C5:C7、C3:R3)。...如果正常变动,则动态数据源设置成功,导入进水晶易表开始搭建动态仪表盘工作。 水晶仪表盘搭建: 进入水晶易表,分别插入标签式菜单、组合框、单选按钮。(部件选择器中插入)。 ?...至此,动态仪表盘全部配置完毕,可以通过预览功能查看动态交互性能是否完好,没有问题之后,可以通过水晶易表的主题、颜色以及统计图属性菜单中的外观项目精修字体、配色和背景,也可以在部件中插入专门的背景色块做衬托

2.6K60
领券