javahtmljaws-screen-reader

Jaws Is reading partial data on insert + down key press


Table contains 2 thread JAWS read only 1st thread and body it won't read next thread it direcly skip that part, how to resolve this . when i use insert+down arrow key it should read all data one by one.

<div class="span16 m-t-2x width-100">
                            <table class="table planValResultsTbl" id="planValResultsTbl">
                                <thead>
                                <tr>
                                    <th class="pad-table align-left">Member</th>
                                    <th class="pad-table align-left">Age</th>
                                    <th class="pad-table align-left">DOB</th>
                                    <th class="pad-table align-left">Coverage Start Date</th>
                                    <th class="pad-table align-left">Non-Capped Premium</th>
                                    <th class="pad-table align-left">Capped Premium</th>
                                </tr>
                                </thead>
                                <tbody>
                                
                                    <tr align="char">
                                        <td class="pad-table">
                                            Primary Applicant</td>
                                        <td class="pad-table align-left">28</td>
                                        <td class="pad-table align-left">
                                            08/08/1994
                                        </td>
                                        <td class="pad-table align-left">
                                            08/15/2022
                                        </td>
                                        <td class="pad-table align-left noncapped" style="text-align: left">$164.00</td>
                                        <td class="pad-table align-left capped" style="text-align: left">$164.00</td>
                                    </tr>
                                
                                </tbody>
                                <thead>
                                <tr align="char">
                                    <th colspan="6" class="pad-table total">
                                        Capped Premium Total   &emsp;
                                        <span class="cappedPremiumCurrencyVal">$164.00</span></th>
                                </tr>
                                </thead>
                            </table>
                        </div>

Solution

  • You can't add more than one <thead> in a single <table> element (see this previous SO question and the W3C HTML <table> spec for reference).

    You need to place your last row either inside the <tbody> element, or use the <tfoot> element instead.

    For example:

    <div class="span16 m-t-2x width-100">
        <table class="table planValResultsTbl" id="planValResultsTbl">
            <thead>
                <tr>
                    <th class="pad-table align-left">Member</th>
                    <th class="pad-table align-left">Age</th>
                    <th class="pad-table align-left">DOB</th>
                    <th class="pad-table align-left">Coverage Start Date</th>
                    <th class="pad-table align-left">Non-Capped Premium</th>
                    <th class="pad-table align-left">Capped Premium</th>
                </tr>
            </thead>
            <tbody>
                <tr align="char">
                    <td class="pad-table">Primary Applicant</td>
                    <td class="pad-table align-left">28</td>
                    <td class="pad-table align-left">08/08/1994</td>
                    <td class="pad-table align-left">08/15/2022</td>
                    <td class="pad-table align-left noncapped" style="text-align: left">$164.00</td>
                    <td class="pad-table align-left capped" style="text-align: left">$164.00</td>
                </tr>
            </tbody>
            <tfoot>
                <tr align="char">
                    <th class="pad-table total" colspan="6">Capped Premium Total &emsp; <span class="cappedPremiumCurrencyVal">$164.00</span></th>
                </tr>
            </tfoot>
        </table>
    </div>
    

    I tested the code above using Chrome and JAWS 2022 and it read the whole table using Insert + Down Arrow, including the bottom row.