I have one table. In table column I have two thing one table column name and one icon to sort column. Everything works fine, but right now I started working with accessibility and found that for each column value it reads both table header and aria label for icon also. I don't want read aria label for icon Is there any way to give label for icon so that it read in screen reader but don't read foe each data row.dont want to put icon outside of table column also.
Use the solution as explained here in Sortable Table.
Use aria-hidden to remove the icon from accessibility and also
Use aria-sort which meets the arrow icon purpose and lets the Screen Reader know the direction of the sort: ascending or descending.
Visual users would be able to know the direction by seeing the arrow icon position.
Non-visual users would be able to know when SR speaks the aria-sort value.
Related
I’m wondering how to add role="rowheader" to the first cell of AG-Grid rows and add role="rowgroup" to the entire row? I have a large data table where the first column needs to be read by the screen reader when arrowing down the rows, just like the column headers are announced when going between columns. Every screen reader user who has tested our application has been upset that we do not have this basic feature and asked that we make it top priority. This issue describes how to visually achieve what I’m interested in, but it doesn’t work for screen readers. Adding role="rowheader" to a custom cellRenderer doesn’t work, probably because I need the rowgroup role around each row. It looks like Row Node may be the correct place to add a role attribute, but it’s unclear how to add the attribute to the div or how to even access the row node.
I would love some recommendations on how to add aria row headers in Ag-Grid. If we can’t get this functionality we’ll probably need to change to another grid, as this is so important to our users.
With a button click in a row I need to expand the row whereas it can have different database values under same column label. It needs to show the transhipment of the ship from port to port.
Kindly help me deal with this problem or suggest me any reference so that I could try using jqgrid.
In this image a single row is split into 3 rows after the button click. it shows different values under a column. I need a likely output
You need to look at Guriddo jqGrid subgrid module. See documentation here and demo here - click on Hierarchy button at left in the accordion menu.
I've posted a couple of Google Charts accessibility questions already; here's one more. Thank you in advance for your help.
Google Charts tables are surprisingly easy to make accessible to blind users, but I'm running into a perplexing problem. I'm making a website that uses standard Google category filters to produce a data table. I've added ARIA-live=polite and ARIA-atomic=true attributes to the table to signal screen readers to read out the entire table when it changes. This works perfectly most of the time; when a control is changed, after reading out the control behavior the screen readers will immediately start reading the new table.
Unfortunately, changes in class attributes trigger ARIA-live. For Google Charts tables also tagged with ARIA-atomic, this means that row hover behavior will trigger a reading of the entire table, because hovering over a row changes the row class. And if you move the mouse pointer over more than one row, it'll read out the entire table once for every row over which you pass.
EDIT: see NOTE below to clarify this paragraph. I've tried addressing this by tweaking the table's cssClassNames options, but the results are frankly maddening. Even when changing the tableRow and hoverTableRow options to the same class, the table will only apply that class when hovering, changing the class to " " when not hovering.
I've tried convincing my co-workers that users of screen readers won't be using mice, but I've been asked to find a solution anyway. Guh.
Does anyone understand how this row hover behavior works, exactly? Is the problem as inscrutable as I'm making it out to be, or am I missing something? Does anyone have any ideas for a workaround?
NOTE: Ryan B has a good workaround idea (see comment below), and that's exactly the kind of solution I'll propose if my co-workers insist that the current setup doesn't meet their standards. Thank you Ryan.
Still, in the hope that the problem is with my explanation, I'll clarify: when you hover over a row in a Google charts table, the background color changes. The Google Viz script manages this by listening for hover events over table rows. On hover, the script changes the row class name from something like "tr-goo-viz-table-row" to "tr-goo-viz-table-row-over", both of which are in the Google Viz CSS and only include styles of background colors (white and light grey, respectively).
In the HTML table call one can set the cssClassName option for hoverTableRow to "tr-goo-viz-table-row" (or set both tableRow and hoverTableRow to any class that only sets the background color) and visually, the hover behavior stops. But in an odd quirk, the script insists on differentiating the class names on hover even if you're telling it to keep the class names the same. Depending on the implementation the script will produce a doubled class name ("tr-goo-viz-table-row tr-goo-viz-table-row") for hover rows, or an empty class name ("") for non-hover rows, and either way that'll still trigger ARIA-live even though no style change is implemented and hovering has no visual effect.
Since I don't understand the implementation of this behavior, I'm hoping someone who understands it better than I do might know of a way to stop the hover-triggered class name changes altogether - killing the listener, etc. Something like adding "pointer-events:none" in the row CSS for example...except pointer-events wasn't supported in IE before IE11 and the people using this website will mostly be using IE9.
In my current Webproject I have to implement a table containing all days of a month, resulting in ~30-31 table columns. Since such a huge table isn't very pretty, I wanted to implement something similar to the tables of Doodle Polls. Doodle folds a table, replaces the hidden columns with a pic and if you click on that picture it unfolds the columns -> displays the hidden columns.
But how do I achieve such a behaviour? I'm new to Javascript and not that familiar with fancy CSS3 techniques.
Especially, how do I replace the hidden columns with a picture?
The tutorials I've found only allow to hide specific columns and not to replace them.
PS: I also tagged RoR, since the project I'm working on is built with RoR and maybe there is also a Rails solution for that problem?
PPS:
You could hide the columns you want to hide first and have a column with the image displayed in the table. When the image (folding) is clicked you can hide the column containing the picture and make the other columns visible again. This is not really about some fancy css3 stuff but you need basic knowledge of how to interact with DOM elements through javascript (hide / show) elements. That should do the trick.
See this tutorial at w3schools. All that you need is get the elements you need (Image Column and all TDs in the hidden columns) ant then apply a css style to them (hidden / visible).
is there any way to change Oracle Apex region with dynamic action. I mean when i click a button, i execute dynamic action to change column order of a region or to change grid column width of a region. Lets say i have two region : regionA and RegionB. What i need to do is place RegionA side by side (not in a new row), so i have to place it in column order column1 and column 2, but then i need to hide RegionA and display RegionB in full screen, so the only way is dynamically change regionB to column 1 because i dont want regionB display in half of the screen.
Any clue would be appreciate. Thanx.
Personnaly, I never use columns in Oracle Apex. I had too much problem with it in last releases (especially 3.2)... I was forced to build a new custom template with custom region positions (because at the time apex was using <table> elements for the page layout... I used only <div> elements + CSS).
In your case, if you need region A and region B side by side, I would create the two regions in the same region position and same column, and then simply apply float:left to the two regions (add style="float:left" in the region attributes).
So when you will hide one of them, the other one will fill the page width (you may need some more CSS of course).
Then give a static id to the two regions, then from JavaScript/Jquery you can show/hide them easily using $('#your_region_id').hide(); and $('#your_region_id').show();.
I use it a lot and it works like a charm.