CODEWITHSUNDEEP
htmldialogaccessibilitynvda
Steffen Harbich
Steffen Harbich

Reputation: 2749

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).

screenshot from my date chooser dialog showing a popup with calendar

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:

Upvotes: 0

Views: 50

Answers (1)

Steffen Harbich
Steffen Harbich

Reputation: 2749

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.org/WAI/ARIA/apg/patterns/grid/

Upvotes: 0

Related Questions