I am doing work with the availability of a dynamically built quiz on a larger site (we use Knockout bindings to fill in the questions.) I am currently working on our switch questions. Initially, we had some kind of knockout that got stuck in the “aria-labeledby” places, but we decided that it would have faster loading times to do it correctly using fields and legends.
Only within our framework, using JAWS 12 in IE8, focusing on the radio element reads only its label, and not the legend, as I expected.
I even took this simple example code that works on our site. When I'm stuck in our frame, he stops reading the legend.
<fieldset id="eyeColor"> <legend>Eye Color</legend> <ul> <li><input type="radio" name="eye_color" id="blueEyes"/> <label for="blueEyes">Blue</label> </li> <li><input type="radio" name="eye_color" id="brownEyes"/> <label for="brownEyes">Brown</label></li> <li><input type="radio" name="eye_color" id="greenEyes"/> <label for="greenEyes">Green</label></li> <li><input type="radio" name="eye_color" id="otherEyes"/> <label for="otherEyes">Other</label></li> </ul> </fieldset>
I know that I have to publish all the HTML from our site (it was created from several templates), but it is gigantic.
Here are some earlier bits that bother me:
<div class="loading" data-bind="'visible': !Items.loaded(), 'attr': { 'aria-hidden': Items.loaded() }" style="display: none;" aria-hidden="true"> <span class="spinner"></span> <span data-bind="'attr': { 'aria-hidden': Items.loaded() }" aria-hidden="true">Just one moment while we access this information...</span> </div> <div class="loading" data-bind="'visible': !Items.loaded(), 'attr': { 'aria-hidden': Items.loaded() }" style="display: none;" aria-hidden="true"> <span class="spinner"></span> <span data-bind="'attr': { 'aria-hidden': Items.loaded() }" aria-hidden="true">Just one moment while we access this information...</span> </div> <div data-bind="'css': ItemStateIdentifiers" class="Container Slide TuftsUniversityWLQ-TroubleStarting" tabindex="-1" aria-label="Well-being Module, Work Performance Subject" style="outline: none;"> <div class="loading" data-bind="'visible': !Items.loaded(), 'attr': { 'aria-hidden': Items.loaded() }" style="display: none;" aria-hidden="true"> <span class="spinner"></span> <span data-bind="'attr': { 'aria-hidden': Items.loaded() }" aria-hidden="true">Just one moment while we access this information...</span> </div>
<div class="loading" data-bind="'visible': !Items.loaded(), 'attr': { 'aria-hidden': Items.loaded() }" style="display: none;" aria-hidden="true"> <span class="spinner"></span> <span data-bind="'attr': { 'aria-hidden': Items.loaded() }" aria-hidden="true">Just one moment while we access this information...</span> </div>
And here is the real radio question:
<h3 class="title" data-bind="'html': Title, 'visible': Title">In the past 2 weeks, how much of the time did your physical health or emotional problems make it <span>difficult</span> for you to...</h3> <p class="userTip" data-bind="'foreach': Text, 'visible': Text.length > 0" style="display: none;"></p> <div class="QuestionGroupItemsPlaceholder" data-bind="'template': {'name':TemplateNameLookup,'foreach': NonSkippedItems}"> <div data-bind="'css': ItemStateIdentifiers" class="Question LineConnectedRadio WLQ-SlowStartToDay valid"> <label class="questionText" data-bind="'attr': {'for': ClientName}, 'foreach': Text" for="WLQ-SlowStartToDay"> <span data-bind="'text': text, 'css': css" class="text">Get going easily at the beginning of the workday</span> </label> <div class="line opts6" data-bind="'css': 'opts' + choices.length"></div> <fieldset role="radiogroup"> <legend class="accessibility" data-bind="'text':Text[0].text, 'attr':{ 'id': 'lbl-' + ClientName() }" id="lbl-WLQ-SlowStartToDay">Get going easily at the beginning of the workday</legend> <ul data-bind="foreach: choices, css: 'opts' + choices.length" class="opts6"> <li> <input type="radio" data-bind="'value': Value, 'checked': $parent.Answer, 'attr': { 'name': $parent.ClientName, 'id': $parent.ClientName() + '-idx' + $index()}, 'trackFocus': true" name="WLQ-SlowStartToDay" value="4" id="WLQ-SlowStartToDay-idx0"> <label data-bind="'text': Text, 'attr': { 'for': $parent.ClientName() + '-idx' + $index(), 'id': 'lbl-' + $parent.ClientName() + '-idx' + $index() }, 'css': { 'checked': Value === $parent.Answer() }" for="WLQ-SlowStartToDay-idx0" id="lbl-WLQ-SlowStartToDay-idx0" class="">Difficult None of the time</label> </li> <li> <input type="radio" data-bind="'value': Value, 'checked': $parent.Answer, 'attr': { 'name': $parent.ClientName, 'id': $parent.ClientName() + '-idx' + $index()}, 'trackFocus': true" name="WLQ-SlowStartToDay" value="3" id="WLQ-SlowStartToDay-idx1"> <label data-bind="'text': Text, 'attr': { 'for': $parent.ClientName() + '-idx' + $index(), 'id': 'lbl-' + $parent.ClientName() + '-idx' + $index() }, 'css': { 'checked': Value === $parent.Answer() }" for="WLQ-SlowStartToDay-idx1" id="lbl-WLQ-SlowStartToDay-idx1" class="checked">Difficult a Slight Bit of the time</label> </li> <li> <input type="radio" data-bind="'value': Value, 'checked': $parent.Answer, 'attr': { 'name': $parent.ClientName, 'id': $parent.ClientName() + '-idx' + $index()}, 'trackFocus': true" name="WLQ-SlowStartToDay" value="2" id="WLQ-SlowStartToDay-idx2"> <label data-bind="'text': Text, 'attr': { 'for': $parent.ClientName() + '-idx' + $index(), 'id': 'lbl-' + $parent.ClientName() + '-idx' + $index() }, 'css': { 'checked': Value === $parent.Answer() }" for="WLQ-SlowStartToDay-idx2" id="lbl-WLQ-SlowStartToDay-idx2" class="">Difficult Some of the time</label> </li> <li> <input type="radio" data-bind="'value': Value, 'checked': $parent.Answer, 'attr': { 'name': $parent.ClientName, 'id': $parent.ClientName() + '-idx' + $index()}, 'trackFocus': true" name="WLQ-SlowStartToDay" value="1" id="WLQ-SlowStartToDay-idx3"> <label data-bind="'text': Text, 'attr': { 'for': $parent.ClientName() + '-idx' + $index(), 'id': 'lbl-' + $parent.ClientName() + '-idx' + $index() }, 'css': { 'checked': Value === $parent.Answer() }" for="WLQ-SlowStartToDay-idx3" id="lbl-WLQ-SlowStartToDay-idx3" class="">Difficult Most of the time</label> </li> <li> <input type="radio" data-bind="'value': Value, 'checked': $parent.Answer, 'attr': { 'name': $parent.ClientName, 'id': $parent.ClientName() + '-idx' + $index()}, 'trackFocus': true" name="WLQ-SlowStartToDay" value="0" id="WLQ-SlowStartToDay-idx4"> <label data-bind="'text': Text, 'attr': { 'for': $parent.ClientName() + '-idx' + $index(), 'id': 'lbl-' + $parent.ClientName() + '-idx' + $index() }, 'css': { 'checked': Value === $parent.Answer() }" for="WLQ-SlowStartToDay-idx4" id="lbl-WLQ-SlowStartToDay-idx4" class="">Difficult All of the time</label> </li> <li> <input type="radio" data-bind="'value': Value, 'checked': $parent.Answer, 'attr': { 'name': $parent.ClientName, 'id': $parent.ClientName() + '-idx' + $index()}, 'trackFocus': true" name="WLQ-SlowStartToDay" value="5" id="WLQ-SlowStartToDay-idx5"> <label data-bind="'text': Text, 'attr': { 'for': $parent.ClientName() + '-idx' + $index(), 'id': 'lbl-' + $parent.ClientName() + '-idx' + $index() }, 'css': { 'checked': Value === $parent.Answer() }" for="WLQ-SlowStartToDay-idx5" id="lbl-WLQ-SlowStartToDay-idx5" class="">Does not apply to my job</label> </li> </ul> </fieldset>
Do people have any ideas that I can inherit, what causes this?
Thanks in advance!