Quelle est la meilleure façon de coder un tableau HTML avec plusieurs en-têtes entre les lignes ?

Quelle est la meilleure façon de coder un tableau HTML avec plusieurs en-têtes entre les lignes ? J'ai créé un tableau HTML décent. Cependant, lorsque j'essaie d'utiliser le lecteur d'écran pour la conformité 508, le lecteur d'écran lit tous les en-têtes de ligne (en-tête 1, en-tête 2, en-tête 3) lorsque je navigue dans chaque ligne. Existe-t-il un moyen de l'éviter? Qu'est-ce que je rate?

Voici le violon:

https://jsfiddle.net/kq739m28/

<p>Test</p>
<div style=" overflow-x: auto;">
 <table style=" width: 100%;">
 <thead>
 <tr>
 <td>&#160;</td>
 <th>1</th>
 <th>2</th>
 <th>3</th>
 <th>4</th>
 <th>5</th>
 <th>6</th>
 <th>7</th>
 <th>8</th>
 <th>9</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th colspan="10" scope="colgroup" style=" background-color: #e0e0e0; text-align: left;">Header1</th>
 </tr>
 <tr>
 <th style=" font-weight: 400; text-align: left;">dffddf</th>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>&#160;</td>
 <td>&#160;</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 </tr>
 <tr>
 <th style=" font-weight: 400; text-align: left;">fdfdfdf</th>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 </tr>
 <tr>
 <th style=" font-weight: 400; text-align: left;">dffddf</th>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 <td>✓</td>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 </tr>
 <tr>
 <th colspan="10" scope="colgroup" style=" background-color: #e0e0e0; text-align: left;">Header2</th>
 </tr>
 <tr>
 <th style=" font-weight: 400; text-align: left;">5455445</th>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 <td align="center" style=" text-align: center; color: black;">&#160;</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 </tr>
 <tr>
 <th style=" font-weight: 400; text-align: left;">fdfggfgf</th>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 </tr>
 <tr>
 <th colspan="10" scope="colgroup" style=" background-color: #e0e0e0; text-align: left;">Header3</th>
 </tr>
 <tr>
 <th style=" font-weight: 400; text-align: left;">fgggf</th>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>&#160;</td>
 <td>✓</td>
 </tr>
 <tr>
 <th style=" font-weight: 400; text-align: left;">fgggfgf</th>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>✓</td>
 <td>&#160;</td>
 <td>&#160;</td>
 <td>✓</td>
 <td>&#160;</td>
 </tr>
 </table>
</div>

Solution du problème

Vous pouvez faire en sorte que le lecteur d'écran l'ignore.

Méthodes de masquage des lecteurs d'écran : pour masquer le texte d'un lecteur d'écran et l'afficher visuellement, utilisez laaria-hidden attribute et définissez-le sur true. Source de Pluralsight

<p aria-hidden="true">Visible text screen readers should ignore</p>