Knockout.js 不读书<；图例>；在<；字段集>；在动态框架内

我正在一个更大的网站上做一个动态构建的测试（我们使用击倒绑定来填充问题），我目前正在做单选按钮问题。我们最初有一些敲除，将“aria labeledby”粘贴在适当的位置，但我们决定它将有更快的加载时间来正确处理字段集和图例

只有在我们的框架中，使用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>

请稍等，我们访问此信息。。。
请稍等，我们访问此信息。。。
请稍等，我们访问此信息。。。

请稍等，我们访问此信息。。。

下面是实际的广播问题：

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

在过去的两周里，有多少时间你的身体健康或情绪问题让你难以。。。

在工作日开始时轻松开始
在工作日开始时轻松开始


从来都不难


有点困难


有时很难


大多数时候都很难


一直都很难


不适合我的工作

大家知道我继承了什么导致了这一切吗

---

提前谢谢

试着在你的字符集元标记后面添加，如果这样可以清除，请告诉我。

希望你发现此资源有用：（对你描述的各种解决方案进行了广泛测试）图例是可见还是隐藏的（

显示：无；

）？谢谢链接，FelipeAls。看看now.unor，图例目前是隐藏的（不是display:none；，只是从屏幕上移开了），但我也用图例visible对它进行了测试，看看这是否是问题所在。screenreader软件没有可靠地公布图例元素；正如你所发现的，JAWS想跳过它。字段集元素也有点狡猾。不过，广播元素上的名称将可靠地公布，为您的有视力的用户提供一段或一段，足以传达这是一组相关输入。

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