HTML modal <dialog> reading the whole content

I would like to use the <dialog> tag to show a date picker popup and I'm trying to make it accessible. My hope was to reduce the effort implementing an accessible dialog (e.g. focus trap, aria attributes, backdrop).

With NVDA - upon opening the date picker - it reads the initially focused element (the selected or current date) but after that it reads the full dialog. This is bad because it lasts way too long to be handy. It reads all elements in the dialog including the whole table with all cells.

What's the intention behind this? Can I "prevent" reading the whole dialog?

Here is my HTML (CSS omitted):

<dialog aria-label="Date chooser" open="">
  <div>
    <button type="button" aria-label="Previous year">
      <i class="bi bi-chevron-double-left"></i>
    </button>
    <button type="button" aria-label="Previous month">
      <i class="bi bi-chevron-left"></i>
    </button>
    <div id="date-input-chooser-monthyear-d1">Januar 2025</div>
    <button type="button" aria-label="Next month">
      <i class="bi bi-chevron-right"></i>
    </button>
    <button type="button" aria-label="Next year">
      <i class="bi bi-chevron-double-right"></i>
    </button>
  </div>
  <table role="grid" aria-labelledby="date-input-chooser-monthyear-d1">
    <thead>
      <tr>
        <th></th>
        <th scope="col">
          <span aria-hidden="true">Mo</span><span class="visually-hidden">Montag</span>
        </th>
        <th scope="col">
          <span aria-hidden="true">Di</span><span class="visually-hidden">Dienstag</span>
        </th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">
          <small>1</small>
        </th>
        <td aria-selected="false">
          <div class="btn btn-outline-secondary" tabindex="-1">30</div>
        </td>
        <td aria-selected="false">
          <div class="btn btn-outline-secondary" tabindex="-1">31</div>
        </td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</dialog>

EDIT:

Here's a simple sample reproducing the issue:

<!doctype html>
<html lang="en">
  <body>
    <main>
      <h1>Repro</h1>
      <dialog>
        <h2>Test</h2>
        <button>Previous</button>
        <button autofocus>Next</button>

        <table>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
          <tr>
            <td>Cell1</td>
            <td>Cell2</td>
          </tr>
        </table>
      </dialog>
      <button onclick="document.querySelector('dialog').showModal()">Open</button>
    </main>
  </body>
</html>

Clicking on the button "Open" or activating the button using keyboard reads almost everything in the dialog with NVDA. The "Previous" button is ignored, I don't know why. Protocol:

dialog
Next  button  
button    Next  table  with 2 rows and 2 columns  row 1  column 1  Col1
column 2  Col2
row 2  Col1  column 1  Cell1
Col2  column 2  Cell2

Reference:

read this initially but they don't use <dialog>:

What's the intention behind this? Can I "prevent" reading the whole dialog?

Here is my HTML (CSS omitted):

<dialog aria-label="Date chooser" open="">
  <div>
    <button type="button" aria-label="Previous year">
      <i class="bi bi-chevron-double-left"></i>
    </button>
    <button type="button" aria-label="Previous month">
      <i class="bi bi-chevron-left"></i>
    </button>
    <div id="date-input-chooser-monthyear-d1">Januar 2025</div>
    <button type="button" aria-label="Next month">
      <i class="bi bi-chevron-right"></i>
    </button>
    <button type="button" aria-label="Next year">
      <i class="bi bi-chevron-double-right"></i>
    </button>
  </div>
  <table role="grid" aria-labelledby="date-input-chooser-monthyear-d1">
    <thead>
      <tr>
        <th></th>
        <th scope="col">
          <span aria-hidden="true">Mo</span><span class="visually-hidden">Montag</span>
        </th>
        <th scope="col">
          <span aria-hidden="true">Di</span><span class="visually-hidden">Dienstag</span>
        </th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">
          <small>1</small>
        </th>
        <td aria-selected="false">
          <div class="btn btn-outline-secondary" tabindex="-1">30</div>
        </td>
        <td aria-selected="false">
          <div class="btn btn-outline-secondary" tabindex="-1">31</div>
        </td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</dialog>

EDIT:

Here's a simple sample reproducing the issue:

<!doctype html>
<html lang="en">
  <body>
    <main>
      <h1>Repro</h1>
      <dialog>
        <h2>Test</h2>
        <button>Previous</button>
        <button autofocus>Next</button>

        <table>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
          <tr>
            <td>Cell1</td>
            <td>Cell2</td>
          </tr>
        </table>
      </dialog>
      <button onclick="document.querySelector('dialog').showModal()">Open</button>
    </main>
  </body>
</html>

Clicking on the button "Open" or activating the button using keyboard reads almost everything in the dialog with NVDA. The "Previous" button is ignored, I don't know why. Protocol:

dialog
Next  button  
button    Next  table  with 2 rows and 2 columns  row 1  column 1  Col1
column 2  Col2
row 2  Col1  column 1  Cell1
Col2  column 2  Cell2

Reference:

read this initially but they don't use <dialog>: https://www.w3./WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/#support-notice-header

Share Improve this question edited Jan 19 at 8:48 asked Jan 18 at 9:42 Steffen Harbich 2,7592 gold badges43 silver badges77 bronze badges

1 Can you add the part of code corresponding to the date currently selected ? Or better, provide a test page ? Quickly, I don't see anything wrong explaining the issue with the part of code posted. Thank you. – QuentinC Commented Jan 18 at 22:40
@QuentinC I added a simple example. Thank you for having a look at it. – Steffen Harbich Commented Jan 19 at 8:49
Thank you. Your example works perfectly with Jaws, and I can well reproduce the problem with NVDA. I have no precise idea why. My guess so far is that the autofocus attribute isn't well recognized, so the button isn't focused. Maybe you can try to focus the button shortly after the dialog is open instead (e.g. setTimeout(()=>document.getElementById('xyz?).focus(), 10). IF this works, I will post a true answer. – QuentinC Commented Jan 19 at 18:30
You don't need to try to fix this "problem". This is just the way NVDA works. People who use NVDA are used to this and they can stop the announcement with the Ctrl key. In general, you should not try to "fix" default screen reader behavior. If users are used to a certain behavior then it may be confusing if you mess with that. And there is a chance your "fix" is going to make things worse. – Roland McLeod Commented Jan 19 at 21:49
@QuentinC the delayed focus stops NVDA before it even announces that it is a dialog, so the listener wouldn't even know that a dialog opened. – Steffen Harbich Commented Jan 21 at 16:43

| Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

Although NVDA is reading the whole dialog by default, it only read the focused role="gridcell" once I implemented it correctly. The tabindex attribute must be present on the grid cell and td is role="gridcell" by default.

See also: https://www.w3./WAI/ARIA/apg/patterns/grid/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

HTML modal <dialog> reading the whole content - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)