DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

界面控件DevExpress Blazor UI v23.2 - 浅谈增强的可访问性

来源:   发布时间:2024-04-16   浏览:115次

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…(修改搜索字段中使用的空文本)。

界面控件DevExpress Blazor UI - 浅谈增强的可访问性

在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线上公开课、中文教程资讯请上中文网获取

DevExpress 企业定制服务
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/4542.html

相关产品: DevExpress Universal Subscription,

在线
客服
微信
QQ 电话
023-68661681
返回
顶部