Question

我在一个更大的网站中进行动态构建的测验的可访问性工作（我们使用Knockout绑定来填充问题。）我正在处理我们的单选按钮问题。我们最初有一些Knockout在适当的位置粘贴了“aria-labeledby”，但我们认为使用fieldsets和legends正确地执行它会有更快的加载时间。

只有在我们的框架中，在IE8中使用JAWS 12，专注于无线电元素才能读取其标签而不是我期望的图例。

我甚至采用了这个简单的示例代码，可以找到我们的网站。当我把它放在我们的框架中时它停止阅读图例。

<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>

我知道我应该从我们的网站发布整个HTML（它是从许多模板构建的），但它是巨大的。

以下是我关注的一些早期内容：

<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>

这是实际的电台问题：

    <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 &gt; 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>

人们有什么想法，我可能会继承这导致了什么？

提前致谢！

Answer 1

尝试添加＆lt; meta http-equiv =＆＃34; X-UA-Compatible＆＃34;含量=＆＃34; IE =边缘＆＃34; /＆GT;在你的角色设置头部的元标记后，让我知道是否清除了它。

JAWS没有在动态框架</fieldset> </legend>中的<fieldset>中读取<legend>

1 个答案: