無(wú)障礙
Kendo UI for Angular ButtonGroup組件是對(duì)WCAG 2.1 AA和Section 508兼容的。該組件還遵循WAI-ARIA最佳實(shí)踐來(lái)實(shí)現(xiàn)其組件角色的鍵盤(pán)導(dǎo)航,并針對(duì)常見(jiàn)的屏幕閱讀器進(jìn)行了測(cè)試。
由于庫(kù)的豐富特性集和某些組件的復(fù)雜性,配置選項(xiàng)的特定組合可能導(dǎo)致無(wú)法訪問(wèn)的組件呈現(xiàn)。對(duì)應(yīng)用于Kendo UI for Angular組件的任何修改進(jìn)行徹底的測(cè)試,以確保它們繼續(xù)符合所需的可訪問(wèn)性標(biāo)準(zhǔn)。
下面的示例演示了ButtonGroup組件的可訪問(wèn)性合規(guī),在新窗口中打開(kāi)示例,使用Axe Core或其他輔助工具對(duì)其進(jìn)行評(píng)估。
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)分析程序
用于自動(dòng)化測(cè)試的工具是Axe Core。