Indicate the beginning and end of dialog boxes

Description

Location: Any page that has a Support tab along the left edge of the page e.g. https://courses.edx.org/dashboard (click on Support tab on the side of the page)

Severity: 8

Description: [12/19/2016] - Not Fixed
==========================================================
While users are alerted that they have entered into a dialog, there is no programmatic indication where the beginning and end of the dialog are, at present.

Without this indication, screen reader users may be unable to determine what exactly is contained within and not within the simulated modal dialog.

Pattern: None

Auditor Note: Developers must provide a programmatic indication of the beginning and end of the modal dialog. This can most easily be obtained by adding off-screen text to indicate the beginning and end. Additionally, developers can use aria-hidden to hide the other contents of the page. Aria-modal="true" should be added to ensure there is programmatic indication that this dialog is modal.

Internal Note: Pro tip, on the div that is the immediate child of the div with role=dialog, add a role="group" with an aria-labelledby that references the id of the Heading that serves as the dialog box title. If the dialog box doesn't have a title, you can use aria-label="modal dialog". Screen readers announce the beginning and the end of modals, so this would serve as just the notification the user needs.

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Status

Assignee

Christopher Lee

Reporter

Mark Sadecki

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Story Points

2

Epic Link

Sprint

None

Due date

2017/12/08

Priority

CAT-2
Configure