首页
学习
活动
专区
工具
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.3K30

皮肤引擎(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” 属性的元素会被当作菜单项对待.

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

    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、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,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.8K20

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

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

    3.6K40

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

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

    9.9K20

    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.7K63

    Selenium面试题

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

    5.7K30

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

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

    33.8K21

    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

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

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

    3.3K20

    Selenium处理下拉列表

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

    6.1K20

    【愚公系列】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中。

    64911

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

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

    28320

    Material Design — 菜单(Menus)

    单个菜单项状态 某些app状态可能会导致只有一个菜单项的情景菜单。 例如,当使网页上的文本高亮时,Android仅显示“复制”菜单项,因为用户无法“剪切”或“粘贴”文本。 ?...具有动态内容的菜单可能具有其他行为,例如:将先前使用的字体放在菜单的顶部;订单可以根据用户操作进行更改。 菜单嵌套 菜单项可以显示嵌套的子菜单。...将菜单放置在触发菜单元素的下方会将其与上下文环境分开(如下图)。 ? 关闭菜单 可以通过点击菜单外部或点击触发菜单的元素(如果可见)来关闭菜单。 选择一个菜单项后也应该关闭菜单。...例外情况是,菜单允许选择多个项目,例如使用复选标记。 ---- 简单菜单(Simple Menus) 移动端或pc 使用列表中的简单菜单显示特定列表项的选项。...向上展开的简单菜单 ·不要在简单菜单弹出的第一个选项上放列表中的非已选项(如下图)。 ? ·但在靠近屏幕边缘时,简单菜单会重新定位其垂直对齐方式,以便所有菜单项都完全可见。 ?

    5.8K100
    领券