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

仅使用键盘导航(不是在单击元素之后)围绕元素的边框进行聚焦

键盘导航是指使用键盘上的特定按键来在网页或应用程序中移动焦点,而不是使用鼠标或触摸屏。通过键盘导航,用户可以在页面上选择和操作不同的元素,包括文本框、按钮、链接等。

键盘导航对于一些用户来说非常重要,特别是那些无法使用鼠标或触摸屏的人群,如视觉障碍者或手部受伤者。同时,键盘导航也可以提高用户的操作效率,使得他们可以更快地浏览和操作页面。

在网页中,通过键盘导航可以使用以下按键来移动焦点:

  1. Tab键:按下Tab键可以在页面上向前移动焦点,按下Shift + Tab键可以向后移动焦点。这是最常用的键盘导航方式。
  2. 箭头键:在某些情况下,可以使用箭头键来在页面上移动焦点,包括上下左右四个方向。
  3. Enter键:按下Enter键可以激活当前具有焦点的元素,如按钮或链接。
  4. 空格键:在某些情况下,可以使用空格键来激活当前具有焦点的元素,类似于Enter键的功能。

在实际应用中,为了提供更好的键盘导航体验,开发人员可以采取以下措施:

  1. 使用有意义的tab顺序:确保通过Tab键移动焦点的顺序是有意义的,按照页面的逻辑顺序进行排列。
  2. 提供可见的焦点状态:当元素获得焦点时,通过改变元素的外观或添加边框等方式来提供可见的焦点状态,以帮助用户确定当前焦点位置。
  3. 提供键盘快捷键:除了Tab键之外,还可以为常用操作提供额外的键盘快捷键,以提高用户的操作效率。
  4. 提供键盘导航说明:在页面上提供键盘导航的说明,告知用户如何使用键盘进行导航和操作。

总结起来,键盘导航是一种重要的辅助功能,可以帮助用户通过键盘在网页或应用程序中移动焦点和操作元素。开发人员应该关注键盘导航的实现,以提供更好的用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

地图导航使用以下键盘快捷键地图视图中导航。 不限活动工具类型 与活动工具无关地图导航键盘快捷键 键盘快捷键 操作 注释 Insert 缩放至全图范围。 减号 (-) 缩小。...左键拖动 - 平移 单击左键 - 弹出 滚动滚轮 - 缩放 单击并拖动滚轮 - 倾斜和旋转( 3D 中) 右键拖动 - 持续缩放 使用其他工具进行居中并放大或居中操作时,请分别按下 C+Shift...按住 V 键同时单击并拖动,以围绕单击枢轴点旋转。V + 方向键围绕视图中心旋转。按 V 并按上箭头键、下箭头键、左箭头键或右箭头键来围绕视图中心旋转。B + 拖动 3D 场景中环视。...激活选择工具时 用于选择工具键盘快捷键 键盘快捷键 操作 Y “相交”和“位于”选择模式之间切换。 R 指定按圆选择时半径。 模型构建器 可使用以下键盘快捷键模型构建器中导航。...该操作适用于单个字段。要一次隐藏表格中多个字段列,请按住 Shift 键并单击以选择多个字段。然后,右键单击字段名称,并单击隐藏字段。

62620

canvas进阶——实现Undo和Redo

❝「tabindex」 全局属性 指示其元素是否可以聚焦,以及它是否/何处参与顺序键盘导航(通常使用Tab键,因此得名)。...❞ tabindex 可以设置 正数 和负数 tabindex=负值 (通常是tabindex=“-1”),表示元素是「可聚焦」,但是「不能通过键盘导航来访问到该元素」,用JS做页面小组件内部键盘导航时候非常有用...( 「可聚焦, 但是不能输入键盘」) tabindex=0,表示元素是「可聚焦」,并且可以「通过键盘导航聚焦到该元素」,它相对顺序是当前处于DOM结构来决定。...tabindex=正值,「表示元素是可聚焦,并且可以通过键盘导航来访问到该元素」;它相对顺序按照「tabindex」 数值递增而滞后获焦。...绑定事件 监听完成了之后,我开始对键盘事件进行处理, 首先无论是Mac 还是windows 一般用户习惯就是 按 「ctrl」 或者 「command」, 加 「z」 和 「y」 之后进行回退, OK

77540

CSS 下拉菜单与 focus

导航栏之所以不直接显示而是放进下拉菜单,也是为了移动端等小尺寸设备中显示得优雅一点,因此这个单击判定其实是优势。...而 标签在这里只是作为一个按钮使用,并不想被点击后有任何跳转,所以不会给它带上 href 属性,自然也就不可聚焦。...先说决定如何被聚焦,这里分为负值(一般是 -1)与非负值,若为负值则该元素 不可以被键盘 Tab 聚焦、但可以被 JavaScript 或者鼠标单击聚焦,一般希望被 JavaScript 接管设为此值...再说决定聚焦顺序,非负值也分为两部分,0 与正值,若为 0 则该元素可以被键盘 Tab 聚焦或 JavaScript、点击聚焦且按照默认顺序聚焦;若为正值则按照数值从小到大顺序聚焦且 优先于所有 tabindex...因此,「Cards」主题在 iOS Safari 上会发生点击下拉菜单可以展开、但是点击空白地方无法收回问题,除非之后点击是链接之类

5.4K20

【译】W3C WAI-ARIA最佳实践 -- 布局

支持这个需求方法 Editing and Navigating Inside a Cell部分进行描述。 布局栅格键盘互动 以下键通过在网格单元格之间移动焦点来提供网格导航。...2、启用网格导航键,用来与单元格内元素进行交互。 是否聚焦单元格或其包含元素 对于辅助技术用户,导航网格时体验质量很大程度上取决于单元格包含内容以及设置键盘焦点位置。...交互模式中使用光标键交互组件,例如单选按钮或滑块。 以下为禁用和恢复网格导航功能惯用键盘操作。...如果必须使用,只能包含一个这样控件且让其作为最后一个元素。 当且当组合中包含三个或三个以上控件时,才能使用工具栏作为分组元素键盘交互 当工具栏获取焦点时,焦点被设置第一个可用控件上。...般来说,使用键盘进行导航时,不可用元素不可聚焦。但是,某些需要发现功能场景中,如果不可用元素聚焦,可以帮助屏幕阅读器用户发现这些功能存在。

6.1K50

Katalon Studio元素抓取功能Spy Web介绍

通过Spy Web功能添加对象 新建测试用例以后,按照如下步骤进行操作(该部分使用Chrome浏览器): - 点击Spy Web - 输入需要打开网址 - 选择驱动Chrome浏览器 - 点击Start...一个覆盖面板也将在屏幕边缘显示,以显示元素相关XPath信息。 ? 按键盘键组合以捕获对象。该对象将以绿色边框突出显示。 ? Highlight验证是否能够定位到元素 ?...点击Save,左侧选择需要保存元素,右侧选择需要存储路径点击OK进行保存。可以通过鼠标右键修改文件夹和元素名称; ?...1.活动浏览器中打开Spy Web,右键单击目标Web元素。选择检查: ? 元素检查器窗口将显示右侧,带有突出显示行,指示HTML DOM中目标元素位置。...右键单击高亮显示行>选择“ 复制” >“选择复制XPath”或“ 复制选择器” ? 导航回Object Spy窗口并粘贴到Xpath Selector Editor中; ?

2.1K10

VS Code(​终端)

注意:如果您想在VS Code之外工作,仍可以使用Ctrl + Shift + C键盘快捷键打开外壳。 管理多个终端 您可以创建多个打开到不同位置终端,并在它们之间轻松导航。...可以通过单击TERMINAL面板右上角加号图标或触发Ctrl + Shift +`命令来添加终端实例。此操作将在下拉列表中创建另一个条目,可用于它们之间进行切换。...提示:如果您使用多个终端广泛应用,你可以添加键绑定focusNext,focusPrevious并且kill列出命令键绑定部分使用键盘,让他们之间导航。...这类似于切换,但是如果可见,则将终端聚焦不是隐藏终端。 workbench.action.terminal.focusNext:聚焦下一个终端实例。...默认情况下,集成终端将使用多个元素进行渲染,这些元素比DOM更好地进行了调整,以渲染经常更改交互式文本。

3.4K20

CSS(三)

Inline boxes 不会影响垂直间距,它们不是用于确定布局,只是用于构建块内样式 Inline boxes 宽度基于其所容纳内容,而与父容器宽度无关 改变 Box 行为 我们可以使用...填充总是如此,因为它在边框内部,边框所有内容都有背景。 速记格式 两值速记 四值速记 注意: 是否想要使用速记表格主要取决于个人偏好和团队惯例。...Border Border 就是围绕内容和填充绘制线,注意边框如何在填充旁边碰撞,两者之间没有空隙。...您选择其中一个最常见原因是: 填充具有背景,而边距始终是透明 填充包含在元素单击区域中,而边距则不包括在内 边距会发生垂直折叠,而填充则不会 块级元素和内联元素之间最明显对比之一是它们对边距处理...但是,它不会影响周围盒子垂直布局。 垂直边距折叠 盒子模型另一个怪癖是”垂直边距折叠”。当你有两个垂直边距彼此相邻盒子时,它们会折叠。不是将边距加到一起,而是显示最大边距。

1.9K20

前端如何提高用户体验:增强可点击区域大小

举个例子,WCAG准则2.3.2中规定:网页不包含任何闪光超过3次/秒内容。 用户应该能够使用台式机/笔记本电脑上键盘以及移动设备或平板电脑上触摸屏来操作输入。...当使用HTML 元素时,会获得下面效果: 可通过鼠标,键盘或触摸访问 可以通过键盘选中 有对应 JavaScript 方法 有些元素,我们需要添加 padding,原因有二: 让它更美观...链接 之前在做导航时候,犯了一个错误,应该是给 a 标签添加 padding 而不是 li: Home...真实案例 最近Twitter更新中,导航设计可点击区域大小方面存在问题。 最初,它与文本相关,如下面的屏幕截图所示,但他们收到反馈后将其修复。 ?...使用元素来增加可点击区域 通过改变元素宽度和高度或使用padding,并不总是能够使可点击区域变大,这时候就需要伪元素救场了。

4.7K20

Web 用户体验设计提升实践

2.1 Web 端交互方式 Web 端交互围绕计算机为中心,主要涉及键盘、鼠标两类设备交互。...浏览器通常会使用元素 :focus 伪类,给元素添加一层边框,告诉用户当前获焦元素在哪里。 我们可以通过键盘 Tab 键,进行焦点切换。...使用非可获焦元素模拟获焦元素时候,一定要注意,不仅仅只是外观长得像就完事了,其行为表现也需要符合原本 button、select 等可聚焦元素性质,能够体现元素语义,能够被聚焦,能够通过 Tab...简单来说,WAI-ARIA 提供了一些属性,用于增强标签语义及行为: 可以使用 tabindex 属性控制元素是否可以聚焦,以及它是否/何处参与顺序键盘导航 可以使用 role 属性,来标识元素语义及作用...3.5 分析使用非可聚焦元素模拟按钮 这里随便选取了我们业务中一个使用 span 模拟按钮场景,是一个面包屑导航,点击可进行跳转: [ ] HTML 代码: <span class="ssc-breadcrumb-item-link

1.1K20

关于 Adobe Photoshop启动“选择并遮住”工作区

使用“调整边缘画笔”等工具可清晰地分离前景和背景元素,并进行更多操作。 调整边缘画笔工具:精确调整边缘调整边界区域。例如,轻刷柔化区域(例如头发或毛皮)以向选区中加入精妙细节。...您所做选择不需要很精确,因为快速选择工具会自动且直观地创建边框。 为了获得更加轻松操作体验,使用“快速选择工具”时,请单击选项栏中“选择主体”,只需单击一次即可自动选择图像中最突出主体。...使用“画笔工具”可按照以下两种简便方式微调选区:添加模式下,绘制您想要选择区域;或者,减去模式下,绘制您不想选择区域。 对象选择工具:围绕对象绘制矩形区域或套索。...对象选择工具会在定义区域内查找并自动选择对象。 套索工具:手绘选区边框使用此工具,您可以创建精确选区。 多边形套索工具:绘制选区边框直边段。使用此工具,您可以绘制直线或自由选区。...右键单击套索工具时,您可以从选项中选择此工具。 抓手工具:快速图像文档周围导航。选择此工具并拖动图像画布。您还可以使用任何其他工具时,按住空格键来快速切换抓手工具。 缩放工具:放大和浏览照片。

87320

前端优秀实践不完全指南

简单罗列一下: 注意界面元素一致性,降低用户学习成本 延续用户日常使用习惯,而不是重新创造 给下拉框增加一些预设值,降低用户填写成本 同类操作合并在一起,降低用户认知成本 任何操作之后都要给出反馈...浏览器通常会使用元素 :focus 伪类,给元素添加一层边框,告诉用户,当前获焦元素在哪里。...简单来说,它提供了一些属性,增强标签语义及行为: 可以使用 tabindex 属性控制元素是否可以聚焦,以及它是否/何处参与顺序键盘导航 可以使用 role 属性,来标识元素语义及作用,譬如使用...分析使用非可聚焦元素模拟按钮 这里,我随便选取了我们业务中一个使用 span 模拟按钮场景,是一个面包屑导航,点击可进行跳转,发现惨不忍睹: ?...上述操作全是键盘下完成,看着平平无奇,实际上组件库正常响应可获焦元素切换同时,给用 div 模拟 select 加了很多键盘事件响应,可以利用回车,上下键等对可选项进行选择。

95820

Chrome 102:新增两个 HTML 属性、两个 JS API !

例如,我们想开发一个模态框,你希望模态框可见时将焦点聚焦模态框内。或者,对于用户并不总是可见抽屉,添加 inert 可确保当抽屉不在屏幕上时,键盘用户不会意外与其进行交互。...你可能觉得属性用处不是特别大,不就是禁用了一些元素么?但是它实际上最大用途还是在于网页可访问性。...但是对于上面提到有视力障碍的人,他不是依靠视觉来感知网页内容,而是借助了一些其他辅助技术,这就有可能会和我们隐藏掉内容进行一些意外交互。...Navigation API 很多 Web 开发场景下,我们需要在没有网页中导航情况下去更新页面的 URL,特别是 SPA 应用里面,我们切换了导航之后,不希望刷新网页,只更新页面中内容。...File Handling API File Handling API 可以让已安装 PWA 向操作系统注册文件处理程序。注册后,用户就可以单击文件然后使用已安装 PWA 打开它了。

1.8K30

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

添加可隐藏字幕,或其他视觉元素来作为重要声音元素和声音警报替代方案。 通过 UI 元素上添加描述性标签,使用户可以通过声音应用中导航。...视觉反馈(如标签、颜色和图标)和触摸反馈向用户显示了可用 UI。 导航应该具有清晰任务流程,和最少步骤。频繁使用任务上,应该实现聚焦控制、或控制键盘和读取焦点功能。...用户也可以屏幕上向前或向后滑动来移动焦点,来从上到下线性地阅读页面。这允许用户某些元素进行训练。 TalkBack 中,这称为线性导航。...其他设计注意事项: 使用可缩放文字和一个宽敞布局,来适应那些可能开启大文字、颜色矫正、放大或其他无障碍功能用户 键盘/鼠标界面可以通过键盘就能访问所有任务和所有悬浮信息 触摸界面应允许屏幕阅读器和其他无障碍设备读取界面中所有内容...不要提及确切手势和交互 不要告诉用户如何与控件进行身体上交互,因为它们可能使用键盘或其他设备进行导航,而不是用手指或鼠标进行导航。无障碍软件会为用户描述正确交互方式。

4.7K40

Web 隐藏技术:几中隐藏 Web 中元素方法及优缺点

可访问性对opacity: 0影响 一个元素以opacity: 0仍然可以被屏幕阅读器访问,并且可以用键盘进行聚焦。 大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】。...可访问性对position: absolute | fixed影响 屏幕阅读器可访问该元素,并且键盘聚焦。 它只是从视口中隐藏起来。...使用opacity: 0不会隐藏可访问性树导航。即使导航视觉上是隐藏,它仍然可以通过键盘聚焦,并且可以被屏幕阅读器访问。必须将其隐藏以避免混淆用户。...我们需要解决两个问题: 1.菜单隐藏时避免用键盘聚焦 2.当导航隐藏时,避免通过屏幕阅读器告知导航 下面的屏幕截图显示了Mac OS上VoiceOver转子是如何看到页面的。...为此,应该使用position和其他属性。有一个常见CSS类,称为sr-only或visual -hidden,它只视觉上隐藏一个元素,并让键盘和屏幕阅读器用户可以访问它。

5K30

前端优秀实践不完全指南

简单罗列一下: 注意界面元素一致性,降低用户学习成本 延续用户日常使用习惯,而不是重新创造 给下拉框增加一些预设值,降低用户填写成本 同类操作合并在一起,降低用户认知成本 任何操作之后都要给出反馈...浏览器通常会使用元素 :focus 伪类,给元素添加一层边框,告诉用户,当前获焦元素在哪里。...简单来说,它提供了一些属性,增强标签语义及行为: 可以使用 tabindex 属性控制元素是否可以聚焦,以及它是否/何处参与顺序键盘导航 可以使用 role 属性,来标识元素语义及作用,譬如使用...分析使用非可聚焦元素模拟按钮 这里,我随便选取了我们业务中一个使用 span 模拟按钮场景,是一个面包屑导航,点击可进行跳转,发现惨不忍睹: ?...上述操作全是键盘下完成,看着平平无奇,实际上组件库正常响应可获焦元素切换同时,给用 div 模拟 select 加了很多键盘事件响应,可以利用回车,上下键等对可选项进行选择。

84520

一篇文章带你了解CSS Pseudo-classes(伪类 )

CSS伪类允许设置元素动态状态样式,例如悬停,活动状态和焦点状态,以及文档树中现有但不能通过使用其他选择器作为目标的元素,而无需添加任何选择器它们ID或类。 例如,针对第一个或最后一个子元素。...语法 /*选择器:伪类{ 属性:值 ; }*/ 二、最常用伪类 锚伪类 使用 锚 伪类链接可以以不同方式显示。 这些伪类使可以对未访问链接进行样式化,而对访问链接进行样式化。...一些锚点伪类是动态,是由于用户与文档进行交互(例如悬停或聚焦等)而应用。...这些伪类更改了响应用户操作呈现链接方式。 : hover 当可被用于在用户将鼠标悬停在按钮上时改变按钮颜色用。 : active 当元素被激活或单击时适用。...: focus 当元素具有键盘焦点时适用。 注:为了使这些伪类很好地工作,必须按正确顺序将它们定义 - :link, :visited, :hover, :active, :focuss。

2K10

对话框、模态框和弹出框看起来很相似,它们有何不同?

(注意:将焦点困在一个元素中不使该元素成为模态元素,但如果它是真正模态元素,则焦点无法移动到外部元素,因为外部元素不是聚焦)。...焦点陷阱应该是临时,直到它所适用元素关闭或取消 (如果它不是临时并且无法使用键盘退出,则它将不符合 WCAG 2.1.2 标准)。...如果使用 role="dialog" 元素不是模态,则其他内容不会被视为惰性内容。这使得模态对话框变得更具破坏性,因此当必须时才使用它们。通常我们都不希望中断或干扰用户流程。...WAI-ARIA 规定,当使用 role="dialog" 时,应至少包含一个可聚焦元素,并在对话框打开时将焦点移动到其中一个可聚焦元素上。...这就是为什么 popover 被提议不是作为一个 HTML 元素,而是作为一个属性,用于与最适合该模式 HTML 元素/角色进行使用

3.4K00

【译】W3C WAI-ARIA最佳实践 -- 控件

通常这种情况下使用 警告对话框。 如果对话框内容包含提供额外信息或是继续处理交互,则建议将焦点设置为最有可能使用元素上,例如 "OK" 或 "Continue" 按钮。...包含可聚焦元素悬停可以使用非模态对话框模式实现。 示例 issue 127. 记录着工具提示示例进展。 键盘交互 Escape: 关闭工具提示框。...闭节点 被折叠以使其子节点不可见父节点。 当使用键盘导航一个树结构,一个可见键盘指示器告诉用户哪个节点被聚焦。...tree 角色支持 aria-activedescendant 属性,它提供了另一种使用键盘导航 treeitem 元素间移动DOM焦点方式。...NOTE 如果 aria-owns 设置树容器上,以包含不是该容器DOM子元素元素,这些元素会按它们被引用顺序出现在读取序列中,并且在所有属于该容器DOM子元素之后

4.4K30

做了七年前端开发,我最近才意识到可访问性必要......

以下是我们开发任何前端时需要注意事项: HTML 语义 —— 正确使用 HTML 分区元素 标题 —— 用于显示文档结构,而非用于大字体设计 键盘导航使用“tabindex”和 ARIA ——...”和 ARIA 我们需要了解是,不是所有的用户都使用鼠标来浏览网页,有些只使用键盘导航,还有一些使用屏幕阅读器。...—— 对于屏幕阅读器) 4 可访问图标按钮 首先,设计中有按钮时,应使用元素,不要使用等其他元素,再将样式设置为按钮样子,我知道我们这样做已经很久了,但是时候改变了。...这真是个糟糕主意,焦点指示器能告诉使用键盘导航用户们他们当前正在交互位置,如果我们移除焦点样式,相当于将这些用户置于黑暗中,隐藏焦点指示器就像隐藏鼠标光标。...设置焦点指示器样式时,我们需要考虑以下几点: 对比区 与相邻颜色对比 不要遮盖焦点元素 在下面的示例中,黑色显示了焦点指示器启用状态 (使用键盘 tab 时样式): 设置焦点指示器样式不同方法

1.7K30
领券