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 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
$(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.