无障碍

立即下载Kendo UI for Angular

Kendo UI for Angular ButtonGroup组件是对WCAG 2.1 AA和Section 508兼容的。该组件还遵循WAI-ARIA最佳实践来实现其组件角色的键盘导航，并针对常见的屏幕阅读器进行了测试。

由于库的丰富特性集和某些组件的复杂性，配置选项的特定组合可能导致无法访问的组件呈现。对应用于Kendo UI for Angular组件的任何修改进行彻底的测试，以确保它们继续符合所需的可访问性标准。

下面的示例演示了ButtonGroup组件的可访问性合规，在新窗口中打开示例，使用Axe Core或其他辅助工具对其进行评估。

app.component.ts：

import { Component } from '@angular/core';
import { SVGIcon, boldIcon, italicIcon, underlineIcon } from '@progress/kendo-svg-icons';

@Component({
selector: 'my-app',
template: `
<kendo-buttongroup>
<button kendoButton [toggleable]="true" [svgIcon]="boldSVG">Bold</button>
<button kendoButton [toggleable]="true" [svgIcon]="italicSVG">Italic</button>
<button kendoButton [toggleable]="true" [svgIcon]="underlineSVG">Underline</button>
</kendo-buttongroup>
`
})
export class AppComponent {
public boldSVG: SVGIcon = boldIcon;
public italicSVG: SVGIcon = italicIcon;
public underlineSVG: SVGIcon = underlineIcon;
}

ap

p.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
export class AppModule {}

main.ts：

import './polyfills';

import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

WAI-ARIA 支持

ButtonGroup组件的所有相关内部元素都具有aria属性和角色及其各自的值，这是符合WCAG 2.1要求的。

Section 508

ButtonGroup符合Section 508要求。

静态分析程序

用于自动化测试的工具是Axe Core。

屏幕阅读器