彩票走势图

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

翻译|行业资讯|编辑:龚雪|2024-04-16 10:39:15.063|阅读 15 次

概述:本文将主要介绍界面控件DevExpress Blazor UI在之前发布的v23.2版本中增强的可访问性,欢迎下载最新版体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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 企业定制服务

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP