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

獲取DevExpress v23.2正式版下載

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

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

• Grid（網(wǎng)格）
• Data Editors（數(shù)據(jù)編輯器）
• TreeView
• Toolbar（工具欄）
• Menu 和 Context Menu（菜單和上下文菜單）

同時(shí)還為以下Blazor UI組件引入了鍵盤導(dǎo)航和快捷方式：

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

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

編輯器的可訪問(wèn)標(biāo)簽

由于應(yīng)用程序的設(shè)計(jì)，應(yīng)用程序中的編輯器可能不需要標(biāo)簽。然而這可能會(huì)在可訪問(wèn)性評(píng)估期間導(dǎo)致警告，并使使用屏幕閱讀器進(jìn)行回復(fù)的用戶更加困難。您可以添加一個(gè)隱藏的標(biāo)簽，它可以被屏幕閱讀器軟件讀取，但不會(huì)顯示在頁(yè)面上，來(lái)解決這個(gè)用例。使用以下選項(xiàng)當(dāng)中的一個(gè)將次操作引入受DevExpress驅(qū)動(dòng)的Blazor應(yīng)用程序：

• 創(chuàng)建一個(gè)單獨(dú)的標(biāo)簽，向編輯器添加可訪問(wèn)的信息。

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

• 直接對(duì)編輯器應(yīng)用aria-label屬性。

<DxTextBox aria-label="Text" />

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

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

控件內(nèi)部元素的可訪問(wèn)描述

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

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

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

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

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線上公開課、中文教程資訊請(qǐng)上中文網(wǎng)獲取