React ProgressBar - Accessibility

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;