0 Replies Latest reply on Aug 28, 2014 5:55 AM by jigg4

    Making richfaces select component accessible for JAWS using ARIA

    jigg4

      I am currently trying to apply some ARIA attributes to the rich:select component (enableManualInput=true) to make it accessible for assistive technologies like JAWS.

      In detail i would like to use the aria role "combobox". Now i have some problems doing this with IE. Firefox seems to work fine but IE has some problems recognizing the Combobox.

      Is anybody arround here who tryed the same thing and succeded or has some usefull Informations in how to do this?

       

      My current HTML-Structure with the attached roles looks like this:

       

      <div id="registration:persondata:gender" class="rf-sel" aria-labelledby="registration:persondata:genderLabel" role="combobox">
        <span class="rf-sel-cntr">
        <input id="registration:persondata:genderselValue" type="hidden" name="registration:persondata:gender" value="">
        <input id="registration:persondata:genderInput" class="rf-sel-inp rf-sel-dflt-lbl" type="text" onclick="document.getElementById(this.id).select();" name="registration:persondata:genderInput" aria-activedescendant="registration:persondata:genderItem0" aria-owns="registration:persondata:genderItems" aria-autocomplete="list" autocomplete="off" title="" customtitle="true">
        <span id="registration:persondata:genderButton" class="rf-sel-btn">
        <span class="rf-sel-btn-arrow"></span>
        </span>
        </span>
        <div id="registration:persondata:genderList" class="rf-sel-lst-cord">
        <div class="rf-sel-shdw">
        <div class="rf-sel-shdw-t"></div>
        <div class="rf-sel-shdw-l"></div>
        <div class="rf-sel-shdw-r"></div>
        <div class="rf-sel-shdw-b"></div>
        <div class="rf-sel-lst-dcrtn">
        <div class="rf-sel-lst-scrl" style="min-height: 20px; width: auto; min-width: 307px;">
        <div id="registration:persondata:genderItems" role="listbox">
        <div id="registration:persondata:genderItem0" class="rf-sel-opt" title="Empty Entry" role="option"> </div>
        <div id="registration:persondata:genderItem1" class="rf-sel-opt" title="male" role="option">m</div>
        <div id="registration:persondata:genderItem2" class="rf-sel-opt" title="Undescribed" role="option">u</div>
        <div id="registration:persondata:genderItem3" class="rf-sel-opt" title="Female" role="option">f</div>
        </div>
        </div>
        </div>
        </div>
        </div>
      </div>