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 meets a variety of Section 508 and WCAG 2.x compliance standards. Known exceptions:
| Section 508 criteria | WCAG 2.x criteria | Exception description |
|---|---|---|
| 501 (Web)(Software) 504.2 (Authoring Tool) 602.3 (Support Docs) |
1.4.3 Contrast (Minimum) (Level AA) 1.4.11 Non-text Contrast (Level AA 2.1 and 2.2) |
ProgressBar does not support Windows High Contrast themes. |
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