IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

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

    Mia Wu发表于 2024-05-13 07:40:20
    love 0

    本篇翻译于Rachel Kang (SHE/HER) 的 The Journey to Accessible Apps: Keyboard Accessibility and .NET MAUI 

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

    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 个例子: 

    1.模态页面上的键盘导航 

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

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

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

    2. 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 属性。应用此属性使用户能够点击页面来隐藏软输入键盘,我们建议仅在特殊情况下使用它。 

    3.键盘快捷键 

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

    在.NET MAUI 中,我们构建了键盘快捷键的解决方案。 借助键盘快捷键,所有键盘和桌面用户都可以利用键盘快捷键来激活菜单项命令! 

    Screenshot of menu bar item keyboard acceleratorsScreenshot of context menu item keyboard accelerators

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

    如果大家有任何的技术问题,欢迎到我们的官方的.NET中文论坛 提问.

    The post 无障碍应用程序之旅:键盘可访问性和 .NET MAUI  appeared first on .NET中文官方博客.



沪ICP备19023445号-2号
友情链接