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

DevExpress Blazor UI组件库提供了一套全面的原生Blazor组件(包括DataGrid、Pivot Grid、调度程序、图表、数据编辑器和报表)使用C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验DevExpress新旧版本帮助文档下载欢迎进QQ qun获取169725316在上一次主要更新(v23.2)中DevExpress修改了元素结构来提高屏幕阅读器的兼容性为以下DevExpress Blazor UI组件添加了替代文本描述和WAI-ARIA角色/属性Grid网格Data Editors数据编辑器TreeViewToolbar工具栏Menu 和 Context Menu菜单和上下文菜单同时还为以下Blazor UI组件引入了键盘导航和快捷方式Grid网格Calendar日历Toolbar工具栏Menu菜单Context Menu上下文菜单这些与可访问性相关的功能是“开箱即用”的您还可以在代码中扩展可访问性。例如您可以为单个编辑器和控件内部元素指定可用的描述。编辑器的可访问标签由于应用程序的设计应用程序中的编辑器可能不需要标签。然而这可能会在可访问性评估期间导致警告并使使用屏幕阅读器进行回复的用户更加困难。您可以添加一个隐藏的标签它可以被屏幕阅读器软件读取但不会显示在页面上来解决这个用例。使用以下选项当中的一个将次操作引入受​​​​​​​DevExpress驱动的Blazor应用程序创建一个单独的标签向编辑器添加可访问的信息。label forlabel1 styledisplay: noneText/label DxTextBox InputIdlabel1/直接对编辑器应用aria-label属性。DxTextBox aria-labelText /在这两种情况下编辑器都将使用指定的aria-label属性呈现输入元素该属性可以被屏幕阅读器读取和读出。div ... div ... div input aria-labelText ... /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.; }