We have a data table in a page and we want screen reader to read that as table. NVDA reads it as a data table by default. But JAWS does not seem to be able to identify the table element and reads the text from left to right row by row without indicating it is a table. I tried adding role="grid" and it did not work. I am wondering if I miss something.
The browser is IE11 and JAWS is 17.0.2727
<table tabindex="0" role="grid">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th aria-hidden="true"></th>
<th>Rate</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>12/19/16</td>
<td>
<span>10:50:09</span> - <span>12/19/16</span> <span>11:05:09</span>
</td>
<td aria-hidden="true"></td>
<td>
<span>54</span><span>mL/hr</span>
</td>
<td>
<span>13.5</span><span>mL</span>
</td>
</tr>
<tr>
<td></td>
<td>
<span>11:05:09</span> - <span>12/19/16</span><span>11:20:09</span>
</td>
<td aria-hidden="true"></td>
<td>
<span>48</span><span>mL/hr</span>
</td>
<td>
<span>12</span><span>mL</span>
</td>
</tr>
</tbody>
</table>
for a datatable:
a caption
th row header and column header cell
Scope or header id attribute to associate cells with the headers in tables
Example:
<table>
<caption>City proper and Metropole area of largest cities in the world</caption>
<tr>
<td> </td>
<th scope="col">Shanghai</th>
<th scope="col">Karachi</th>
<th scope="col">Beijing</th>
</tr>
<tr>
<th scope="row">City proper</th>
<td>24,256,800</td>
<td>23,500,000</td>
<td>21,516,000</td>
</tr>
<tr>
<th scope="row">Metropole area</th>
<td>34,750,000</td>
<td>25,100,000</td>
<td>24,900,000</td>
</tr>
</table>
I have the same issue, that JAWS 2019 is not allowing Cursor navigation in the table cells. Especially cursor up/down in the same column is one of the accessibilty test cases that fails here.
I assume this has something to do with the <thead> and <tbody> elements not expected by the commonly used JAWS table navigation. Only option available is to use TAB/Shift+TAB to step through each cell in a row until the next/previous row can be accessed.
Related
I have some content which does not take up the entire column. so I was trying to postion an image to that side so that it saves some space.
I tried checking for grid layouts or column layout in md but none of it has provided info on how to do it
This is what i am looking for
the code is # here
... thanks
The Markdown table does not support cell merge by default, so you should use HTML table.
And in comment, you said
"Even this time the image took only one row, ..."
in this case just use rowspan.
<table>
<tr>
<td>- Identifying cutomer needs (requirments)</td>
<td rowspan="11">
<img src="https://user-images.githubusercontent.com/74305823/118094261-783e8280-b409-11eb-8f50-8ed0b304fef0.png" width="300"/>
</td>
</tr>
<tr>
<td>- market analysis (requirements)</td>
</tr>
<tr>
<td>- defining goals (requirements)</td>
</tr>
<tr>
<td>- Establishing functions (Prodct concept)</td>
</tr>
<tr>
<td>- Task Specifications (Prodct concept)</td>
</tr>
<tr>
<td>- Conceptualizatoin (Solution concept)</td>
</tr>
<tr>
<td>- Evaluating Alternatives</td>
</tr>
<tr>
<td>- Emnodiment Design</td>
</tr>
<tr>
<td>- Analysis and Optimization</td>
</tr>
<tr>
<td>- Experiment</td>
</tr>
<tr>
<td>- Marketing</td>
</tr>
</table>
EDIT
AS #tarleb said, using <ul>...</ul> tag can be more simple.
<table>
<tr>
<td>
<ul>
<li>Identifying cutomer needs (requirments)</li>
<li>market analysis (requirements)</li>
<li>defining goals (requirements)</li>
<li>Establishing functions (Prodct concept)</li>
<li>Task Specifications (Prodct concept)</li>
<li>Conceptualizatoin (Solution concept)</li>
<li>Evaluating Alternatives</li>
<li>Emnodiment Design</li>
<li>Analysis and Optimization</li>
<li>Experiment</li>
<li>Marketing</li>
</ul>
</td>
<td>
<img src="https://user-images.githubusercontent.com/74305823/118094261-783e8280-b409-11eb-8f50-8ed0b304fef0.png" width="300"/>
</td>
</tr>
</table>
Hi im having a issue with a simple problem. because for some reason i dont find anything wrong with my codes. Seems like my code is not reading my colspan. seems like this problem as been mark as duplicate. but i dont want to specify the width of the table since i want the table to be responsive and i use bootstrap table
<div>
<table class="table table-condensed">
<thead>
<tr class="text-uppercase text-contrail table-dark-head">
<th colspan="3">Spillage</th>
<th>Total</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Material Cost / Kg</td>
<td>
<input></input>
</td>
<td>
<input></input>
</td>
</tr>
<tr>
<td>Spillage at 0.5%</td>
</tr>
</tbody>
</table>
</div>
i put this code inside my template. please see the image for the result. The Total and Remarks should be on the right side. but it end up with balance width.
I have created a table using component nztable from ``ng-zorro`. That table contains a nested table where I want to load data dynamically(REST service call) on click of the expand icon.
I am able to load the data in the nested table but when I expand next row, it is overriding data in the first row with the new result.
As nested table creation is in the loop(ngfor), I am unable to control the data binding to a specific row.
<nz-table #nestedTable [nzData]="displayData" [nzPageSize]="10">
<thead colspan="5">
<tr>
<th nzWidth="4%"nzShowExpand></th>
<th nzWidth="12%">Id</th>
<th nzWidth="10%">Start Time</th>
<th nzWidth="10%">End Time</th>
<th nzWidth="10%">Status</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-data [ngForOf]="nestedTable.data">
<tr>
<td nzShowExpand [(nzExpand)]="data.expand" (click)="getDetails(data)"></td>
<td >{{data.Id}}</td>
<td>{{data.startTime}}</td>
<td>{{data.endTime}}</td>
<td>{{data.status}}</td>
</tr>
<tr [nzExpand]="data.expand">
<td><nz-spin *ngIf="isEventLoading"></nz-spin></td>
<td colspan="9">
<nz-table #innerTable [nzData]="innerTableData" nzSize="middle" [nzShowPagination]="false">
<thead>
<tr>
<th>E ID</th>
<th>S ID</th>
<th>E Type</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of innerTable.data">
<td>{{data.eID}}</td>
<td>{{data.sID}}</td>
<td>{{data.eType}}</td>
</tr>
</tbody>
</nz-table>
Try to replace this [nzData]="innerTableData" whith your inner collection like this [nzData]="data.childRows".
I have a website with lots of tables that have 2-3 columns but I need to convert each column into its own table so they will stack up for the mobile site. I'm looking at a daunting amount of work at the moment.
Is there a way that I can split each column into its own table without doing all of it by hand? I'm working in code but would a WYSIWYG software allow me to do this perhaps? Or some other type of workaround?
<table class="dataTable">
<thead>
<tr>
<th>Hauptwerk</th>
<th>Brustwerk (expressive)</th>
<th>Pedal</th>
</tr>
</thead>
<tbody>
<tr>
<td>Prinzipal 8'</td>
<td>Gedackt 8'</td>
<td>Subbass 16'</td>
</tr>
<tr>
<td>Hohlflöte 8'</td>
<td>Rohrflöte 4'</td>
<td>Prinzipal 8'</td>
</tr>
<tr>
<td>Oktave 4'</td>
<td>Nazat 2-2/3'</td>
<td>Bourdon 8'</td>
</tr>
<tr>
<td>Flöte 2'</td>
<td>Prinzipal 2'</td>
<td>Oktave 4'</td>
</tr>
<tr>
<td>Mixtur IV</td>
<td>Terz 1-3/5'</td>
<td>Fagott 16'</td>
</tr>
<tr>
<td>Trompete 8'</td>
<td>Quinte 1-1/3'</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Scharff III</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td class="italic">Tremulant</td>
<td> </td>
</tr>
</tbody>
</table>
I'm not sure which part of the CSS would be relevant, here is a sample page:
http://letourneauorgans.com/en/opus121.php
Can I make the table with rules in my aspx page.
right now I am dispalying the page some thing like this.
Benefit Type : 000
Benfit Set: BCPCP
Converage Level : IND -Individual
Deductable Type : D-DED
Can I differnciate with the rules each and every row. like this
Benefit Type : 000
Benfit Set: BCPCP
Converage Level : IND -Individual
Deductable Type : D-DED
here is my Aspx code.. is there any way I can make like this?
<table>
<tr>
<td>
</td>
</tr>
You can just do a row with an hr in it like this: http://jsfiddle.net/WXSpD/
<table>
<tr>
<td>Benefit Type:</td>
<td>000</td>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
<tr>
<td>Benfit Set:</td>
<td>BCPCP</td>
</tr>
</table>
Your question is very hard to understand, but if you're just looking for a two-by-two table, can't you do it like this?:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
If there's something else you're looking for, can you clarify a little bit?