Announcement

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

  • Accessibility support?

    I found this old thread about section 508 http://forums.smartclient.com/showth...=accessibility.

    Major requirement for our projects is good accessibility support including screen readers.

    Any examples or docs on this subject?

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

    Comment


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

      Comment


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

        Comment


        • #5
          Where do you set the screenReader attribute?

          Where is "isc.screenReader = true" set?

          Comment


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

            Comment


            • #7
              Is this still a necessary flag to set?

              Comment


              • #8
                Yes it is.

                Comment


                • #9
                  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?

                  Comment


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

                    Comment


                    • #11
                      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?

                      Comment


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

                        Comment


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

                          Comment


                          • #14
                            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

                            Comment


                            • #15
                              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">
                              Last edited by sujaydutta; 14th Nov 2011, 09:19.

                              Comment

                              Working...
                              X