Jaws Screen Reader Cross Browser Inconsistency

1
votes

So I have been trying to add proper aria tagging and html to some custom checkboxes and toggles, but found that they are not being read properly in JAWS on IE but they read fine on JAWS with chrome.

Has anyone else experienced these issues and know the cause?

Issue 1: This should read as a switch, but on IE it reads as a button, chrome it reads switch.

Code 1:

<div class="field">
  <input class="toggle-input" id="styleguide-toggle-demo" type="checkbox" name="Option Demo" value="option Demo" role="switch">
  <label class="toggle-label" for="styleguide-toggle-demo">
    <span class="toggle-message">Demo</span>
    <span class="toggle">
      <span class="knob"></span>
    </span>
  </label>
</div>

Issue 2: The checkbox should read the label. Currently in IE it only reads the checked state of the checkbox, while in chrome it reads the label and the checked state.

Code 2:

<label for="styleguide-checkbox-A">
  <input id="styleguide-checkbox-A" class="input-checkbox" type="checkbox" name="styleguide-checkbox-A" value="styleguide-checkbox-option-A">
  <span>Option A</span>
</label>
2
google-chromeinternet-exploreraccessibilityinternet-explorer-11jaws-screen-reader
I've had problems with label elements with children ... use <label for="txtfor">label</label>&nbsp;<input type="text" id="txtfor"/> design pattern instead. I don't have JAWS installed though. The w3c validators only allow one child element for label elements. - Rob Parsons

2 Answers

2
votes

ISSUE 1: A couple of things:

  1. when using role="switch" you must also use the aria-checked attribute set to either true or false. (https://www.w3.org/TR/wai-aria-1.1/#switch)
  2. currently JAWS does not recognize the switch role.

ISSUE 2: labeling with nested elements can cause havoc. I assume you are using span to style the label. Try this instead and style the label element:

<div class="form-row">
  <input id="styleguide-checkbox-A" class="input-checkbox" type="checkbox" name="styleguide-checkbox-A" value="styleguide-checkbox-option-A" />
  <label for="styleguide-checkbox-A">Option A</label>
</div>
0
votes

Using role=switch on <input type='checkbox'> is not valid.

https://www.w3.org/TR/html51/sec-forms.html#checkbox-state-typecheckbox

Allowed ARIA role attribute values: checkbox (default - do not set) or menuitemcheckbox.

You would use role=switch if you are creating your own switch component made out of <div> or <span> tags.