技术速递|无障碍应用程序之旅:键盘可访问性和 .NET MAUI

作者:Rachel Kang
排版:Alan Wang

首先让我们一起来看看您的应用程序是否支持键盘访问:

  1. 启动您的其中一个应用。
  2. 如果您的设备尚未连接物理键盘,请连接物理键盘。
  3. 像平常一样导航您的应用程序,并且仅使用键盘来执行此操作。

这次体验如何?是否轻松?是否与您通常使用应用程序的体验相匹配?

确保您的应用程序体验在仅通过键盘导航时同样出色,这对于构建一个对所有人都包容且可访问的应用程序体验至关重要。

Web 内容可访问性指南(WCAG)

若要了解键盘可访问性的详细信息,可以从 Web 内容可访问性指南(WCAG)开始。

WCAG 是一组针对 Web 可访问性的技术标准,被广泛引用,并扩展到 Web 以外的各种应用程序和平台。它已成为全球标准和法律基准,并随着技术的发展而不断发展。

在各种指南中,有一个经常被忽视的是指南第2.1条,该条内容表明开发人员应“使所有功能可通过键盘访问”。

这包括四个成功标准:

成功标准 2.1.1 键盘

内容的所有功能都可以通过键盘界面操作,而无需对单个按键的时间进行特定的控制,除非底层功能需要依赖用户移动路径而不仅仅是端点的输入。

成功标准 2.1.2 无键盘陷阱

如果您可以使用键盘界面将键盘焦点移动到页面的某个组件,那么您只需使用键盘界面就可以将焦点从该组件移开,并且如果它需要的不仅仅是未修改的箭头或 Tab 键或其他标准退出方法,则用户会被告知移动焦点的方法。

成功标准 2.1.3 键盘(无例外)

内容的所有功能都可以通过键盘界面进行操作,无需为各个按键分配特定的时间。

成功标准 2.1.4 字符快捷键

如果您在仅使用字母(包括大写和小写字母)、标点符号、数字或符号字符的内容中实现键盘快捷键,则至少满足以下条件之一:

  • 关闭 有一种机制可以关闭快捷方式;
  • 重新映射 有一种机制可以重新映射快捷键,使其包含一个或多个不可打印的键盘键(例如 Ctrl、Alt);
  • 仅在焦点上活动 用户界面组件的键盘快捷键仅在该组件具有焦点时活动。

对这些标准的基本理解将有助于您开始开发键盘可访问的应用程序。

键盘可访问性和 .NET MAUI

除了各种其他考虑因素之外,.NET MAUI 的设计目标之一是实现更轻松地开发键盘可访问的体验。因此,熟悉 Xamarin.Forms 键盘行为的开发人员注意到了一些改进,以提高他们应用程序中的键盘可访问性。

对于可通过键盘界面操作的所有功能,所有交互式控件都必须是键盘可聚焦的(可以接收键盘焦点)和键盘可导航的(可以使用键盘进行导航)。这也包括避免让不可见的内容键盘可访问。正如我们应该期望可见控件可以通过键盘进行聚焦和导航一样,我们应该期望不可见/不存在的控件无法通过键盘访问或呈现。

为了避免键盘陷阱,我们确保可以通过键盘导航进入、内部和外部当前视图内的所有相关控件。例如,如果您导航具有多个 CollectionView 的屏幕,.NET MAUI 会与标准键盘可访问性期望保持一致,从而使您能够通过标准键盘导航模式轻松导航到任何 CollectionView 或从中导航出来。

那么 .NET MAUI 究竟如何让您更轻松地创建可访问键盘的体验呢?这里举 3 个例子:

模态页面上的键盘导航

.NET MAUI 有意考虑键盘可访问性的一个领域是模态页面。当模态页面出现时,与所有其他页面一样,确保页面上的所有内容均可访问。然而,对于模态页面来说,确保底层页面上的任何内容都不能通过键盘访问,也不能出现在模态页面上,这一点尤为重要。

当模态页面出现时,页面上第一个可通过键盘聚焦的控件应该接收焦点。然后,模态页面上的所有内容都应该是可访问的,并且所有交互式控件(应包括模态页面的退出选项(通常是“保存”或“关闭”))都应该是可通过键盘聚焦的。只有当模态页面被退出时,焦点才应返回到底层页面,并且底层页面上第一个可通过键盘聚焦的控件应再次接收焦点。

这种复杂性由 .NET MAUI 框架处理的,因此您的模态页面可以开箱即用地轻松导航!

Android 上的键盘聚焦/失去焦点

在开发 .NET MAUI 的过程中,我们了解到的另一件事是,在早期版本的 Android 上不可能“失焦”一个输入框,必须始终聚焦某些控件。在 Xamarin.Forms 中,通过将焦点设置在页面布局上,使“失焦”条目成为“可能”;不幸的是,这种方法造成了严重的可访问性问题。由于这些原因,.NET MAUI 默认情况下不允许这种不可访问的行为,并强烈建议使用不同的方法。

最初使用“焦点”和“失焦”的动机通常与显示和隐藏软键盘有关。而不是通过操纵焦点来实现这一点,可以使用新的 SoftInputExtensions APIs 来管理键盘行为!

例如:

if (entry.IsSoftInputShowing())
    await entry.HideSoftInputAsync(System.Threading.CancellationToken.None);

如果 SoftInputExtensions 或其他替代解决方案无法满足您的键盘聚焦需求,.NET MAUI 团队很乐意了解有关您的使用场景的更多信息。请与我们分享,以便我们更好地了解您的开发需求!

话虽如此,.NET 8 中引入了可选的 HideSoftInputOnTapped 属性。应用此属性使用户能够点击页面来隐藏软输入键盘,我们建议仅在特殊情况下使用它。

键盘快捷键

与所有出色的、可访问的解决方案一样,在设计时考虑到可访问性意味着为所有人进行设计。对于键盘可访问性来说尤其如此,启用漂亮的键盘行为将使所有键盘用户受益,包括那些利用键盘作为主要输入模式的用户,以及偏爱使用键盘快捷键(也称为键盘加速器)的高级用户。

在 .NET MAUI 中,我们构建了键盘快捷键的解决方案。借助键盘快捷键,所有键盘和桌面用户都可以利用键盘快捷键来激活菜单项命令!
在这里插入图片描述
在这里插入图片描述
正如 .NET MAUI 文档中所描述的,下面是如何在 XAML 或 C# 中开始将键盘快捷键附加到 MenuFlyoutItem:

<MenuFlyoutItem Text="Cut"
                Clicked="OnCutMenuFlyoutItemClicked">
    <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Ctrl"
                             Key="X" />
    </MenuFlyoutItem.KeyboardAccelerators>
</MenuFlyoutItem>
cutMenuFlyoutItem.KeyboardAccelerators.Add(new KeyboardAccelerator
{
    Modifiers = KeyboardAcceleratorModifiers.Ctrl,
    Key = "X"
});

如果您还没有在 .NET MAUI 应用程序中包含键盘快捷键,请务必将其包含在其中,并应用 WCAG 成功标准2.1.4 中的新知识!

无障碍应用程序之旅

借助 .NET MAUI,您可以比以往更轻松地构建具有完整键盘访问且没有键盘陷阱的应用程序。

如果您是无障碍应用程序的新手,欢迎您! 请务必查看我之前的博客文章,了解有关构建可访问的应用程序以及 .NET MAUI 如何使其变得简单的更多信息。

您可以通过查看上一篇博客文章,了解 .NET MAUI 中其他键盘可访问性改进的背景,比如有意义的内容排序和移除 TabIndex。

.NET MAUI 帮助您比以往更容易地构建可访问的应用程序。我们一直都在关注如何让它对您来说更加容易,请随时告诉我们!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/644539.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

DI-engine强化学习入门(三)DI-ZOO强化学习环境搭建与示例运行——Atari

Atari是一家知名的电子游戏公司&#xff0c;成立于1972年&#xff0c;是早期电子游戏产业的先驱之一。在强化学习领域&#xff0c;提到Atari通常指的是Atari 2600游戏的一系列环境&#xff0c;这些环境是用于开发和测试强化学习算法的标准平台。 Atari 2600 强化学习环境概述 …

ABC354学习笔记

高桥有一棵植物&#xff0c;这个植物在第 0 0 0 天时高度为 0 c m 0\,\mathrm{cm} 0cm&#xff0c;此后的第 i i i 天&#xff0c;他的植物会增高 2 i c m 2^i\,\mathrm{cm} 2icm。 高桥身高为 H c m H\,\mathrm{cm} Hcm。 高桥想知道在第几天&#xff0c;他的植物的高度会…

Vue移动端登录页面

使用的是vant组件&#xff0c;引用和使用组件请去官网学习&#xff0c;链接↓vant组件官网 <div class"center"><!-- 背景图片 --><div class"background"><imgsrc"/assets/background.jpg"width"100%"heigh…

STL题单总结

下周争取全部刷掉 牛客 知乎推荐的题 收藏的文章1 收藏的文章2 收藏的文章3 洛谷题单

ICQ 将于 6 月关闭,这是一种奇怪的方式,发现它在 2024 年仍然活跃

你知道ICQ还活着吗&#xff1f;不过&#xff0c;不要太兴奋;它将永远消失。 还记得ICQ吗&#xff1f;如果你这样做了&#xff0c;你可能会记得它是AOL在1998年购买的Messenger客户端&#xff0c;就在Yahoo Instant Messager和MSN Messenger加入竞争的时候。然后Skype出现了&…

嵌入式全栈开发学习笔记---C语言笔试复习大全23

目录 联合体 联合体的定义 联合体的长度 如果来判断设备的字节序&#xff1f; 如何把大端数据转换成小端数据&#xff1f; 枚举 枚举的定义 上一篇复习了结构体&#xff0c;这一节复习联合体和枚举。 说明&#xff1a;我们学过单片机的一般都是有C语言基础的了&#xff…

【资讯】5月巴塞罗那,东胜物联边缘计算网关亮相IOTSWC AWS展台

2024年5月21-23日&#xff0c;物联网解决方案世界大会 IOT SWC 在巴塞罗那举行&#xff0c;这是数字化转型趋势和颠覆性技术的顶级盛会。 作为AWS的硬件合作伙伴&#xff0c;东胜物联网边缘计算网关DSGW-210将在AWS展台1号馆展出&#xff0c;欢迎大家前来参观。 此次东胜在AW…

【Linux】写时拷贝技术COW (copy-on-write)

文章目录 Linux写时拷贝技术(copy-on-write)进程的概念进程的定义进程和程序的区别PCB的内部构成 程序是如何被加载变成进程的&#xff1f;写时复制&#xff08;Copy-On-Write, COW&#xff09;写时复制机制的原理写时拷贝的场景 fork与COWvfork与fork Linux写时拷贝技术(copy-…

阿里云、百度云和移动云的对象存储横向性能对比

文章目录 前言一、对比测试的方法和标准A. 测试环境的设置 二、对比测试的结果A、阿里云OSS测试结果2.B. 百度云结果C. 移动云结果分析与结论 总结 前言 在企业的数字化转型进程中&#xff0c;我们观察到越来越多的公司将其IT基础设施迁移到云端。随着企业业务的持续运营&…

5.Redis之常用数据结构单线程模型

围绕每个数据结构介绍相关命令当前版本的redis支持10个数据类型 Redis 底层在实现上述数据结构的时候,会在源码层面,针对上述实现进行特定的优化,来达到 节省时间/节省空间 效果,内部的具体实现的数据结构&#xff08;编码方式&#xff09;,还会有变数redis 承诺,现在我这有个 …

pikachu靶场中的CSRF、SSRF通关

目录 1、CSRF介绍 2、CSRF&#xff08;get&#xff09; 3、CSRF&#xff08;post&#xff09; 4、CSRF Token 5、SSRF介绍 6、SSRF&#xff08;curl&#xff09; 7、SSRF&#xff08;file_get-content&#xff09; 8、CSRF与SSRF的区别 最近在学习CSRF、SSRF漏洞&#…

LeetCode HOT 100:3. 无重复字符的最长字串

1. 链接 . - 力扣&#xff08;LeetCode&#xff09; 2. 题目描述 3. 题解 方法一&#xff1a;滑动窗口 哈希表 根据题意&#xff1a; 1. 遍历所有可能的子串——利用滑动窗口表示子串&#xff1b; 2. 保证滑动窗口内不包含重复字符——需要哈希表map记录字符出现的下标。…

PostgreSQL基本使用Schema

参考文章&#xff1a;PostgreSQL基本使用&#xff08;3&#xff09;Schema_pg数据库查询schema-CSDN博客 PostgreSQL 模式&#xff08;Schema&#xff09;可以理解为是一个表的集合&#xff08;或者所属者&#xff09;。 例如&#xff1a;在 MySQL 中&#xff0c;Scheam 是库&…

etcd集群部署

1.etcd介绍 1.1 什么是etcd etcd的官方定义如下: A distributed, reliable key-value store for the most critical data of distributed systemetcd是一个Go语言编写的分布式、高可用的一致性键值存储系统,用于提供可靠的分布式键值(key value)存储、配置共享和服务发现等…

Nginx-狂神说

Nginx概述 公司产品出现瓶颈&#xff1f; 我们公司项目刚刚上线的时候&#xff0c;并发量小&#xff0c;用户使用的少&#xff0c;所以在低并发的情况下&#xff0c;一个jar包启动应用就够了&#xff0c;然后内部tomcat返回内容给用户。 但是慢慢的&#xff0c;使用我们平台…

C++ 常用UI库

AWTK github gitee doc scons 类似RT-Thread element github C Cross platfrom C GUI libraries&#xff0c;QT可替代方案。调试包 SDL GUI cegui 创作不易&#xff0c; 小小的支持一下吧&#xff01;

如何在Windows 10上对硬盘进行碎片整理?这里提供步骤

随着时间的推移&#xff0c;由于文件系统中的碎片&#xff0c;硬盘驱动器可能会开始以较低的效率运行。为了加快驱动器的速度&#xff0c;你可以使用内置工具在Windows 10中对其进行碎片整理和优化。方法如下。 什么是碎片整理 随着时间的推移&#xff0c;组成文件的数据块&a…

YOLOv10详细解读 | 一文带你深入了解yolov10的创新点(附网络结构图 + 举例说明)

前言 Hello大家好&#xff0c;我是Snu77&#xff0c;继YOLOv9发布时间没有多久&#xff0c;YOLOv10就紧接着发布于2024.5.23号&#xff08;不得不感叹YOLO系列的发展速度&#xff0c;但要纠正大家的观点就是不是最新的就一定最好&#xff09;&#xff01; 本文给大家带来的是…

Unity开发——XLua热更新之Hotfix配置(包含xlua获取与导入)

一、Git上获取xlua 最新的xlua包&#xff0c;下载地址链接&#xff1a;https://github.com/Tencent/xLua 二、Unity添加xlua 解压xlua压缩包后&#xff0c;将xlua里的Assets里的文件直接复制进Unity的Assets文件夹下。 成功导入后&#xff0c;unity工具栏会出现xlua选项。 …

vue3瀑布流示例,左侧菜单根据窗口滚动条进行固定和取消固定,实现瀑布流demo

瀑布流demo的实现效果&#xff1a; 效果说明&#xff1a; 1.使用vue3实现瀑布流效果&#xff1b; 2.瀑布流横向设置5等分&#xff0c;可根据个人需求调整&#xff1b; 3.左侧菜单可根据右侧滚动条滑动时进行固定和取消固定&#xff0c;实现更优的展示效果&#xff1b; 4.瀑…