Announcement

**Isomorphic** · 26 Jan 2009, 09:51

SmartClient has full built-in keyboard navigability as well as ARIA support for screen readers. As alluded to in that thread however, accessibility is not a checkmark attribute of an application - you need to break it into motion impairment, visual impairments of various kinds, and the application itself (not just the framework) needs to be designed with accessibility in mind.

**aaronlev** · 7 Feb 2009, 13:25

No WAI-ARIA support that I can see

I took a quick look at the demos on the site and did not see WAI-ARIA markup in the page. The keyboard support seems to be there.

FWIW, there is good info on adding WAI-ARIA support at http://codetalks.org. It's a challenge to add WAI-ARIA. If you have questions you can use the free-aria mailing list on Google groups.

**Isomorphic** · 7 Feb 2009, 13:34

Set isc.screenReader = true; after SmartClient is loaded and before any components are drawn to enable ARIA support.

**kpowers** · 10 Mar 2009, 06:13

Where do you set the screenReader attribute?

Where is "isc.screenReader = true" set?

**Isomorphic** · 10 Mar 2009, 18:56

In a <script> block in your .html or .jsp file, after SmartClient is loaded and before any components are created or drawn.

**acarur01** · 24 Aug 2010, 09:48

Is this still a necessary flag to set?

**Isomorphic** · 24 Aug 2010, 10:12

Yes it is.

**acarur01** · 25 Aug 2010, 05:33

What does this flag actually do? If I were to not set it, then screen readers will not work on applications built with SmartClient I assume?

**Isomorphic** · 25 Aug 2010, 05:37

It causes WAI-ARIA markup to be added to components, which makes them screen-reader accessible and also causes some subtle differences in how keyboard focus moves.

Note: put the screenReader in "application mode", this is done differently per-reader, for example in JAWS, it's a hint you put in your .html.

**acarur01** · 2 Sep 2010, 04:52

I'm currently trying to test this with Windows Narrator (Windows 7 64bit) - I don't see any difference in how the narrator is reading the screen with and without the screenReader flag. Should I be testing with an actual screen reader? Also, when I tab over say a label, or if I put focus on a field, is this flag supposed to allow the screenReader to determine what the field is for based on the title of the field?

**acarur01** · 2 Sep 2010, 05:39

I'm also testing with a free screen reader "NVDA" and it works fine without the screenReader flag

**Isomorphic** · 3 Sep 2010, 09:22

Government accessibility guidelines allow you to specify a particular platform for screenreader support, so use a leading one like JAWS or WindowEyes.

Read up on WAI-ARIA for what you should expect the screen reader to be speaking. Reading will be very very different with the isc.screenReader=true set once you have put the reader in the correct mode.

**Branik** · 12 Sep 2010, 14:53

Originally posted by acarur01

I'm also testing with a free screen reader "NVDA" and it works fine without the screenReader flag

NVDA is still working on developing ARIA support. They just added ARIA landmark role support in the most recent version 2010.1 and ARIA drag and drop. For it to report ARIA landmarks you must go to Preferences -> Document Formatting and check "Report landmarks."

They have on their future goals to improve ARIA support. http://www.nvda-project.org/wiki/FutureGoals

**sujaydutta** · 10 Nov 2011, 11:44

Do we put the hint for application mode like this in the html? Found this here: http://yaccessibilityblog.com/librar...plication.html

Code:

<body role="application">

Update: note this puts the whole app in application mode, Jaws doesn't treat it as a webpage (headers etc. are not reported using INS+F6), we need to use it carefully within the div tags and not in the body tag.

Also in the JSNI which one are we supposed to use? http://www.smartclient.com/smartgwt/api-changes.html and http://www.smartclient.com/smartgwte...ssibility.html seems to suggest using isc.setScreenReaderMode(true), however in the forums, its mentioned to use isc.screenReader=true.

Code:

public static native void enableAria() /*-{
   $wnd.isc.screenReader = true;
   $wnd.isc.setScreenReaderMode(true);
}-*/;

Here's a nice article on JAWS support for ARIA: http://www.paciellogroup.com/blog/20...port-for-aria/

Updated: With latest SmartGWT 2.5/GWT 2.3 ran a small test with the above JSNI and body tag enabled. I do see the ARIA tags set for some controls (role, aria-label, aria-checked) but not for all, for example IButton, CSSButton, RadioGroup. Also the SelectItem contents are not read, they should add ARIA tags when we navigate through them correct?

TextItem

Code:

<input type="TEXT" tabindex="1435" style="WIDTH:140px;HEIGHT:16px;-moz-user-focus:normal;" class="textItem" autocomplete="OFF" oninput="isc_TextItem_2.$43g()" spellcheck="true" $9a="$9b" $89="isc_TextItem_2" handlenativeevents="false" id="isc_F" name="myTextItem" role="textbox" aria-label="Text Item1">

Checkbox - not checked state

Code:

<div tabindex="1465" style="min-width:16px;white-space:nowrap;" class="labelAnchor" $9a="$9d" $89="isc_CheckboxItem_1" id="isc_Q" role="checkbox" aria-label="Checkbox" aria-checked="false"><img width="13" height="13" border="0" align="TEXTTOP" suppress="TRUE" style="vertical-align:middle;margin-left:4px;margin-right:3px;" eventpart="valueicon" id="isc_R" src="http://localhost:8080/SmartGWTAccessibilityTestApp/smartgwtaccessibilitytestapp/sc/skins/Enterprise/images/DynamicForm/unchecked.png" alt="">Checkbox</div>

Checkbox - checked state

Code:

<div tabindex="1465" style="min-width:16px;white-space:nowrap;" class="labelAnchor" $9a="$9d" $89="isc_CheckboxItem_1" id="isc_Q" role="checkbox" aria-label="Checkbox" aria-checked="true"><img width="13" height="13" border="0" align="TEXTTOP" suppress="TRUE" style="vertical-align:middle;margin-left:4px;margin-right:3px;" eventpart="valueicon" id="isc_R" src="http://localhost:8080/SmartGWTAccessibilityTestApp/smartgwtaccessibilitytestapp/sc/skins/Enterprise/images/DynamicForm/checked.png" alt="">Checkbox</div>

LinkItem

Code:

<a $9a="$9d" onclick="if(window.isc_LinkItem_1) return isc_LinkItem_1.$30i(event);" tabindex="1455" target="_blank" href="&nbsp;" id="isc_LinkItem_1$20j">Click Me</a>

SelectItem, the contents of the selectItem are not read

Code:

<input type="TEXT" tabindex="1485" style="WIDTH:123px;HEIGHT:16px;-moz-user-focus:normal;" class="selectItemText" autocomplete="OFF" oninput="isc_ComboBoxItem_1.$43g()" spellcheck="true" $9a="$9b" $89="isc_ComboBoxItem_1" handlenativeevents="false" id="isc_T" name="isc_ComboBoxItem_0" role="combobox" aria-label="Select" aria-autocomplete="list">

Image

Code:

<img width="100" height="50" border="0" align="TEXTTOP" suppress="TRUE" alt="Google Logo" name="isc_2main" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">

Custom Header1 using HTMLFlow custom widget wrapping with h1 tag - renders native <h1> tag

Code:

<h1>Custom Header1</h1>

Custom Header2 using HTMLFlow custom widget wrapping with h1 tag - renders native <h2> tag

Code:

<h1>Custom Header1</h1>

Label - not ARIA compliant

Code:

<td valign="center" align="left" class="normal">SmartGWT Label</td>

IButton - not ARIA compliant

Code:

<td valign="center" nowrap="true" align="center" onfocus="iButton1_label.$47()" tabindex="-1" style="padding-top:0px;padding-bottom:0px;" class="buttonTitle"><span style="text-decoration:underline;">I</span>Button</td>

CSS Button - not ARIA compliant

Code:

<td valign="center" nowrap="true" align="center" onfocus="isc_Button_0.$47()" tabindex="-1" style="padding-top:0px;padding-bottom:0px;" class="button">CSS Button</td>

RadioGroupItem - not ARIA compliant

Code:

<input type="RADIO" style="-moz-user-focus:normal;" tabindex="1475" handlenativeevents="false" value="Option 2" $9a="$9b" $89="isc_RadioItem_1" id="isc_Y" name="isc_RadioGroupItem_0">

Announcement

Accessibility support?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment