• Media Type Web > Custom Controls > Dialogs
  • State Active
  • Advisory No

Dialogs such as modal dialogs represent a state of a web page and typically have a discrete purpose. These dialogs usually have a visual title and convey a purpose such as soliciting a response from the user. Because the dialogs title is often visually apparent but may be difficult to locate using assistive technology such as screen readers, a title must be provided through an accessible manner to ensure that the purpose of the page's current state (with the modal dialog) is understood.

Compliant Example

<div id="myDialog" role="region"
aria-labelledby="dialog_title" aria-describedby="desc">
  <button onclick="closeDialog();" aria-label="Close Personal
Information dialog">X</button>
  <h2 id="dialog_title" tabindex="-1">Personal
Information</h2>
  <p id="desc">Dialog text</p>
  ...
  <input value="Submit" type="submit">
</div>

Non-Compliant Example

<div>
<div>Registration Form</div>
<div><label for="f1">First Name:</label<input
id="f1" type="text" /></div>
...
</div>

Developers must either change the containing web page's title element (when the dialog lacks a visual title) to a terse description of the dialog purpose, or use an explicit heading element as the dialog title (preferably h1 or h2) (when a visual dialog title is present) to provide a title for the dialog. In addition, any heading should be referenced via aria-labelledby from the element representing the dialog, e.g. element with role of dialog or role of region. In many cases the dialog's title does not already appear as an explicit heading, and needs to be tagged with a heading element to meet other accessibility best practices.

When using ARIA role dialog or role of region, developers must provide a dialog label using aria-label or aria-labelledby attributes. The dialog's aria-labelledby should not reference the entire dialog itself as this can cause double speaking by some screen readers. The accessible name of the dialog should be the dialog title and not the dialog's contents.

Organization Standards

  • Section 508 and 255 (Revised 2017)
    • Chapter 3: Functional Performance Criteria
      • 302.1 Without Vision
      • 302.9 With Limited Language, Cognitive, and Learning Abilities
  • WCAG 2.0 Level A
    • 1.3.1 Information and relationships conveyed through presentation
    • 2.4.2 Page Titled
  • WCAG 2.1 Level A
    • 1.3.1 Info and Relationships
    • 2.4.2 Page Titled

Other Mapped Standards

  • § 508-1194.21 VA Testing Checklist - Software Applications and Operating Systems
    • (d) Information about a user interface element must be textually available
      • (d.6) Is a meaningful and descriptive title assigned to every window (including dialog boxes)?
  • § 508-1194.31 VA Testing Checklist - Web Functional performance criteria
    • (a) At least one mode of operation and information retrieval that does not require user vision shall be provided, or support for assistive technology used by people who are blind or visually impaired shall be provided.
      • (a.5) Are means provided for users to easily determine their location on a web site or within a web application?
        • (a.5.a) Are informative, context-sensitive means of determining page title provided?
  • § 508-1194.31 Functional performance criteria
    • (a) Ensure access for blind and visually impaired
  • 47 CFR 14. Advanced Communication Services
    • 47 CFR 14.21 Performance Objectives
      • (b) Accessible
        • (b)(1) Input, control, and mechanical functions shall be locatable, identifiable, and operable
          • (b)(1)(i) Operable without vision
          • (b)(1)(x) Operable with limited cognitive skills
        • (b)(2) All information necessary to operate and use the product
          • (b)(2)(i) Availability of visual information
          • (b)(2)(ii) Availability of visual information for low vision users
  • BITV 2.0 (Priority I)
    • 1.3.1 Informationen und Beziehungen
    • 2.4.2 Webseiten-Titel
  • EN 301 549 v3.2.1
    • Chapter 4: Functional Performance
      • 4.2 Functional Performance Statements (FPS)
        • 4.2.1 Usage without vision
        • 4.2.2 Usage with limited vision
        • 4.2.7 Usage with limited manipulation or strength
        • 4.2.10 Usage with limited cognition
    • Chapter 9: Web
      • 9.1 Perceivable
        • 9.1.3 Adaptable
          • 9.1.3.1 Info and relationships
      • 9.2 Operable
        • 9.2.4 Navigable
          • 9.2.4.2 Page titled
  • JIS X 8341-3: 2004 - Technical Standards Subpart 5
    • 5.2 (e) Provide appropriate titles for pages
  • Mobile Web 1.0
    • 5.4 Page Definition
      • 5.4.1 Title
  • Telecommunications Act Accessibility Guidelines
    • 1193.41 Input, control, and mechanical functions.
      • (a) Operable without vision. Provide at least one mode that does not require user vision.
      • (i) Operable with limited cognitive skills. Provide at least one mode that minimizes the cognitive, memory, language, and learning skills required of the user.
    • 1193.43 Output, display, and control functions.
      • (a) Availability of visual information. Provide visual information through at least one mode in auditory form.
      • (b) Availability of visual information for low vision users. Provide visual information through at least one mode to users with visual acuity between 20/70 and 20/200 without relying on audio.
  • WCAG 1.0 Priority 2
    • 13.2 Provide metadata for pages
  • WCAG 2.2 Level A
    • 1.3.1 Info and Relationships
    • 2.4.2 Page Titled

  • Severity

    7 (yellow)
    in range of 1 to 10

  • Noticeability

    3 ()
    in range of 1 to 10

  • Tractability

    4 ()
    in range of 1 to 10