Accessibility Features Overview
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
$(function(){ $("#progressBarContainer").dxProgressBar({ elementAttr: { 'aria-live': 'polite', 'aria-describedby': 'status', }, onContentReady: ({ element }) => { $(element).find('.dx-progressbar-status').attr('id', 'status'); } }); });
Angular
<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
<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
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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.