Screen Reader Reads Column Names Hundreds of Times

Question

I'm creating an ngx-datatable with clickable rows that expand to give more details. It works wonderfully, except for screen readers. When the screen reader hits (for example) the column header 'Document Name' it goes crazy and reads it hundreds of times. Obviously I only want it to be read once. My suspicion is that it's reading all of the table headers for each row.

I've read a ton of articles, but none seem to address this particular situation.

<div *ngIf="loggedInUser" class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Docs for {{loggedInUser.Customer.Name}}</h3>
  </div>
  <div class="panel-body">
    <ngx-datatable #myTable
                   class='material expandable'
                   [columnMode]="'force'"
                   [headerHeight]="50"
                   [footerHeight]="50"
                   [rows]='rows'
                   [rowHeight]="'auto'"
                   [scrollbarH]="true"
                   [limit]="10">
      <!-- Row Detail Template -->
      <ngx-datatable-row-detail [rowHeight]="'auto'" #myDetailRow (toggle)="onDetailToggle($event)">
        <ng-template let-row="row" ngx-datatable-row-detail-template>
          <div style="padding-left:35px;">
            <img alt="user photo" [src]="row.imgurl" style="height:75px; width:75px;"/> {{row.firstname}} {{row.lastname}}
          </div>
          <ngx-datatable class="material expandable"
                         [columnMode]="'force'"
                         [headerHeight]="50"
                         [footerHeight]="50"
                         [rows]="row.documents"
                         [rowHeight]="'auto'"
                         [scrollbarH]="true"
                         [limit]="20">
            <ngx-datatable-column name="documentnameid">
              <ng-template let-column="column" ngx-datatable-header-template>
                <strong>Document Name</strong>
              </ng-template>
              <ng-template let-value="value" ngx-datatable-cell-template>
                <span class="link-look-a-like" (click)="openPDF(value[0])">{{value[1]}}</span>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="datesubmitted">
              <ng-template let-column="column" ngx-datatable-header-template>
                <strong>Date Submitted</strong>
              </ng-template>
              <ng-template let-value="value" ngx-datatable-cell-template>
                {{value}}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="documenttype">
              <ng-template let-column="column" ngx-datatable-header-template>
                <strong>Document Type</strong>
              </ng-template>
              <ng-template let-value="value" ngx-datatable-cell-template>
                {{value}}
              </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>
        </ng-template>
      </ngx-datatable-row-detail>
      <!-- Column Templates -->
      <ngx-datatable-column [width]="50"
                            [resizeable]="false"
                            [sortable]="true"
                            [draggable]="false"
                            [canAutoResize]="false">
        <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template >
          <a
              href="javascript:void(0)"
              [class.datatable-icon-right]="!expanded"
              [class.datatable-icon-down]="expanded"
              title="Expand/Collapse Row. Press tab to move to next row."
              (click)="toggleExpandRow(row)"
            >
            </a>
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="displayname">
        <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
          <span (click)="sort()"><strong>Full Name</strong></span>
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{value}}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="officename">
        <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
          <span (click)="sort()"><strong>Office</strong></span>
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{value}}
        </ng-template>
      </ngx-datatable-column>
    </ngx-datatable>
  </div>

  <div *ngIf="dataLoadInProgress">
    <div class="overlay"></div>
    <div class="data-load-in-progress-spinner-container">
      <spinner color="primary" class="data-load-in-progress-spinner" [size]="100"></spinner>
    </div>
  </div>
</div>

I'm hoping this is something simple like the format of the templates, or something else I've messed up and someone might spot it. Otherwise getting input on any other experiences with screen readers and ngx-datatable would be helpful.

Thanks!

Got it! The answer was just to wrap the headers in a div, so instead of just <strong>blah</strong, we need <div><strong>blah</strong</div> — Scott Cantrell

Scott Cantrell Scott Cantrell · Accepted Answer · 2019-08-13T17:49:28

0

votes

Got it! The answer was just to wrap the headers in a div, so instead of just blahblah

Screen Reader Reads Column Names Hundreds of Times

1 Answers