No announcement yet.
  • Filter
  • Time
Clear All
new posts

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

    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
    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,


  • #2
    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.


    • #3
      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.


      • #4
        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.


        • #5
          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.


          • #6
            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:
            Click image for larger version

Name:	listgrid_header.png
Views:	1
Size:	282.5 KB
ID:	254405

            For body:
            Click image for larger version

Name:	listgrid_dataraw.png
Views:	1
Size:	253.5 KB
ID:	254406

            Before change the rendered HTML is:


            and after is :


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


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

            Thanks in advance,



            • #7
              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() {
              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...


              • #8
                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 :)