Reputation: 1547
I'm working on some simple tables and trying to make them accessible.
During testing, NVDA is reading the caption
out twice, which is very annoying. On the second pass through it says "caption" at a couple of seemingly random places as well, which makes it even more annoying.
Is there any way to force the caption
to only be read once?
Here is the html:
<table>
<caption>
<h4>
Skilled nursing facility care
<sup aria-hidden="true">1</sup>
<span class="sr-only">
<em>footnote 1 begin</em>
A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
<em>footnote 1 end</em>
</span>
</h4>
<p>
You must meet Medicare’s requirements including three inpatient hospital days, prior to entering a Medicare-approved skilled nursing facility within 30 days
</p>
</caption>
<thead>
<tr>
<th scope="col" class="cell-no-bkg"></th>
<th scope="col">Medicare pays</th>
<th scope="col">Plan pays</th>
<th scope="col">You pay</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<ol aria-hidden="true">
<li>
A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
</li>
<li>
Notice: When your Medicare Part A hospital benefits are exhausted, the insurer stands in place of Medicare and will
pay whatever amount Medicare would have paid up to an additional 365 days as provided in the policy’s “core benefits.”
During this time, the hospital is prohibited from billing you for the balance based on any difference between its billed
charges and the amount Medicare would have paid.
</li>
</ol>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="th-in-body">
<p>First 20 days</p>
</th>
<td>
<p>All approved amounts</p>
</td>
<td>
<p>$0</p>
</td>
<td>
<p>
$0
<sup aria-hidden="true">1</sup>
<span class="sr-only">
<em>footnote 1 begin</em>
A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
<em>footnote 1 end</em>
</span>
</p>
</td>
</tr>
<tr>
<th scope="row" class="th-in-body">
<p>21st through 100th day</p>
</th>
<td>
<p>All but $200 per day</p>
</td>
<td>
<p>$0</p>
</td>
<td>
<p>
Up to $200
<sup aria-hidden="true">2</sup>
<span class="sr-only">
<em>footnote 2 begin</em>
Notice: When your Medicare Part A hospital benefits are exhausted, the insurer stands in place of Medicare and will
pay whatever amount Medicare would have paid up to an additional 365 days as provided in the policy’s “core benefits.”
During this time, the hospital is prohibited from billing you for the balance based on any difference between its billed
charges and the amount Medicare would have paid.
<em>footnote 2 end</em>
</span>
</p>
</td>
</tr>
<tr>
<th scope="row" class="th-in-body">
<p>101st day and after</p>
</th>
<td>
<p>$0</p>
</td>
<td>
<p>$0</p>
</td>
<td>
<p>All costs</p>
</td>
</tr>
</tbody>
</table>
I can create a fake caption and have it read out only once but I'm losing the semantics of a caption
element here.
The following table is exactly the same as the one above except for:
The leading div (my fake caption).
aria-describedby
on the table to tie it to my fake caption.
aria-hidden
on the table caption
element.
<div id="table1-caption" hidden>
<h4>
<em>this fake hidden caption will only read out once</em>
Skilled nursing facility care
<em>footnote 1 begin</em>
A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
<em>footnote 1 end</em>
</h4>
<p>
You must meet Medicare’s requirements including three inpatient hospital days, prior to entering a Medicare-approved skilled nursing facility within 30 days
</p>
</div>
<table aria-describedby="table1-caption">
<caption aria-hidden="true">
<h4>
Skilled nursing facility care
<sup aria-hidden="true">1</sup>
<span class="sr-only">
<em>footnote 1 begin</em>
A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
<em>footnote 1 end</em>
</span>
</h4>
<p>
You must meet Medicare’s requirements including three inpatient hospital days, prior to entering a Medicare-approved skilled nursing facility within 30 days
</p>
</caption>
<thead>
<tr>
<th scope="col" class="cell-no-bkg"></th>
<th scope="col">Medicare pays</th>
<th scope="col">Plan pays</th>
<th scope="col">You pay</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<ol aria-hidden="true">
<li>
A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
</li>
<li>
Notice: When your Medicare Part A hospital benefits are exhausted, the insurer stands in place of Medicare and will
pay whatever amount Medicare would have paid up to an additional 365 days as provided in the policy’s “core benefits.”
During this time, the hospital is prohibited from billing you for the balance based on any difference between its billed
charges and the amount Medicare would have paid.
</li>
</ol>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="th-in-body">
<p>First 20 days</p>
</th>
<td>
<p>All approved amounts</p>
</td>
<td>
<p>$0</p>
</td>
<td>
<p>
$0
<sup aria-hidden="true">1</sup>
<span class="sr-only">
<em>footnote 1 begin</em>
A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
<em>footnote 1 end</em>
</span>
</p>
</td>
</tr>
<tr>
<th scope="row" class="th-in-body">
<p>21st through 100th day</p>
</th>
<td>
<p>All but $200 per day</p>
</td>
<td>
<p>$0</p>
</td>
<td>
<p>
Up to $200
<sup aria-hidden="true">2</sup>
<span class="sr-only">
<em>footnote 2 begin</em>
Notice: When your Medicare Part A hospital benefits are exhausted, the insurer stands in place of Medicare and will
pay whatever amount Medicare would have paid up to an additional 365 days as provided in the policy’s “core benefits.”
During this time, the hospital is prohibited from billing you for the balance based on any difference between its billed
charges and the amount Medicare would have paid.
<em>footnote 2 end</em>
</span>
</p>
</td>
</tr>
<tr>
<th scope="row" class="th-in-body">
<p>101st day and after</p>
</th>
<td>
<p>$0</p>
</td>
<td>
<p>$0</p>
</td>
<td>
<p>All costs</p>
</td>
</tr>
</tbody>
</table>
What's the proper thing to do here regarding the caption being read out twice where the caption is not a simple text label but has some text behind it, both in a footnote and a description? Using the native caption
element seems to be a pretty poor experience in NVDA.
Upvotes: 0
Views: 422