技術速遞|無障礙應用程序之旅:鍵盤可訪問性和 .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.pswp.cn/bicheng/15913.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/15913.shtml
英文地址,請注明出處:http://en.pswp.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…

設計模式--目錄

設計模式是軟件工程中為解決常見問題而總結出來的一系列通用解決方案。它們可以分為三大類別&#xff1a;創建型模式、結構型模式和行為型模式。下面列舉了一些常見的設計模式及其分類&#xff1a; 創建型模式(Creational Patterns) 創建型模式關注對象的創建過程&#xff0c…

小程序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庫&…

P3128 [USACO15DEC] Max Flow P題解(樹上差分,最近公共祖先,圖論)

前言&#xff1a; 題目鏈接&#xff1a;P3128 [USACO15DEC] Max Flow P - 洛谷 | 計算機科學教育新生態 (luogu.com.cn) 講解&#xff1a; 這一題含金量真算高的&#xff0c;包含了建樹&#xff08;用了圖論的知識&#xff09;&#xff0c;求最近公共祖先&#xff08;倍增法…

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&#…

微前端架構 之 應用之間樣式隔離 (四)

1. 使用 CSS Modules 進行樣式隔離 1. 安裝必要的依賴 如果你使用 webpack 作為構建工具&#xff0c;你可能需要安裝 css-loader 和 style-loader。如果你的項目使用 Create React App 或其他現代前端框架&#xff0c;這些可能已經內置了。 npm install --save-dev css-loade…

springboot結合baomidou dynamic-datasource組件實現多數據源

dynamic-datasource組件實現多數據源 一、背景介紹二、 思路方案三、過程四、總結五、升華 一、背景介紹 博主最近研發的項目中由于業務需要&#xff0c;在項目中使用到多個數據源。使用到了baomidou的dynamic-datasource組件來實現訪問不同的數據源。覺得挺有意思的也是進行了…

Redis事務(1)

什么是事務&#xff1f; Redis 的事務和 MySQL 的事務概念上是類似的. 都是把?系列操作綁定成?組. 讓這?組能夠批量執行。 但是注意體會 Redis 的事務和 MySQL 事務的區別: 弱化的原?性: redis 沒有 “回滾機制”. 只能做到這些操作 “批量執?”. 不能做到 “?個失敗就…

海外鏈游地鐵跑酷全自動搬磚掛機掘金變現項目,號稱單窗口一天收益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…

Incremental Task and Motion Planning: A Constraint-Based Approach(翻譯)

摘要——我們提出了一種新的任務和運動算法規劃&#xff08;TMP&#xff09;&#xff0c;并討論獲得TMP的健壯解決方案所必需的需求和抽象。我們的迭代深化任務和運動規劃&#xff08;IDTMP&#xff09;與類似的、最先進的、概率完全的規劃器相比&#xff0c;該方法是概率完全的…

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]] 示例…

【Linux】端口映射

外部訪問http://127.0.0.1&#xff08;默認端口80&#xff09; 實際訪問http://127.0.0.1:8080 //添加規則 iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080 //移除規則 iptables -t nat -L -nv --line-numbers iptables -t nat -D PREROUT…