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

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

复选框具有可访问标签,最好方式是使用 aria-labelledby 关联可见标签: 将可见内容放在角色为 checkbox 元素里面。...如果使用一个可见标签可将一组复选框标识为一个逻辑组,这些复选框应该被包含在一个具有 group 角色元素,且该元素 aria-labelledby 设置为包含标签元素ID。...如果行为适用于某些类型项目,例如menuitem 元素,则使用特定角色名称。 3. 子菜单,也称为弹出菜单,是具有 menu 角色元素。 4....,关闭其 menu 和所有打开级 menu 容器 + Shift + Tab: 将焦点移动到Tab序列上一个元素,并且如果获得焦点项目不在 menubar ,关闭其 menu 和所有打开级...使用element.focus()操作菜单按钮示例: 打开菜单上高亮选项卡按钮是通过HTML button 元素创建,而菜单焦点是通过element.focus() 进行管理

8.2K30

皮肤引擎(HTMLayout)特性说明文档

匹配元素里唯一 button 子元素. input:only-of-type 匹配元素里唯一使用了input标记元素. a:focus 匹配拥有焦点 a 元素. a:tab-focus 匹配通过按...TAB 件获得焦点 a 元素. option:current 匹配一组元素具有当前状态 option元素. input:checked 匹配被选定 input 元素....#. behavior: select; 下拉列表框行为.内部结构同 HTML 元素用法.列表条目元素元素具有 role=”option” 属性元素....behavior: select; 下拉列表框行为.内部结构同 HTML 元素用法.列表条目元素元素具有 role=”option” 属性元素....behavior: menu; 菜单行为.此行为定义了一个菜单元素.此元素包含 元素具有 role=”menu-item” 属性元素会被当作菜单项对待.

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

VCL 控件分类_验证控件分类

) ShowModal(),Show(); (是否当前窗体关闭后才能操作窗体:模态方式,非模态方式) Close(); (关闭窗体) (在Event 选项卡) OnCreate(); 创建窗体是发生事件...(加速键是在该菜单激活后才能使用,快捷键则可以直接使用) BitMap:为菜单项加图标 右键 Insert From Template:快速使用模版创建菜单项 Frames 可用于组合多个控件,动态生成多个控件集合...:还可显示图片;csOwnerDrawVariable:图片和字符串选项高度相同;csSimple:只能用户输入) Index:组合框中被选中序号 OnChange(); 在下拉列表添加或删除字符时会触发...:TabSheet返回类 PageIndex: sheet序号 TabIndex:返回可见序号 TabVisible:当前页是否可见 TToolBar 右键可选添加按钮,分隔符 Grouped...本站提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

4.3K10

AngularDart Material Design 选择 顶

对于可访问性,应该包含在具有role =“listbox”和aria-multiselectable元素,除非将role设置为“option”以外其他内容。...useCheckMarks bool 如果为true,则使用复选标记而不是复选框来指示是否为多选项目选择了该项目。 此特定样式用于多选菜单项材料菜单下拉列表。...buttonAriaLabelledBy String 在下拉按钮描述选择元素id。 例如,对于带有数字选项下拉列表,显示“每页结果”文本元素。...组件本身没有弹出窗口,但可用于构建未提供下拉列表。 对具有相同按钮样式组件使用material-dropdown-select,并实现下拉列表本身。...Outputs: blur Stream  下拉按钮失去焦点时触发事件。 focus Stream  元素聚焦时事件。

6K20

Bootstrap学习笔记上(带源码)

☑ 基于html5、css3bootstrap,具有大量诱人特性:友好学习曲线,卓越兼容性,响应式设计,12列格网,样式向导文档。...☑ 自定义JQuery插件,完整类库,基于Less等。 bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增标签,引入下面代码文件即可。....pre-scrollable { max-height: 340px; overflow-y: scroll; } 表格: 表格行类:元素添加上表对应类名,就能达到你自己需要效果...;/*让下拉菜单项菜单项底部,如果元素不设置相对定位,该元素相对于body元素*/ left: 0; z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/ display...>按钮下拉菜单项 解析 按钮向下三角形,我们是通过在标签添加一个“”标签元素,并且命名为“caret

3.7K20

一起来学matlab-matlab学习笔记9 高级绘图命令_1 图形对象_根对象,轴对象,用户控制对象,用户菜单对象

本文很多摘录自图书资料,不做任何商业用途,做技术分享,侵权删除!请不要放弃自己理想和道路,加油!!...低层指令调用没有高层指今那样简明清晰、通俗易懂,但是低层指令可以直接对图形基本要素进行操作特点决定了使用者可以让绘制图形更加个性化、更加具有表现力。...(4)控件(uicontrol):用于接口控制按钮、列表框、滑条等,可以联合使用构成控制面板和对话框。(5)菜单(uimenu):下拉菜单,当用户选择一个独立菜单项时执行回调程序。 通用函数 ?...当用户想把文字作为输人时,可使用该组件。若一可编辑文本框有焦点,则单击文本框菜单栏不会执行任何操作。...制作一个带4个子菜单项顶层菜单项,该下拉菜单分为两个功能区,每个功能区两个菜单项是相互独立,因此采用使能属性进行处理;当图形窗坐标轴消隐时,整个坐标分隔控制功能区不可见

3.5K40

C#学习笔记—— 常用控件说明及其属性、事件

另外当自动滚动打开时,窗体工作区自动滚动,以使具有输入焦点控件可见。 (18)BackColor属性:用来获取或设置窗体背景色。...数组每个元素表示以此窗体作为多文档界面(MDI)子窗体。 (27)MdiParent属性:用来获取或设置此窗体的当前多文档界面(MDI)窗体。...如果按钮具有焦点,就可以使用鼠标左键、Enter键或空格键触发该按钮Click事件。...完成向列表框添加项任务后,再调用 EndUpdate 方法使 ListBox 控件重新绘制。当向列表框添加大量列表项时,使用这种方法添加项可以防止在绘制 ListBox 时闪烁现象。...16、HScrollBar 控件和 VScrollBar控件使用 滚动条(ScrollBar)是大部分Windows应用程序中都具有的控件,是 Windows界面的 一种常见元素,通常分为水平滚动条

9.5K20

HTML5与HTML4区别,新增元素有哪些?

解决方案:使各浏览器功能符合通用标准。 文档结构不够明确:HTML4元素不能把文档结构表示清楚。 解决方案:增加与结构相关元素。...=‶UTF-8″》 可以省略元素标记 HTML5很多元素标记可以省略 具有boolean值属性调整 不指定属性值、属性名设定为属性值、字符串设为空时表示属性值为true; 不写该属性表示属性值为false...contentEditable属性 允许用户编辑元素内容,使用该属性元素必须为可以获得鼠标焦点元素,而且在点击鼠标后向用户提供一个插入符号,提示用户该元素允许进行编辑。...hidden属性 HTML5所有元素都允许使用hidden属性,该属性类似于input元素hidden元素,boolean值,可设为true(不可见)、false(可见)。...当某元素hidden属性值为true时,浏览器不渲染该元素使元素处于不可见状态,但浏览器创建该元素内容,即页面加载后允许使用JavaScript脚本将该属性值取消,使元素可见

1.3K30

HTML5与HTML4区别,新增元素有哪些?

解决方案:使各浏览器功能符合通用标准。 文档结构不够明确:HTML4元素不能把文档结构表示清楚。 解决方案:增加与结构相关元素。...=‶UTF-8″》 可以省略元素标记 HTML5很多元素标记可以省略 具有boolean值属性调整 不指定属性值、属性名设定为属性值、字符串设为空时表示属性值为true; 不写该属性表示属性值为false...contentEditable属性 允许用户编辑元素内容,使用该属性元素必须为可以获得鼠标焦点元素,而且在点击鼠标后向用户提供一个插入符号,提示用户该元素允许进行编辑。...hidden属性 HTML5所有元素都允许使用hidden属性,该属性类似于input元素hidden元素,boolean值,可设为true(不可见)、false(可见)。...当某元素hidden属性值为true时,浏览器不渲染该元素使元素处于不可见状态,但浏览器创建该元素内容,即页面加载后允许使用JavaScript脚本将该属性值取消,使元素可见

1.4K60

Web如何适配无障碍?

ARIA (Accessible Rich Internet Applications) 是一组属性,用于定义使残障人士更容易访问 Web 内容和 Web 应用程序(尤其是使用 JavaScript 开发应用程序...例如,ARIA 支持 HTML4 可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。...警告:  许多这些小部件后来被合并到 HTML5 ,如果存在这样元素,开发人员应该更喜欢使用正确语义 HTML 元素而不是使用 ARIA。例如,原生元素具有内置键盘可访问性、角色和状态。...但是,如果您选择使用 ARIA,则您有责任在脚本模仿(等效)浏览器行为。常见属性这里列举了2个最常用属性。...option表明这是个select下拉选项,读屏软件会错误理解该控件作用,部分安卓机会播报“单指双击即可执行”。

3.5K63

Selenium面试题

不可以,想点击的话,可以用js去掉dispalay=none属性 NO.8 selenium如何保证操作元素成功率? 保证操作元素成功率,也就是说如何保证我点击元素一定是可以点击?...先去找该元素不变属性,要是都变,那就找不变元素,用层级定位(以不变应万变) 属性动态变化也就是指该元素没有固定属性值,可以通过: JS实现, 通过相对位置来定位,比如xpath轴,paren...应该首先移动菜单标题,然后移至弹出菜单项并单击它。不要忘记在最后调用actions.perform() 。 NO.16 如何在定位元素后高亮元素(以调试为目的)?...什么时候应该在Selenium中使用XPath? XPath是一种在HTML / XML文档定位方法,可用于识别网页元素。...通常情况下,可以使用一些预先构建条件来等待元素变得可点击,可见,不可见等,或者只是编写适合需求条件。 NO.27 如何解决IESSL认证问题?

5.7K30

html下拉框设置默认值_html下拉列表框默认值

8.要在 HTML 标记符中直接嵌入样式,应使用标记符 ⑩ 属性。...必须定义度量范围,既可以在 text ,也可… 如何在 EXCEL 建立下拉列表 1、 在本工作簿空白列输入下拉菜单内容,然后选中后右键: 创建列表如下: 复制“=AC1:AC10” 2、 选中要建下拉菜单...…… 列表 定义表单中下拉菜单项目 设置下拉式菜单默认项目 设置下拉菜单项目的值 A 441 HTML 基础篇 HTML 进阶篇 CSS 基础篇 CSS 进阶篇 附录篇 续表 HTML …… 4-5...下拉列表元素 语法: 内容 HTML 网页设计(表单元素) 1....… 这里是固定第一行为表头) 窗口选项——选择拆分——再次选择冻结窗口——完成 如何设置单列下拉菜单: 无关联添加:使用有效性-序列,将要下拉内容输入框内,中间以…… 版权声明:本文内容由互联网用户自发贡献

33.7K21

Material Design — 底部动作条(Bottom Sheets)

它们出现在其他UI元素之上,必须被关闭才能与底层内容交互。当一个模态底部动作条滑到屏幕上时,屏幕其余部分就会变暗,把焦点集中在动作条上。 ?...左:包含列表    右:包含网格 用法 模态底部动作条可以: ·作为Menus或Simple Dialogs替代,展示列表或网格动作; ·当Menu没有明显入口时,显示快捷菜单; ·优先考虑所包含元素可见性...模态底部动作条可以显示长名称菜单项,带说明菜单项,带icon菜单项。 当显示菜单项时,完全扩展模态底部动作条与app 导航栏最底端要保持最小8dp距离。 ?...为了使底部动作条深层链接向上导航,通过溢出菜单提供一个明确链接来打开app。底部动作条动作可能会导致打开级app,比如使用“添加联系人”操作。...由于桌面空间约束更少,它可以支持多种方式来替换模态底部动作条。 ? 比如用Menu,点击后就在视觉焦点部分出现 大屏幕模态底部动作条可使用适当样式来增加额外空间。 ?

1.9K71

(翻译)LearnVSXNow! #13- VS IDE中的菜单和命令

在这一篇文章里,我们来看一下Visual Studio菜单和工具栏是如何被定义、创建、显示和使用。不过这篇文章我只是说一下一些基本知识,到下一篇文章我们再来看一些示例代码。...但是用户如果想用我们命令的话,我们必须提供某种方式给他们用才行。最常见方式是创建一个菜单项,用户可以点击菜单来使用这些命令。...菜单通常显示在IDE最顶部,并且会分组显示菜单项;IDE一些元素(例如tool window、document window、window frame)也会有它们上下文菜单,当用户在它们上面点击右键时候会显示出来...工具条通常是一堆控件集合,这些控件和菜单项功能是一样:都是为了执行命令。这些控件可以是按钮、下拉框、列表框、文本框或者分隔按钮。...Visual Studio里菜单项和命令处理 这一节我们来看一下VS是如何处理菜单和命令。 命令可见性 VS某些菜单和工具条会根据上下文不同显示或者隐藏。

1.1K30

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

欢迎 点赞✍评论⭐收藏前言Winform控件是Windows Forms用户界面元素,它们可以用于创建Windows应用程序各种视觉和交互组件,例如按钮、标签、文本框、下拉列表框、复选框、单选框、...对于MenuStrip控件事件处理,可以通过在设计器双击相应子控件来添加事件处理方法,或者在代码中使用事件处理程序来处理相应事件。...item3 = (ToolStripMenuItem)items[0];1.4 StretchMenuStrip控件Stretch属性决定菜单栏是否在容器拉伸。...然后,使用以下代码在MenuStrip动态添加菜单项,并处理菜单项点击事件:using System;using System.Windows.Forms;namespace WinFormsMenuExample...我们首先在窗体构造函数调用了InitializeMenu方法,该方法负责动态创建菜单项并添加到MenuStrip

29711

UI自动化 --- UI Automation 基础详解

例如,一个本身不包含任何信息,仅用于布局对话框控件面板。 控件视图中可见非交互项例如有包含信息图形和对话框静态文本。 控件视图中包含非交互项不能接收键盘焦点。...通过搜索具有 IsControlElement 属性设置为 true 元素,或使用 ControlViewWalker 浏览树,可以获得控件视图。...它包含传达用户界面真实信息UI项,包括可以接收键盘焦点UI项以及一些不是UI项上标签文本。例如,下拉组合框值将出现在内容视图中,因为它们代表终端用户正在使用信息。...通过搜索具有 IsContentElement 属性设置为 true 元素,或使用 ContentViewWalker 浏览树,可以获得内容视图。...当桌面上有新 UI 项变得可见、隐藏或删除时,结果便发生更改。 全局桌面更改 当与客户端相关全局操作发生时引发,例如当焦点从一个元素转换到另一个元素、或窗口关闭时。

91820

Selenium处理下拉列表

在本文中,演示如何使用Select来处理下拉菜单。 下拉菜单不同类型 通常会在网站上找到两种主要下拉菜单。...正常下拉菜单 自定义下拉菜单 正常下拉菜单是我们在Selenium处理访问表单时经常遇到下拉菜单。识别正常下拉菜单很容易,只需在浏览器打开element标签,然后查看该下拉HTML标签即可。...使用此选项非常安全,因为我们需要使用下拉显示下拉可见文本。...; $("#dropdown").selectByVisibleText("Option 2") 注意:使用selectByVisibleText()时,请保持可见文本不变,否则该元素将无法识别。...通常,在其他Selenium测试自动化框架,您将使用selectByValue()选项,该选项允许用户使用value属性选择下拉列表。

6K20

简单了解下无障碍设计模式

每添加一个按钮、图片或一行文本都会使界面变得更加复杂,可以通过以下方式简化你应用: 清晰可见元素 足够对比度和尺寸 明确重要性级别 使主要信息一目了然 健全 使应用能适应各种用户。...使 UI 元素标签可视化 屏幕阅读器用户需要知道屏幕哪些元素是可以点击。...标记聊天图标 帮助文档 任何具有特殊无障碍功能功能都应包含在帮助文档。确保帮助文档相关性、可访问性和可发现性。例如,查看本指南,了解如何在 Google Drive 中使用屏幕阅读器。...屏幕阅读器会大声朗读屏幕上所有的文本,包括可见和不可见替代文本。 无障碍文本包括可见文本(包括 UI 元素标签、按钮文字、链接和表单)和不可见描述(没有文本标签按钮替代文字)。...有时,可以使用无障碍文本覆盖屏幕标签,来为用户提供更多信息。 可见和不可见文本都应该是有用描述性词,并且都有独自含义,因为有些用户会使用页面标题和链接进行导航。

4.7K40

大胆尝试这些新CSS属性,释放CSS力量吧(一)

当子元素处于焦点状态时,可以使用 :focus-within 选择器来为元素设置样式,比如表单字段周围容器。...通常用于样式化或增强当前拥有焦点元素,例如,更改输入框边框颜色或文本区域背景颜色。 不会选择包含有焦点元素元素。...: lightgray; } 在上面的示例,当用户点击输入框时,输入框自身会具有蓝色边框(使用 :focus 选择器),同时包含有焦点输入框容器 .container 也会变为灰色背景(使用 :focus-within...总之,:focus-within 选择器用于选择包含有焦点元素祖先元素,而 :focus 选择器用于样式化具有焦点元素本身。这两个选择器可以一起使用,以创建更丰富交互体验。...下面是一个示例,演示了如何使用 accent-color 属性: a { accent-color: blue; } 在这个示例,accent-color 属性应用于所有链接元素 (),并将链接强调颜色设置为蓝色

19520
领券