Accessibility in Angular Progress button component
14 Nov 20222 minutes to read
ARIA attributes
The web accessibility makes web content and web applications more accessible for people with disabilities. Mostly, it helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies. The ProgressButton provides a built-in compliance with WAI-ARIA
specifications. The WAI-ARIA
support is achieved using the aria-label
, aria-valuemin
, aria-valuemax
, and aria-valuenow
attributes in the ProgressButton. It helps by providing information about the widget for assistive technology in the screen readers.
Properties | Functionality |
---|---|
aria-label | Indicates the text content of the ProgressButton. |
aria-valuemin | Indicates the minimum value for the ProgressButton. |
aria-valuemax | Indicates the maximum value for the ProgressButton. |
aria-valuenow | Indicates the current value for the ProgressButton. |
Keyboard interaction
Keyboard shortcuts | Actions |
Enter/Space | Starts the progress. |
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To render progress button. -->
<button ejs-progressbutton content='Spin Left'></button>`
})
export class AppComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ProgressButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);