Accessibility Features Overview
NOTE
The overall accessibility level of your application depends on the ProgressBar features that you use.
| Accessibility Requirement | Support Level |
|---|---|
| Right-to-Left Support | |
| Keyboard Navigation Support | |
| Screen Reader Support | |
| Contrast Color Theme | |
| Mobile Device Support | |
| Lighthouse Accessibility Validation | |
| Axe Accessibility Validation | |
| WAVE Accessibility Validation | |
| Section 508 Support | |
| WCAG 2.x Support |
- - All component features meet the requirement
- - Some component features may not meet the requirement
- - Accessibility requirement is not supported
Accessibility Standards Compliance
The ProgressBar component complies to all Section 508 and WCAG 2.x standards criteria.
Screen Reader Support
The ProgressBar component supports screen readers and complies to WAI-ARIA standards.
To improve accessibility, use the elementAttr property to specify aria-label for the component.
Not all screen readers pronounce the progress status. To make sure the status is pronounced, add the following aria-* attributes:
jQuery
index.js
$(function(){
$("#progressBarContainer").dxProgressBar({
elementAttr: {
'aria-live': 'polite',
'aria-describedby': 'status',
},
onContentReady: ({ element }) => {
$(element).find('.dx-progressbar-status').attr('id', 'status');
}
});
});Angular
app.component.html
app.component.ts
<dx-progress-bar
[elementAttr]="elementAttr"
(onContentReady)="onContentReady($event)"
>
</dx-progress-bar>
export class AppComponent {
elementAttr = {
'aria-live': 'polite',
'aria-describedby': 'status'
};
onContentReady: ({ element }) => {
element.querySelector('.dx-progressbar-status').setAttribute('id', 'status');
}
}Vue
App.vue
<template>
<DxProgressBar
:element-attr="elementAttr"
@on-content-ready="onContentReady"
/>
</template>
<script>
import { DxProgressBar } from 'devextreme-vue/progress-bar';
export default {
components: {
DxProgressBar,
},
data() {
return {
elementAttr: {
'aria-live': 'polite',
'aria-describedby': 'status',
},
};
},
methods: {
onContentReady({ element }) {
element.querySelector('.dx-progressbar-status').setAttribute('id', 'status');
},
},
};
</script>React
App.js
import React from 'react';
import { ProgressBar } from 'devextreme-react/progress-bar';
function App() {
const elementAttr = {
'aria-live': 'polite',
'aria-describedby': 'status',
};
const onContentReady = ({ element }) => {
element.querySelector('.dx-progressbar-status').setAttribute('id', 'status');
};
return (
<div>
<ProgressBar
elementAttr={elementAttr}
onContentReady={onContentReady}
/>
</div>
);
};
export default App;Feedback