Problems making Screenreader JAWS read data with column names they are realated to in ListGrids

[viadee]

Hello Isomorphic,

we have problems to pass accessibility with our tool. We have serveral listGrids in our application.
Is there any possibility, to let the Screenreader read the data and(!) the name of the column they are related to in the ListGrid.
We tested this issue with the latest SmarGWT Version, Jaws 18 in Firefox. As Code Example I took https://www.smartclient.com/smartgwt...ding_lg_fields
as it shows exactly what we need. In addition I set SC.setScreenReaderMode(true); at the beginning of 'onModuleLoad(){....'.

The Screenreader reads perfectly the data as "US United States 04.07.1776 298444215 12360"

but we need it to read something like

"Code US Country United States Nationhood 04.07.1776 Population 298444215 GDP ($B) 12360"

Without the column names infront of the data, you are lost in numbers just read one after the other.

Is there any possibility to achieve this by either configurations in SmartGWT, additional ListGrid-Settings, implementing yourown ListGridType, manipualte any of the JavaScript files? Any workaround would be helpfull.

Thanks in advance for your help,

Viadee

[Isomorphic]

We’re using the standard ARIA-recommended markup here, and the column titles are already available to the reader. It’s up to the reader, and the end user’s settings, to decide whether to read the titles or not, which is sometimes desirable and sometimes not, depending on the end user and the number of columns they have decided to show.

[viadee]

Hello Isomorphic,
thanks for the answer. So the titles are available. That sounds perfect.
Could you give me a hint for how I can make the reader reading the titles before reading column content? We already tried many SmartGWT / Listgrid configurations, but we couldn't find a solution, yet.

[Isomorphic]

Again, the titles are already in the markup, there's nothing further to do in terms of configuring the ListGrid or SmartGWT. Whether the titles are read is controlled by the screen reader software itself.

[viadee]

OK, thanks. Do you have any showcase + Screenreader + Browser, where this works as described. We tried different JAWS-Versions (18/ 2018) with Firefox (61) and it didn't work.
Thanks again for your help.

[tomasz.piotrowski]

Our requirement is also that before selecting each cell JAWS reads the header of column.

The use case is:

1. User select table with JAWS short cut (CTRL+INSERT +T)
2. He is able to navigate in this table by using (CTRL + ALT + {Arrow Up, Down, Left, Right})
3. JAWS reads column header before cell content.



Problem is that ListGrid is more "list” then "grid (table)".

To solve it the following changes MUST be apply in html code (role attribute for html sub elements):


For header:


For body:



Before change the rendered HTML is:

http://relaxed-beaver-b05342.bitball...re_change.html

and after is :

http://relaxed-beaver-b05342.bitball...s_changed.html

You can check that after changes mentioned above the JAWS behaves correctly.



QUASTION:

Is a technical way to do this ? Some kind of HTML transformer which can be used for that?


Thanks in advance,

Tomasz.

[viadee]

Hey Thomasz,

thanks for your entry. Having real "tables" would be the proper solution for us.
For now we used the setCellFormatter for each ListGridField and replaced the html:

setCellFormatter(new CellFormatter() {

@Override
public String format(Object value, ListGridRecord record,
int rowNum, int colNum) {
String returnValue;
if (value == null) {
returnValue = "<div class=\"Cell\" role=\"gridcell\" aria-label=\" " + getTitle() + " leer "
+ "\" >"
+ "</div>";
} else {
returnValue = "<div class=\"Cell\" role=\"gridcell\" aria-label=\" " + getTitle() + " " + value
+ "\" >"
+ value + "</div>";
}
return returnValue;
}
});

It works, but it feels more like a dirty hack...

[tomasz.piotrowski]

Thank you for suggestion.

I want another way :
- take debug sources from "sc/modules-debug/"
- make changes (as describe in my previous post)
- use obfuscator (i.e uglifyjs-folder )
- replace sources in [main_file].html

One more think .. with that u need to remove role="application" form body element.

.. so far works :)

[jdeyla]

We’re using the standard ARIA-recommended markup here

We are having the same issue with tables, I thought we were missing something in the code, but as I read,
it's not just us:

the WAI ARIA roles added to Listgrid are wrong.

So the framework is not WCAG 2.1 compliant, but we need compliant apps, so please reconsider your point:
we're having real problems with real people.

WAI ARIA in meant to give "semantic information about widgets, structures,..." and when a grid is a table, it can't appear, just to screen readers as a list because all the usual commands to understand or navigate fail.

Specifications are clear:

role=list
is a section containing listitems, single list items. A row of a table with many fields is not a single item. A tabel with justa column can be a listitem.

role=table
is for static data table https://www.w3.org/TR/wai-aria-1.1/#table

role= grid
is our case, interactive data tables tha can be focusable https://www.w3.org/TR/wai-aria-1.1/#grid

Elements should be navigated by columns, not just rows
If there were no ARIA markup listgrid are simple tables, easy to navigate, but with added ARIA, they become impossible to navigate in vertical.

According to WCAG 2.1 Criterion 4.1.2 Roles must be provided in order to understand and interact with elements in the correct way https://www.w3.org/TR/WCAG21/#name-role-value

And this is done using ARIA in the correct way as in ARIA4 https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA4

So if you're using the ARIA specs in the wrong way, you are not compliant.


In any case, this is not a matter of compliance, there's a real problem for blind users to navigate listrgrids with many columns and rows with actual wrong ARIA markup.

If only , when creating lisgrids, we could choose the role to be given table/ list / grid would solve and shouldn't "cost much"

Could we hope in such an improvement?

[Isomorphic]

This is an interesting opinion, but on other side of the opinion is the fact that our product has passed many, many accessibility reviews.

Whether a ListGrid should be be treated as role=list or role=grid depends on the context and the preferred reading of the user. Both are appropriate for different readings of the ListGrid in different application contexts.

Examples that are obviously better in "list" mode include single-column ListGrids, and small numbers of columns with relatively self-evident titles. For example, the best reading of FirstName, LastName, Email is definitely just to read it off in "list" style, rather than the slower and less useful "grid" mode reading that would repeatedly list self-evident titles.

Furthermore, WCAG used to lack markup that allow role=grid to do incremental data loading and rendering. And it was relatively recent that screen readers actually began to support this mode.

So, you may think that reading for role=list is less than optimal for some use cases of ListGrid, but had we chose role=grid, it could not have been meaningfully read at all.

Please realize, we very much had the interests of disabled users in mind. Other companies, encountering this situation of inadequate markup and broken readers, simply put in markup that didn't actually work and called themselves compliant.

We actually made it work with real screenReaders.

That all said, there is a project underway to further enhance the existing "list" reading with configuration that makes it better for certain cases, also add an option for "grid" reading, explain the difference in the docs, and improve reading in other ways. If you would like to join this project, via the Feature Sponsorship program, and make sure you end up with the reading you prefer, that would be great.

But caustically calling us simply "wrong" is not going to get anywhere.