Accessibility in ASP.NET MVC Dialog

27 Aug 20266 minutes to read

The Dialog component follows the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Dialog component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support AA
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The Dialog is characterized by complete ARIA accessibility support, which makes it accessible to screen readers and other assistive technology devices. This component is designed with reference to the guidelines given in WAI-ARIA Accessibility Practices.

The Dialog control uses the dialog role and the following ARIA properties on its element based on its state.

Property Functionalities
aria-describedby It indicates the Dialog content description is notified to the user through assistive technologies.
aria-labelledby The Dialog title is notified to the user through assistive technologies.
aria-modal For modal dialogs its value is true and for non-modal dialogs its value is false
aria-grabbed Enable the draggable Dialog and starts dragging it is value is true and stopping the drag its value is false

Keyboard interaction

The keyboard interaction of the Dialog control is designed based on WAI-ARIA Practices described for Dialog. Users can use the following shortcut keys to interact with the Dialog.

Keyboard shortcuts Actions
Esc Closes the Dialog. This functionality can be controlled by using `closeOnEscape`
Enter When a Dialog button or any input element (except a text area) is in focus, pressing the Enter key triggers the click event associated with the primary button. The Enter key does not trigger the primary button when the Dialog content contains a text area with initial focus.
Ctrl + Enter When the Dialog content contains a text area and it is in focus, pressing Ctrl+Enter calls the click event function associated with the primary button.
Tab Moves focus between focusable elements inside the Dialog.
Shift + Tab Moves focus to the previous focusable element inside the Dialog. When the first focusable element has focus, Shift+Tab moves focus to the last focusable element. 
<div id='container' style="height:400px;">
    @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
    @Html.EJS().Dialog("dialog").Header("Feedback").ShowCloseIcon(true).Target("#container").Width("400px").Buttons(btn=> {
    btn.Click("dlgButtonClick").ButtonModel(ViewBag.DialogButtons).Add();
}).Height("300px").ContentTemplate(@<form>
    <div class='form-group'>
        <label for='email'>Email:</label><input type='email' class='form-control' id='email'>
    </div><div class='form-group'>
    </div><div class='form-group'>
        <label for='comment'>Comments:</label><textarea style='resize: none;' class='form-control' rows='5' id='comment'></textarea>
    </div>
</form>).Render()
</div>


<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>
public class HomeController : Controller
{
    public class ButtonModel
    {
        public string content { get; set; }
        public string cssClass { get; set; }
    }

    public ActionResult Index()
    {
        ViewBag.DialogButtons = new ButtonModel() { cssClass = "e-flat", content = "Submit" };
        return View();
    }
}

Ensuring accessibility

The Dialog component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Dialog component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Dialog component with accessibility tools.

See also