Accessibility in Vue Toast component
16 Mar 20231 minute to read
The toast component has been designed with WAI-ARIA specifications in mind by applying the prompt WAI-ARIA roles, states, and properties with the keyboard support. It helps users who use assistive WAI-ARIA accessibility support, which is achieved using attributes.
It provides information about the elements in a document for assistive technology.
The toast component implements the keyboard navigation support by using the following WAI-ARIA practices and is tested in major screen readers.
ARIA attributes
Class | Description |
---|---|
role | alert: Identifies the element as a container when alert content will be added or updated. |
<template>
<div id='app'>
<ejs-toast ref='elementRef' timeOut=0 id='element' title='Matt sent you a friend request' content='You have a new friend request yet to accept'></ejs-toast>
</div>
</template>
<script>
import Vue from "vue";
import { ToastPlugin, Toast } from "@syncfusion/ej2-vue-notifications";
Vue.use(ToastPlugin);
export default {
name: 'app',
mounted: function() {
this.$refs.elementRef.show();
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>