CODEWITHSUNDEEP
google-chromeinternet-exploreraccessibilityinternet-explorer-11jaws-screen-reader
Michael F
Michael F

Reputation: 181

Jaws Screen Reader Cross Browser Inconsistency

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>

Upvotes: 1

Views: 879

Answers (2)

slugolicious
slugolicious

Reputation: 17475

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.

Upvotes: 0

haltersweb
haltersweb

Reputation: 3139

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>

Upvotes: 2

Related Questions