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

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

如果焦点位于列中顶部单元格上,则焦点不会移动。 Page Down: 开发者设定行数移动焦点,一般滚动时,当前可见行集合中最后一行会变为第一次滚动后可见行中一行。...如果焦点位于网格第一个单元格上,则焦点不会移动。 Page Down (可选地): 开发者设定行数向上移动焦点,一般情况下,当前可见行中第一行会成为滚动后可见行中一行。...2、启用网格导航键,用来与单元格元素进行交互。 是否聚焦单元格或其包含元素 对于辅助技术用户,导航网格时体验质量很大程度上取决于单元格包含内容以及设置键盘焦点位置。...在单元格编辑和导航 当使用导航键在单元格间移动焦点,它们不能用来执行像操作组合框或在单元格移动光标的操作。用户可能需要用于网格导航键来操作单元格元素,如果单元格包含: 可编辑内容。...如果在用户界面中有一个元素是网格标签,在网格元素上设置 aria-labelledby 属性,该属性值指向该标签元素。否则,使用 aria-label为网格元素指定一个标签

6.1K50

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

目标资源可以是外部,也可以是本地,例如,当前页面、页面外、应用。 NOTE 作者们强烈建议使用原生语言链接元素,例如一个具有 href 属性HTML A 元素。...+ 对应于可打印字符任意键(可选):将焦点移动到当前菜单中标签可打印字符开头菜单项。...管理焦点脚本需要确保视觉焦点顺序与此辅助技术阅读顺序相匹配。 菜单按钮 菜单按钮是一个可以打开 menu button 。...滑块 滑块是供用户从给定范围选择值输入控件。滑块通常有个拖动拇指,可以沿着条或轨道移动来改变滑块值。 示例 水平滑块示例: 演示使用三个水平对齐滑块来制作颜色选择器。...在这种情况下,为元素添加 button 角色,可以帮助辅助技术用户理解元素功能。但是,更好解决方案是调整其视觉设计,匹配其功能和ARIA角色。

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

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

手风琴(有展开/折叠功能模块) 手风琴是个垂直罗列元素组合,例如标签或缩略图,这允许用户切换内容模块展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。...: 如果焦点在手风琴面板,将焦点移动到面板标题上。...如果原生语言具有默认 heading 和 aria-level 元素,例如HTML标题标签,可以使用原生语言元素。 button 元素是 heading 元素唯一元素。...选项卡列表 被包含在 tablist 元素选项卡元素组合。 选项卡 选项卡列表中一个元素,作为其中一个内容面板标签,可以激活显示对应内容面板。...如果选项卡列表是水平,它不会监听 Down Arrow 或 Up Arrow 光标键,即使焦点在选项卡列表,使用这些键仍会提供浏览器常规滚动功能

4.4K30

10步大幅提升网站可访问性

是否有label标签,这些labelfor属性是否通过填写相应表单元素id来彼此绑定;label标签包裹范围是否足够大,一致鼠标很容易就能操作到;表单元素在被聚焦时候是否有清晰视觉反馈;提交和重置按钮以及图片按钮是否标记了文字或者在...虽然HTML5允许heading之间嵌套,但是我绝对不推荐。 [图片] 第五步,是否有blur()。辅助技术一般都是依靠焦点来获取内容,所以这个事件从本质上就使得辅助内容无法获得应用了此方法元素。...这两个按键是迄今为止最能达成共识快捷键了。另外,挖掘当前页面的最重要一个功能,是最重要。然后在这个功能开始元素或者包装元素上设置一个快捷键,按照顺序的话,就是2吧。accesskey=2。...值,那么也一定利用js将焦点移动到这个页面的第一个有内容DOM上。...如果你通过一个按钮触发了一个组件窗口,在关闭这个组件窗口时候,请把焦点重新移动回到触发这个窗口按钮上。 第十步,填写一个简单链接到之后,作为第一个内容元素

95721

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

使用颜色、形状、文本和动效来传达正在发生事情 访问你应用:包含适当内容标签适应那些使用纯文字版本用户 具体 支持特定平台辅助技术,就像支持触摸、键盘和鼠标的输入方式一样。...视觉反馈(如标签、颜色和图标)和触摸反馈向用户显示了可用 UI。 导航应该具有清晰任务流程,和最少步骤。在频繁使用任务上,应该实现聚焦控制、或控制键盘和读取焦点功能。...启用焦点导航 使用焦点控制导航 屏幕阅读器 屏幕阅读器为用户提供了多种屏幕导航方法,包括: 屏幕阅读器触摸界面允许用户在屏幕上移动手指,听到手指正下方内容。这使用户能快速了解整个界面。...当页面使用合适语义化标签时,一些无障碍技术允许用户在页面的这些标记(例如标题)之间导航。 硬件或软件方向控制器(例如 D-pad、轨迹球或键盘)允许用户线性方式从一个选择元素跳到另一个元素。...确定以下焦点移动方式: 元素接收焦点顺序 元素分组方式 拥有焦点元素消失时,焦点移动到哪里 通过视觉指示器和辅助文本组合,来阐明焦点位置。

4.7K40

9 大跨平台移动 App 开发工具推荐

通过 MonoCross,你可以使用任何平台特定 API 或 HTML5 来构建本机应用程序,提供丰富基于 Web 功能,而且,不管是在设备还是服务器上运行,都可以同时使用相同业务逻辑和数据代码...这个平台上有自动编码、应用程序预览和 API 连接等功能,还有其它各种令人惊讶功能。...Rhomobile是一款基于Ruby手机软件开发框架,用于编写并发布跨越多个移动平台应用程序,程序只需编写一次就能在各种平台上运行。...Rhomobile表示自己遵循苹果开发者授权。 1、移动开发框架 Xamarin ? Xamarin始创于2011年,旨在使移动开发变得难以置信地迅捷和简单。...Xamarin产品简化了针对多种平台应用开发,包括iOS和 Android。

5.5K20

【译】Visual Studio 2019 中 WPF & UWP XAML 开发工具新特性

应用工具栏现在主题(v16.2) 应用工具栏元素选择行为更改: 我们更新了应用程序工具栏功能“启用选择”行为,用于在运行应用程序中选择元素。...,绑定包含公共属性,元素名称,索引属性路径(集合),附加属性和强制转换属性路径。...实时可视化树中Just My XAML 可移动应用工具栏(v16.3): 应用程序工具栏已得到增强,可在正在运行 WPF / UWP 应用程序中移动,从而使开发人员能够在应用程序中向左或向右拖动它以解除阻止应用程序...可移动应用工具栏(v16.3) XAML绑定失败面板(独立 VSIX 早期 alpha 预览): 为了在开发人员应用程序中发生数据绑定失败时为开发人员提供帮助,我们在开发中提供了一项新功能,该功能为...此功能仍在开发中,并将在将来继续改进,恢复与 .NET Framework 对话框功能功能奇偶性。

7.2K30

Web内容无障碍性(3):ARIA角色Roles值示与aria-*属性值列表说明

本文对几年前张鑫旭老师《WAI-ARIA无障碍网页应用属性完全展》属性表简化增补版本ARIA 角色值分类列表角色有意义方式指示元素类型。...假定屏幕阅读器遇到包含 role=navigation 页面上一个 HTML 元素。 屏幕阅读器将知道此 HTML 元素用于导航,用户将能直接使用导航功能而非通过所有链接选择标签。...表示标签面板timer表示计数模拟计数器,使用在动态显示规律数值变化地方toolbar表示工具栏左边HTML表示一个剪切,复制,粘贴三功能在一起工具栏。...表示后代元素id值。aria-activedescendant 属性定义了当工具栏获取焦点时,哪一个工具栏子控件获取了焦点。...空格分隔id值们。如果该属性值对应是单独id, 辅助技术会恢复目标元素阅读;如果对应是多个id, 则辅助技术会让用户去选择、导航到目标元素。aria-grabbed字符串。

1.7K20

聊一聊PowerFlex® 755T

标准,减少其设施中电气设备故障 PF755TL特点 DeviceLogix 控制 DeviceLogix™ 提供内置本地应用控制功能辅助监控功能 提高独立应用生产率 通过在本地进行逻辑处理来帮助提高性能与可靠性...(2 ms 扫描率) 三相输入电源或 24V 辅助控制电源供电 可配置多达 500 个指令块,支持工业应用要求 编程工具简单易用 支持功能块和梯形图编程 增加了标签绑定功能,优化编程体验 - 可对变频器中任何参数创建标签...16 种标准指令类型可供使用(即:定时器、计数器、报警、PID 等) 掉电跨越 掉电跨越功能可帮助易受电压/电流暂降影响应用延长正常运行时间 将跨越状态维持在 10 分钟以内 对短时暂降保持满转矩跨越...,提高可靠性 考虑动态直流母线状况 减少启动中所需整定时间 自动监控产品线更换并提供相应补偿 防摆技术 无需辅助传感器、外部控制器或复杂编程即可自动控制起重机摆动 防止移动负载“钟摆效应”...、速度) 易维修 支持简单直观方式维修关键组件,通常在 5 分钟便可完成风扇维修 专为高效安装和维护而设计,同时减少所需空间 模块化设计 一次性连接单元 快速维修支持 PowerFlex

53910

Xamarin 学习笔记 - Page(页面)

这些视图是一组控件,在本示例中,我们用到是:一个Label标签,一个Entry(输入文本)以及一个Button按钮。 Xamarin.Forms提供了许多可用页面,允许提出各种不同导航体验。...为了精确定义什么是一个Xamarin.Forms.Page示例,官方文档给出了一个清晰而简明定义。 和这个链接中提到那样: “页面是占据屏幕大部分或全部并包含单个子视觉元素。...Xamarin这个平台总来讲是一个快速提高开发效率和降低开发成本一个平台,你可以不必特别了解多个开发平台语言和环境特性也能开发出多个移动应用,仅凭这一点,Xamarin也已经在移动开发领域拥有了一批拥趸...而在这其中,葡萄城也是其中一员,活字格 用户专属App也是使用Xamarin进行开发,这个App主要功能是扩展了活字格应用在移动可用性,丰富了用户使用场景,例如:可以在应用中使用扫码命令帮你快速录入产品信息...、使用移动设备定位、手机系统级通知等等功能

4.6K20

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

(注意:将焦点困在一个元素中不使该元素成为模态元素,但如果它是真正模态元素,则焦点无法移动到外部元素,因为外部元素不是可聚焦)。...WAI-ARIA 规定,当使用 role="dialog" 时,应至少包含一个可聚焦元素,并在对话框打开时将焦点移动到其中一个可聚焦元素上。...您正在编辑一些重要内容,并不小心按下了 Command + W 快捷键,关闭当前标签页。一个警告对话框出现,询问您是否真的想“离开”,不需要先“保存您更改”吗。...但是,他补充道:你 ARIA 披露组件将不会拥有/一些功能,例如页面搜索 (Chromium 在内容中包含页面搜索查询时触发其开放状态)。...他们最终必须选择这个国家,因为它是必需字段。然而,当他们选择国家时,他们可能想浏览其他内容,或者先弹出信用卡信息。他们可能需要查看标签确定您是否需要出生国或居住国。

3.3K00

Visual Studio 2017 针对移动开发新特性介绍

这个版本包含了一些非常棒功能,包括实时单元测试、新重构、代码提示、C#7.0支持,以及帮助移动开发人员构建更好移动应用程序功能。...下面,就让我们一起来看看Visual Studio 2017中有哪些功能使得移动开发变得更加容易。...新安装过程更加直观并且触摸友好,最重要是我们通过仅选择所需工具,就能实现较低磁盘占用。我们可以选择最适合我们需求功能,例如移动开发只需要包含.NET,UWP或 .NET Core就可以。...只需要点击几个按钮,就可以实现你移动项目在iOS,Android和Windows 10移动应用上引导工作,其中包括标签导航,MVVM,设置等。...通过在Visual Studio 2017一步步指导我们整个过程,Android Archive Manager为我们提供了无缝应用发布流程。

2.8K20

京喜小程序首页无障碍优化实践

根据研究会信息无障碍工程师初步检测,目前影响障碍用户们使用缺陷集中在以下几类中: 按钮未加标签,用户难以了解对应按钮点按分别会触发哪些功能。...移动端 APP 访问无障碍特性,开启读屏模式设置路径: iOS:设置 -> 通用 -> 辅助功能 -> 旁白(VoiceOver) 。...安卓:设置 -> 辅助功能 -> 无障碍 -> TalkBack(不同机型路径可能不一样) 以下是一些主要 VoiceOver 手势: 轻点:选择并朗读项目。 轻点两下:激活所选项目。...三个手指向上或向下轻扫:滑动屏幕上列表或区。 双指搓擦:快速来回移动两个手指三次(形成“z”字形)解除提醒,或者返回上一个屏幕。...轮播图焦点差异 ? 轮播图 安卓:焦点位置会跟随子元素滑动消失; iOS:焦点位置固定不变,不会随子元素滑动而消失。 价格读取差异 ?

1.2K31

前端无障碍开发指南

简单来说,可访问性树是 DOM 树一个子集。每个需要暴露给 ATs 辅助技术 DOM 元素都对应一个在可访问树中存在无障碍对象。...尽管这些表单组件在视觉和功能上满足了 UI 要求,但它们并未实现原生表单元素无障碍功能。 4....这些原生 HTML 元素,天然存在于页面 Tab 键顺序,内置了键盘事件处理,可以通过 Tab 键聚焦,并且获得焦点时有可见焦点指示器(往往是显眼蓝色框框)。...但使用 accesskey也需注意以下问题: accesskey 值可能与系统或浏览器快捷键或辅助技术功能相冲突 当考虑页面国际化时,某些 accesskey 值可能不会出现在一些键盘上 依赖于数值...此时,我们应该使用 React 标签(Vue 中可以使用 vue-fragment),确保根元素不存在于最终 DOM 结构

83320

【重榜?】.NET 6 Preview 1 开箱上手!带你尝试新版本更新!

跨平台 UI 应用 .NET6 对多平台(Android、IOS等)界面应用程序做了统一,提供了在多种平台和设备上一致体验,并且可以在移动应用和 PC桌面程序之间共享更多代码。...例如笔者就编写一个 dotnet tool 工具,名称为 csys,可以帮助查看主机一些信息,用户可以输入命令加上参数,然后判断要使用功能: public static class Command...这个库功能比较多,感兴趣读者可参考:https://github.com/dotnet/command-line-api 通过这个库,我们可以很容易打造出像 wget、curl 这样命令行程序。...(AoT)编译 发布时将 Blazor WebAssembly 应用程序中.NET代码直接编译为 WebAssembly,显着提高运行时性能;这样可以减少一些 .dll 文件; SPA集成...,例如将 UI 焦点设置在这些输入组件上。

3.7K20

Javascript函数简单学习

函数参数:javascript函数可以任意数目的参数来调用,而不管函数定义中参数名字有多少个,由于函数是宽松类型,它就没有办法声明所期望参数类型,并且,任何函数传递任意类型参数都是合法...>元素选项或其他表单元素失去焦点,并且在其获取焦点后内容发生过改变时触发     onerror:        出现错误时触发     onfocus:        任何元素或窗口本身获得焦点时触发...    onmouseout:     鼠标从指定元素移动开始触发     onmouseover:    鼠标移动到某个元素时触发     onmouseup:      释放任意一个鼠标按键时触发...    onreset:        单击重置按钮时,在form标签上触发     onresize:       窗口或者框架大小发生改变时触发     onscroll:       在任何滚动条元素或者窗口上滚动时触发...中绑定(第二种方式要注意先执行     form标签内容,然后再执行script标签内容)  案例1代码如下 1 2 3 <meta http-equiv=

1.9K80

如何测试你做项目的可访问性

表单控件名字和标签 检测结果显示“表单元素没有关联标签”(点击 input 元素必须要有标签(https://dequeuniversity.com/rules/axe/3.3/label)查看更多...需要手动检查项目 自动化检测 cases 覆盖不全可访问性所有特性,需要我们手动测试。包括:键盘焦点顺序是否合理、可交互元素是否易于理解、是否有键盘陷阱、自定义组件是否也易于理解和使用等等。...键盘可访问性 重点关注页面上所有可交互元素,须同时满足以下两点: 元素可被选中,当按Tab键时 元素可交互,当按Enter/空格/箭头键/Esc键时 我们继续 360课程培训(https://www.so.com...按箭头键可在本层选项前后移动“不限/线上/线下”4. 按空格键可触发筛选交互 级别/设置/周期 同上 已选条件 通过 通过 10% 1. 按Enter键重新筛选2....比如 Mac 上 VoiceOver(https://webaim.org/articles/voiceover/),在“系统偏好设置/辅助功能/VoiceOver” 中启用它。 ?

1.8K10

跨平台应用框架_安卓前端框架

截至 2019 年,全球移动应用收入达 4610 亿美元,预计到 2023 年,付费下载和应用广告收入预计将超过 9350 亿美元。...解决此问题一种方法是你目标是使用MVP测试你愿景,或是你准备使用成熟应用程序开始运行。您需要回答另一个问题是产品功能(例如,访问移动设备硬件或特定于平台功能)。...另一个使React Native成为2020年跨平台移动开发框架首选之一,是因为持续更新,例如近期版本 0.60 和 0.61 : 多项辅助功能改进。 更清晰、更人性化开始屏幕。...Xamarin.Native和Xamarin.Forms Xamarin与其他框架不同之处在于,它提供了两种编译跨平台移动应用方式:Xamarin Native(也称为Xamarin.Android...Xamarin.Android/iOS允许开发人员使用原生控件和布局,而Xamarin.Forms基于标准UI元素,允许从单个API设计应用程序,但如果你需要更完美的原生UI,则可能还不够。

2.6K20
领券