Accessibility in Vue Breadcrumb component

16 Mar 20232 minutes to read

ARIA attributes

The web accessibility makes web content and web applications more accessible for people with disabilities. It especially helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies. The breadcrumb provides a built-in compliance with WAI-ARIA specifications. The WAI-ARIA support is achieved using the attributes such as aria-labeland aria-disabled. It helps the people with disabilities by providing information about the widget for assistive technology in the screen readers. The breadcrumb component contains the breadcrumb roles.

Properties	Functionality
role	Indicates the type of input element.
aria-label	Indicates the breadcrumb item text.
aria-disabled	Indicates the state of breadcrumb item whether it is disabled.

User interaction with keyboard

Keyboard shortcuts	Actions
Tab	Navigate to the next item and also next item in the popup of menu type overflow.
Shift + Tab	Navigate to the previous item also previous item in the popup of menu type overflow.
Enter key in normal mode	Select the breadcrumb item.
Enter key in collapsed mode	To open the popup of menu type overflow mode when you press enter on collapsed button and It will expand the items of collapsed type overflow mode when you press enter on collapsed button.

app.vue

<template>
<div>
<ejs-breadcrumb :enableNavigation='false'>
    <e-breadcrumb-items>
        <e-breadcrumb-item iconCss= 'e-icons e-home' url= 'https://ej2.syncfusion.com/vue/demos/'></e-breadcrumb-item>
        <e-breadcrumb-item text= 'Components' url= 'https://ej2.syncfusion.com/vue/demos/datagrid/overview'></e-breadcrumb-item>
        <e-breadcrumb-item text= 'Navigations' url= 'https://ej2.syncfusion.com/vue/demos/menu/default'></e-breadcrumb-item>
        <e-breadcrumb-item text= 'Breadcrumb' url= 'https://ej2.syncfusion.com/vue/demos/breadcrumb/default'></e-breadcrumb-item>
    </e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>

<script>
import Vue from 'vue';
import { BreadcrumbPlugin } from "@syncfusion/ej2-vue-navigations";

Vue.use(BreadcrumbPlugin);

export default {
  data: function() {
        return {};
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

body {
    margin-top: 100px;
    text-align: center;
}
</style>