JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Accessibility in JavaScript (ES5) ProgressButton control

23 Mar 2023 / 1 minute to read

ARIA attributes

The web accessibility makes web content and web applications more accessible for people with disabilities. Mostly, it helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies. The ProgressButton provides a built-in compliance with WAI-ARIA specifications. The WAI-ARIA support is achieved using the aria-label, aria-valuemin, aria-valuemax, and aria-valuenow attributes in the ProgressButton. It helps by providing information about the widget for assistive technology in the screen readers.

Properties Functionality
aria-label Indicates the text content of the ProgressButton.
aria-valuemin Indicates the minimum value for the ProgressButton.
aria-valuemax Indicates the maximum value for the ProgressButton.
aria-valuenow Indicates the current value for the ProgressButton.

Keyboard interaction

Keyboard shortcuts Actions
Enter/Space Starts the progress.
Source
Preview
index.js
index.html
Copied to clipboard
// Initialize ProgressButton component
var progressBtn = new ej.splitbuttons.ProgressButton({content: 'Spin Left', enableProgress: true});

// Render initialized ProgressButton.
progressBtn.appendTo('#progressbtn');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 ProgressButton</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This demo for Essential JS2 Progress button has progress indicator and spinner. It supports texts, icons, styles, sizes, positions, and its customization.">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button id="progressbtn"></button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Previous
Next