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

news2024/9/23 1:20:20

作者: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.coloradmin.cn/o/1696239.html

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

相关文章

Docker提示某网络不存在如何解决,添加完网络之后如何删除?

Docker提示某网络不存在如何解决&#xff1f; 创建 Docker 网络 假设现在需要创建一个名为my-mysql-network的网络 docker network create my-mysql-network运行容器 创建网络之后&#xff0c;再运行 mysqld_exporter 容器。完整命令如下&#xff1a; docker run -d -p 9104…

类和对象【六】友元和内部类

文章目录 友元友元的作用友元的缺点友元函数语法&#xff1a;特点&#xff1a; 友元类语法&#xff1a;特点&#xff1a; 内部类概念特点 友元 友元的作用 友元提供了一种打破封装的方式&#xff0c;有时提供了便利。 友元的主要作用就是打破封装 即可以让一个类的友元函数…

Redis第18讲——Redis和Redission实现延迟消息

即使不是做电商业务的同学&#xff0c;也一定知道订单超时关闭这种业务场景&#xff0c;这个场景大致就是用户下单后&#xff0c;如果在一定时间内未支付&#xff08;比如15分钟、半小时&#xff09;&#xff0c;那么系统就会把这笔订单给关闭掉。这个功能实现的方式有很多种&a…

【限免】短时傅里叶变换时频分析【附MATLAB代码】

来源&#xff1a;微信公众号&#xff1a;EW Frontier 简介 一种能够同时对信号时域和频域分析的方法——短时傅里叶变换&#xff08;STFT&#xff09;&#xff0c;可以在时频二维角度准确地描述信号 的时间、频域的局部特性&#xff0c;与其他算法不同&#xff0c;通过该算法可…

打造游戏APP:面向对象编程的实战演练

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、项目背景与架构概览 二、类的设计与实现 三、面向对象编程的实践 四、游戏循环与事件…

搜索自动补全-elasticsearch实现

1. elasticsearch准备 1.1 拼音分词器 github地址&#xff1a;https://github.com/infinilabs/analysis-pinyin/releases?page6 必须与elasticsearch的版本相同 第四步&#xff0c;重启es docker restart es1.2 定义索引库 PUT /app_info_article {"settings": …

体检系统商业源码,C/S架构的医院体检系统源码,大型健康体检中心管理系统源码

体检系统商业源码&#xff0c;C/S架构的医院体检系统源码&#xff0c;大型健康体检中心管理系统源码 体检信息管理系统软件是对医院体检中心进行系统化和规范化的管理。系统从检前&#xff0c;检中&#xff0c;检后整个业务流程提供标准化以及精细化的解决方案。实现体检业务市…

上位机图像处理和嵌入式模块部署(f103 mcu的最小软件系统)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们都知道mcu电路有最小系统。一个最小硬件系统里面包含了mcu、晶振、复位、输入和输出。其实不光硬件如此&#xff0c;软件也有一个最小系统。而…

9.任务调度

一、开启任务调度器 1.函数 vTaskStartScheduler() 函数 vTaskStartScheduler()用于启动任务调度器&#xff0c;任务调度器启动后&#xff0c;FreeRTOS 便会开始 进行任务调度&#xff0c;除非调用函数 xTaskEndScheduler()停止任务调度器&#xff0c;否则不会再返回。函数 vTa…

【对角线遍历】python

没啥思路 class Solution:def findDiagonalOrder(self, mat: List[List[int]]) -> List[int]:mlen(mat)nlen(mat[0])ret[]if len(mat)0:return retcount0#mn-1是对角线总数while count<mn-1:#x和y的和刚好是count数#偶数为右上走if count%20:xcount if(count<m)else (…

Django 里html模板

Django 提供两种方式让程序员自定义html模板。 第一种方法 在项目文件夹里的urls.py进行添加 修改代码如下 from django.contrib import admin from django.urls import path from app01 import views # 得添加这行urlpatterns [path(xxx/, views.home), # 添加这行path(…

有一个3x4的矩阵,要求用函数编写程序求出其中值最大的那个元素,以及其所在的行号和列号

常量和变量可以用作函数实参&#xff0c;同样数组元素也可以作函数实参&#xff0c;其用法与变量相同。数组名也可以作实参和形参&#xff0c;传递的是数组的起始地址。 用数组元素作函数实参&#xff1a; 由于实参可以是表达式&#xff0c;而数组元素可以是表达式的组…

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

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

电机控制系列模块解析(22)—— 零矢量刹车

一、零矢量刹车 基本概念 逆变器通常采用三相桥式结构&#xff0c;包含六个功率开关元件&#xff08;如IGBT或MOSFET&#xff09;&#xff0c;分为上桥臂和下桥臂。每个桥臂由两个反并联的开关元件组成&#xff0c;上桥臂和下桥臂对应于电机三相绕组的正负端。正常工作时&…

原哥花了1个多月的时间终于开发了一款基于android studio的原生商城app

大概讲一下这个app实现的功能和前后端技术架构。 功能简介 广告展示商品展示跳转淘宝联盟优惠卷购买发布朋友圈宝妈知识资讯商品搜索朋友圈展示/点赞/评论登陆注册版本升级我的个人资料商品和资讯收藏我的朋友圈意见反馈 安卓端技术选型 Arouter组件化daggerrxjavaretrofit…

技术面试,项目实战,求职利器

之前找工作一直想找一个能真正系统性学开发的地方&#xff0c;之前毕业找工作的时候无意间碰到下面这个网站&#xff0c;感觉还挺不错的&#xff0c;用上面的技术实战内容应对技术面试&#xff0c;也算是求职利器了。有需要的可以自取&#xff1a; https://how2j.cn?p156336 实…

基于springboot+vue的智慧外贸平台

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

基础技术-ELF系列(1)-ELF文件基础

成就更好的自己 本篇是基础技术系列中ELF相关技术的首篇文章。 尽管网上有许多关于ELF相关内容的文章&#xff0c;但总体而言&#xff0c;要么是一些非常基础且重复性强的内容&#xff0c;要么直接深入探讨相对高深的主题&#xff0c;缺乏系统化分析和解释。 接下来&#xf…

Redis - 缓存场景

学习资料 学习的黑马程序员哔站项目黑马点评&#xff0c;用作记录和探究原理。 Redis缓存 缓存 &#xff1a;就是数据交换的缓冲区&#xff0c;是存储数据的临时地方&#xff0c;读写性能较高 缓存常见的场景: 数据库查询加速&#xff1a;通过将频繁查询的数据缓存起来&…

论文阅读--ActionCLIP

原来的动作识别问题在于标注太难太贵&#xff0c;将动作表示为短语的latent space太大 本文的贡献&#xff1a;&#xff08;1&#xff09;将CLIP的image encoder换成video encoder&#xff0c;方法与CLIP4Clip几乎一样 &#xff08;2&#xff09;CLIP的ground truth来自于文本…