DevExpress Blazor UI組件庫提供了一套全面的原生Blazor組件(包括DataGrid、Pivot Grid、
調度程序、圖表、數據編輯器和報表)，使用C#為Blazor Server和Blazor WebAssembly創建高影響力的用戶體驗！

獲取DevExpress v23.2正式版下載

DevExpress技術交流群10：532598169      歡迎一起進群討論

在上一次主要更新(v23.2)中，DevExpress修改了元素結構來提高屏幕閱讀器的兼容性，為以下DevExpress Blazor UI組件添加了替代文本描述和WAI-ARIA角色/屬性：

• Grid（網格）
• Data Editors（數據編輯器）
• TreeView
• Toolbar（工具欄）
• Menu 和 Context Menu（菜單和上下文菜單）

同時還為以下Blazor UI組件引入了鍵盤導航和快捷方式：

• Grid（網格）
• Calendar（日歷）
• Toolbar（工具欄）
• Menu（菜單）
• Context Menu（上下文菜單）

這些與可訪問性相關的功能是“開箱即用”的，您還可以在代碼中擴展可訪問性。例如，您可以為單個編輯器和控件內部元素指定可用的描述。

編輯器的可訪問標簽

由于應用程序的設計，應用程序中的編輯器可能不需要標簽。然而這可能會在可訪問性評估期間導致警告，并使使用屏幕閱讀器進行回復的用戶更加困難。您可以添加一個隱藏的標簽，它可以被屏幕閱讀器軟件讀取，但不會顯示在頁面上，來解決這個用例。使用以下選項當中的一個將次操作引入受DevExpress驅動的Blazor應用程序：

• 創建一個單獨的標簽，向編輯器添加可訪問的信息。

<label for="label1" style="display: none">Text</label>
<DxTextBox InputId="label1"/>

• 直接對編輯器應用aria-label屬性。

<DxTextBox aria-label="Text" />

在這兩種情況下，編輯器都將使用指定的aria-label屬性呈現輸入元素，該屬性可以被屏幕閱讀器讀取和讀出。

<div ... >
<div ... >
<div>
<input aria-label="Text" ... >
</div>
</div>
</div>

控件內部元素的可訪問描述

使用可本地化字符串，控件內部元素(如按鈕和Blazor Grid的搜索框)中的文本可以被修改。

例如，DxBlazorStringId.Grid_SearchBoxNullText屬性可以設置為Search…(修改搜索字段中使用的空文本)。

在v23.2發布周期中，DevExpress官方創建了用于輔助技術工具的本地化字符串。如果客戶使用輔助技術，您可以提供額外的信息來幫助提高整體可用性，這些字符串的命名模式是A11y_{string_name}。

在下面的代碼片段中，靜態XtraLocalizer對象用于提供空文本和搜索框的可訪問描述。雖然這種描述不會改變控件外觀，但它確實會影響部分用戶處理屏幕信息的能力。

protected override async Task OnInitializedAsync() {
XtraLocalizer.QueryLocalizedString += new EventHandler(XtraLocalizer_QueryLocalizedString);
}

static private void XtraLocalizer_QueryLocalizedString(object sender, XtraLocalizer.QueryLocalizedStringEventArgs e) {
if (e.StringIDType == typeof(DxBlazorStringId)) {
if ((DxBlazorStringId)e.StringID == DxBlazorStringId.Grid_SearchBoxNullText)
e.Value = "Search...";
if ((DxBlazorStringId)e.StringID == DxBlazorStringId.A11y_Grid_SearchBox)
e.Value = "Enter search criteria. Use the space key to enter multiple search values.";
}

更多DevExpress線上公開課、中文教程資訊請上中文網獲取