Search code examples
htmlaccessibilityjaws-screen-reader

JAWS 2018: Making a select/drop-down "clickable"

I'm working on a website project and fixing accessibility defects.

Constraints of my setup:

  • Operating System is Windows 7/10
  • Browser is Internet Explorer 11
  • Accessibility software is JAWS 2018.1804.26

I have no control over these contraints, so please do not suggest any solutions for any other setup.

I have a defect that says that an HTML <select> (drop-down) should be listed in the "clickable" elements by JAWS. (This is the modal dialog shown when pressing the Ins+Ctrl+/ keyboard chord.) I have encountered this kind of issue before with other HTML element types, and I have fixed those with a combination of the following:

  • Add an onclick handler (in my case, an empty function)
  • Add a value to the aria-label attribute (in my case, dynamically)

When attempting to do those steps in the current defect, I can make the <select> show up in the "clickable" modal dialog, but no text is listed (I'm guessing it's "reporting" an empty string). This is in spite of having a value for aria-label.

Other item of note:

  • The <select> in question is inside of a <span> that is inside of a <td>1

It looks like this:

<table>
  <tbody>
    <tr>
      <td>
        <span>
          <select> ... options ... </select>
        <span>
      </td>
    </tr>
  </tbody>
</table>

I tried altering the above code like this:

<table>
  <tbody>
    <tr>
      <td>
        <span>
          <select onclick="emptyHandler" aria-label="Some text"> 
            ... options ... </select>
        <span>
      </td>
    </tr>
  </tbody>
</table>

function emptyHandler() {
    /* This function is empty by design     */
    /* Its function is to expose an element */
    /* as a clickable element to JAWS, when */
    /* otherwise JAWS would ignore it.      */
}

Making the above modifications DID add the element to the list of clickable elements, but with no text displayed. You can see the extra row, and you can highlight it, but it's some amount of just blank spaces/text (or maybe just nothing).

1 I did not write the UI for this page, and I have no desire (nor am I authorized) to re-write the entire page. I suspect that wrapping controls inside of <span> elements does some really wonky things when interacting with JAWS, but I can't fix that part of this problem.

I have a few questions around this, since I cannot find great documentation on exactly how this is supposed to work:

  1. Is there any detailed documentation on how this is supposed to work? My searches on Freedom Scientific's website as well as on Mozilla's and around the web has produced some information, but I'd love a central place where I could find these kinds of answers. In particular, there doesn't seem to be a consistent, canonical definition for what a "clickable" element is. Some elements seem to be treated as "clickable" be default, whereas adding a custom onclick handler seems to allow ANY element to be added to that list. Which leads me to...
  2. How - exactly - does the "clickable" modal dialog work in JAWS? I think I have figured out how to get an element into this list, but what it displays seems slightly inconsistent. Which leads me to...
  3. What is supposed to show up in that modal dialog? In prior testing, it appeared that the text that is displayed is the value in the aria-label attribute, so why isn't that working here?
  4. Is it an inappropriate expectation that a <select> element would show up here? I can always kick this defect back for this reason, but I don't want to do so unless I'm sure that this is the correct course of action.
Solution

  • With the added details, I understand the problem now. The "clickable" dialog (ins+ctrl+/) in JAWS shows elements with an onClick() handler but the label used for <select> elements in that dialog is the value of the select, which is whichever <option> that is currently selected. Using an aria-label or aria-labelledby or <label for="select-id"> does not affect the clickable dialog, although using those attributes on a <button>, for example, does work in that dialog.

    I would suggest filing a bug for JAWS.

    The good news is that the JAWS shortcut key for navigating to the next <select> element is C and the dialog for showing all the <select> elements is ins+ctrl+C and that dialog does honor the aria-label or aria-labelledby' or <label for="select-id">.