無障礙

---

立即下載Kendo UI for Angular

Kendo UI for Angular ButtonGroup組件是對WCAG 2.1 AA和Section 508兼容的。該組件還遵循WAI-ARIA最佳實踐來實現(xiàn)其組件角色的鍵盤導(dǎo)航，并針對常見的屏幕閱讀器進行了測試。

由于庫的豐富特性集和某些組件的復(fù)雜性，配置選項的特定組合可能導(dǎo)致無法訪問的組件呈現(xiàn)。對應(yīng)用于Kendo UI for Angular組件的任何修改進行徹底的測試，以確保它們繼續(xù)符合所需的可訪問性標準。

下面的示例演示了ButtonGroup組件的可訪問性合規(guī)，在新窗口中打開示例，使用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組件的所有相關(guān)內(nèi)部元素都具有aria屬性和角色及其各自的值，這是符合WCAG 2.1要求的。

Section 508

ButtonGroup符合Section 508要求。

靜態(tài)分析程序

用于自動化測試的工具是Axe Core。

屏幕閱讀器