Accessibility issues on IE

[chacomo]

Hi Isomporhic,

I want to report two issues related to accessibility. I am using SmartGWT 2.5 and IE9.

In the Screenreader.js JavaDoc you recommend to use Firefox in combination with JAWS or NVDA screen readers. Unfortunatelly almost all our customers are using Internet Explorer and have strict internal regulations which disallow any other browsers.

I want to report two issues which can be reproduced with IE9. Accessibility support for IE 9 is enabled in the Screenreader.js according to the two flags: ariaEnabled an liteAria. Due to these flags there is only limited support for IE 8, which is not good for us as almost all our customers are still using this browser version. Therefore we have already implemented some accessibility related functionality for IE 8 ourselves.

You should be able to reproduce the issues with the following sample code on IE 9:

     
public void onModuleLoad() {  
         SC.setScreenReaderMode(true);
 		 
         Window window = new Window();
         window.setAutoCenter(true);
         window.setSize("500", "400");
         window.setOverflow(Overflow.VISIBLE);		
         window.setIsModal(true);
 		
         Canvas canvas = new Canvas();  
         final ListGrid countryGrid = new ListGrid();  
         countryGrid.setWidth(500);  
         countryGrid.setHeight(224);  
         countryGrid.setShowAllRecords(true);  
   
         ListGridField nameField = new ListGridField("countryName", "Country");  
         countryGrid.setFields(nameField);  
         countryGrid.setCanResizeFields(true); 
         
         ListGridRecord[] result = new ListGridRecord[2];
         result[0] = new ListGridRecord();
         result[0].setAttribute("countryName", "England");
         result[1] = new ListGridRecord();
         result[1].setAttribute("countryName", "France");	         
         countryGrid.setData(result);  
         canvas.addChild(countryGrid);  
   
         IButton hideCapital = new IButton("Hide");  
         hideCapital.setLeft(0);  
         hideCapital.setTop(240);  
         hideCapital.addClickHandler(new ClickHandler() {	  
             public void onClick(ClickEvent event) {  
                 countryGrid.hideField("countryName");  
             }  
         });  
         canvas.addChild(hideCapital);  
   
         IButton showCapitals = new IButton("Show");  
         showCapitals.setLeft(120);  
         showCapitals.setTop(240);  
         showCapitals.addClickHandler(new ClickHandler() {  
             public void onClick(ClickEvent event) {  
                 countryGrid.showField("countryName");  
             }  
         });  
         canvas.addChild(showCapitals);
         window.addChild(canvas);
         window.show();
     }

1) No focus traversal with ListGrid

- Put the focus into the ListGrid
- Press tab to traverse focus to the first button

No traversal. The focus remains on the ListGrid.
It seems to be related to the new method putNativeFocusInRow in GridBody.

2) No initial ariaRole or ariaState is set to instances of Canvas

You can check the defined aria role of the buttons with the Web Accessibility Toolbar for IE.

It seems that no role is set for Canvas objects as it is entirely limited to Firefox in your code. See Canvas getTagStart():

var isFF3 = isc.Browser.isMoz && isc.Browser.geckoVersion >= 20080529;

// use two DIVs: an inner one to hold the content, and an outer one for clipping       
        var output = isc.StringBuffer.concat(
       
            // the clipDiv           
            "<div id='" , this._getClipDivDOMID(),
            "' eventProxy=" , eventProxy,
            (isFF3 && this.ariaRole ? " role='" + this.ariaRole + "'" : ""),
            (isFF3 && this.ariaState ? this.getAriaStateAttributes() : ""),
            (this.className ? " class='" + this.className + "'" : ""),
            focusString,

Best regards,
Manuel

[Isomorphic]

You've misread some of the code: IE8 and IE9 support don't differ if you call SC.setScreenReaderMode(true). The only difference is that in IE9, more ARIA features are enabled *without* this call.

As far as the tabIndex issue, try a nightly of 2.5.x (smartclient.com/builds), this should be resolved.

We're checking on possible missing roles for IE.

[chacomo]

Hi Isomorphic,

thanks a lot for checking the missing role settings for Canvas objects on IE.

You are right, if I set the flag screenReader to true the flag ariaEnabled is true for IE 8 and IE 9. But I am referring to the liteAria flag setting. It is also true for IE8, which means that FormItem ARIA settings are never processed. I think FormItems definately should get aria roles and states.

isc.liteAria = isc.Browser.isIE && isc.Browser.version < 9;

// called after a FormItem is drawn
addContentRoles : function () {
   if (!isc.Canvas.ariaEnabled() || isc.liteAria) return;

   if (!this._canFocus() || !this.ariaRole) return;
   this.setAriaRole(this.ariaRole);

You also use the liteAria flag to prevent the setting of row states for
ListGrids and TreeGrids on IE 8. Your comment in the code says it is too expensive. Is the performance really unacceptable?

Regarding the tabIndex issue: I have tried the latest nightly,
but it seems it is still not possible to tab out of the list grid in screen reader mode on IE.

Best regards,
Manuel

[chacomo]

Hi Isomorphic,

are you going to fix the ListGrid focus traversal issue in screen reader mode on IE? A screen reader user cannot navigate within a UI containing a ListGrid.

I have tested it again on the latest nightly build (2011-10-11).

Best regards,
Manuel

[Isomorphic]

We have an engineer working on this at the moment. We'll keep you posted!

[Isomorphic]

Ok we've made some changes which should improve behavior in IE.
Please try the next nightly (3.0) build - dated Oct 14th or greater and let us know if you continue to encounter problems

Thanks
Isomorphic Software

[chacomo]

Hi Isomorphic,

sorry, for the late reply, but I haven't noticed your latest post.
I cannot find any email notification matching your response date. Is it possible that your post hasn't been notifed by email for some reason?

Anyway thanks a lot for your instant reaction, we appreciate it a lot.

The focus traversal with TAB is moving the focus out of the list grid now. But unfortunatelly the focus is only shortly set to the next element then it is automatically set to the following element.

You can easily reproduce it in the example which I have added to my initial post. You will notice that the focus is set to the "Show" button. The "Hide" button is skipped.

I have tested your changes with the 3.0 nightlies "2011-10-14" and "2011-10-26".

Best regards,
Manuel

[Isomorphic]

Thanks for the update. We see the problem and have made a change to address it. Please try the next nightly and let us know if you still see it.

[kk8322]

Hi Isomorphic,
any updates on the TAB - Focus issue in List grid. I am also facing this issue in IE6/8/9. Is it fixed in nightly build ? if so, can you please let me know which nightly build i have to use ?

P.S: Currently i am using SmartGWT 2.5.

[chacomo]

Hi Isomorphic,

1) Focus traversal with ListGrids
I have tested the latest nightly. The tab focus handling issue still persists.

2) Missing aria roles for Canvas objects on IE
You stated that you will also check on possible missing roles for IE.
Any updates here?

Best regards,
Manuel