技术速递|无障碍应用程序之旅:键盘可访问性和 .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 帮助您比以往更容易地构建可访问的应用程序。我们一直都在关注如何让它对您来说更加容易,请随时告诉我们!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用Rust构建Python原生库?注意,不是动态链接库!!!

参考文档&#xff1a;https://github.com/PyO3/pyo3 创建python虚拟环境&#xff1a; conda create --name pyo3 python3.11.7激活虚拟环境&#xff1a; conda activate pyo3安装依赖&#xff1a; pip install maturin初始化项目&#xff1a; maturin init构建项目&#x…

小程序checkbox改成圆形与radio样式保持一致

修改前 修改后 html: <view class"agreement"><checkbox value"{{ isAgreed }}" bind:tap"toggleCheckbox" /><text>我同意室外智能健身房 <text class"link" bind:tap"showUserProtocol">用户协…

【JTS Topology Suite】Java对二维几何进行平移、缩放、旋转等坐标变换

JTS介绍 Github项目地址&#xff1a;https://github.com/locationtech/jts Maven库地址&#xff1a;https://mvnrepository.com/artifact/org.locationtech.jts JTS Topology Suite是一个用于创建和操作二维矢量几何的Java库。 JTS有对应的.NET版本NetTopologySuite库&…

2024目前网上最火短剧机器人做法,自动搜索发剧 自动更新资源 自动分享资源

目前整个项目圈子很多的短剧机器人&#xff0c;我写的&#xff0c;自动搜索发剧&#xff0c;自动更新资源&#xff0c;自动分享资源&#xff0c;前段时间大部分做短剧的都是做的短剧分成&#xff0c;我的一个学员做的30W播放量才200块收益&#xff0c;备受启发&#xff0c;我就…

springboot社区助老志愿服务系统-计算机毕业设计源码96682

摘要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在图书馆管理的要求下&#xff0c;开发一款整体式结构的社区助老志愿服务…

社交媒体数据恢复:绿洲

本教程将向您展示如何在绿洲平台上备份和恢复数据&#xff0c;但不涉及推荐任何具体的数据恢复软件。 一、绿洲平台数据备份 为了确保数据的安全&#xff0c;在日常使用过程中&#xff0c;我们需要定期备份绿洲平台上的数据。以下是备份绿洲平台数据的步骤&#xff1a; 登录绿…

three.js能实现啥效果?看过来,这里都是它的菜(09)

Hi&#xff0c;这是第九期了&#xff0c;继续分享three.js在可视化大屏中的应用&#xff0c;本期分享位移动画的实现。 位移动画 Three.js位移动画是指在Three.js中实现物体位置的平移动画。通过改变物体的位置属性&#xff0c;可以实现物体沿着指定路径从一个位置移动到另一…

Java——图书管理系统万字详解(附代码)

框架搭建 book包 将书相关的放到book包中&#xff0c;创建一个Book类用来设置书的属性&#xff0c;包括书名、作者、价格、类型、是否被借出等。 以上属性均被private所修饰 利用编译器生成构造方法&#xff08;不需要构造isBorrowed&#xff0c;因为其初始值为false&#…

springboot结合baomidou dynamic-datasource组件实现多数据源

dynamic-datasource组件实现多数据源 一、背景介绍二、 思路方案三、过程四、总结五、升华 一、背景介绍 博主最近研发的项目中由于业务需要&#xff0c;在项目中使用到多个数据源。使用到了baomidou的dynamic-datasource组件来实现访问不同的数据源。觉得挺有意思的也是进行了…

海外链游地铁跑酷全自动搬砖挂机掘金变现项目,号称单窗口一天收益30+(教程+工具)

一、项目概述 地铁跑酷海外版国外版自动搬砖挂机掘金项目是一款结合了地铁跑酷元素的在线游戏&#xff0c;为玩家提供一个全新的游戏体验&#xff0c;使得玩家可以轻松地进行游戏&#xff0c;无需手动操作&#xff0c;节省时间和精力。 二、游戏特点 1. 自动化操作&#xff1…

AI应用案例:影像报告智能辅助编辑系统

今天给大家介绍一个医疗行业的案例“影像报告智能辅助编辑系统”&#xff01;该案例已经在某三甲医院落地&#xff0c;模型准确度超过80%。 该项目上线后&#xff0c;保守估计&#xff0c;能为每位医生的每一张报告至少省下1分钟时间和2分钟的精力&#xff0c;20位初级医生&…

Django Web:搭建Websocket服务器(入门篇)

Django Web架构 搭建Websocket服务器&#xff08;1&#xff09; - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:htt…

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

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

LeetCode热题100——矩阵

73.矩阵清零 题目 给定一个 *m* x *n* 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]] 示例…

HTML+CSS 玻璃按钮

效果演示 Code <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>玻璃按钮</title><li…

设计模式 17 组合模式 Composite Pattern

设计模式 17 组合模式 Composite Pattern 1.定义 组合模式&#xff08;Composite Pattern&#xff09;&#xff0c;又叫部分整体模式&#xff0c;是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象&#xff0c;用来表示部分以及整体层次。这种类型的设…

window好用的网速工具

这是一个用于显示当前网速、CPU及内存利用率的桌面悬浮窗软件&#xff0c;并支持任务栏显示&#xff0c;支持更换皮肤。 github链接如下 https://github.com/zhongyang219/TrafficMonitor?tabreadme-ov-file

无人机飞手:ASFC无人机和航模爱好者证书详解

ASFC无人机和航模爱好者证书是由中国航空运动协会&#xff08;ASFC&#xff09;颁发的一种无人机操作资格认证。这种证书在无人机和航模爱好者群体中享有广泛的认可度&#xff0c;并被视为操作无人机的一种重要资质。 ASFC证书的定义和用途十分明确。它是民航局颁发的民用无人驾…

springboot3微服务下结合springsecurity的认证授权实现

1. 简介 在微服务架构中&#xff0c;系统被拆分成许多小型、独立的服务&#xff0c;每个服务负责一个功能模块。这种架构风格带来了一系列的优势&#xff0c;如服务的独立性、弹性、可伸缩性等。然而&#xff0c;它也带来了一些挑战&#xff0c;特别是在安全性方面。这时候就体…

【前端笔记】Vue项目报错Error: Cannot find module ‘webpack/lib/RuleSet‘

网上搜了下发现原因不止一种&#xff0c;这里仅记录本人遇到的原因和解决办法&#xff0c;仅供参考 原因&#xff1a;因为某种原因导致本地package.json中vue/cli与全局vue/cli版本不同导致冲突。再次提示&#xff0c;这是本人遇到的&#xff0c;可能和大家有所不同&#xff0c…