HelpBot Assistant

How can I help you?

Accessibility in React Toast component

20 Feb 20266 minutes to read

The Toast component follows WCAG 2.2, Section 508, and ADA accessibility standards to ensure notifications are accessible to all users, including those using assistive technologies. Toast notifications are announced to screen readers as live regions, enabling users to receive important updates without requiring focus or interaction.

The accessibility compliance for the Toast component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Not Applicable
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The Toast component implements the WAI-ARIA alert pattern to provide semantic meaning and accessibility features for screen readers and assistive technologies. The component applies proper ARIA roles and states to communicate notification importance and content changes to users with assistive devices.

Attribute Purpose
role="alert" Identifies the Toast as an alert region, signaling important, time-sensitive information to screen readers
aria-live="assertive" Announces toast content immediately when displayed, interrupting other announcements
aria-label Provides an accessible name describing the toast content or purpose

The Toast component has been tested with major screen readers including JAWS, NVDA, and VoiceOver to ensure compatibility and proper announcement of toast notifications.

[Class-component]

import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
    toastInstance;
    toastCreated() {
        this.toastInstance.show();
    }
    render() {
        return (<ToastComponent ref={toast => this.toastInstance = toast} title="Sample Toast Title" content="Sample Toast Content" created={this.toastCreated = this.toastCreated.bind(this)}/>);
    }
}
;
export default App;
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public toastInstance:ToastComponent;

  public toastCreated(): void {
    this.toastInstance.show();
  }

  public render() {
    return (
      <ToastComponent ref={ toast => this.toastInstance = toast!} title="Sample Toast Title" content="Sample Toast Content" created={this.toastCreated = this.toastCreated.bind(this)} />
    );
  }
};
export default App;

[Functional-component]

import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
function App() {
    let toastInstance;
    function toastCreated() {
        toastInstance.show();
    }
    return (<ToastComponent ref={toast => toastInstance = toast} title="Sample Toast Title" content="Sample Toast Content" created={toastCreated.bind(this)}/>);
}
;
export default App;
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

function App() {
    let toastInstance:ToastComponent;
    function toastCreated() {
      toastInstance.show();
    }
    return (
      <ToastComponent ref={ toast => toastInstance = toast!} title="Sample Toast Title" content="Sample Toast Content" created={toastCreated.bind(this)} />
    );
};
export default App;

Ensuring accessibility

The Toast component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Toast component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Toast component with accessibility tools.

See also