JAWS沒有閱讀<legend><fieldset>在動態框架

Question

我正在做一個動態構建的測驗在一個較大的網站上的可訪問性工作（我們使用Knockout綁定來填充問題。）我目前正在研究我們的單選按鈕問題。我們最初有一些Knockout在適當的地方卡住了「aria-labeledby」，但我們認爲它有更快的加載時間，可以與fieldset和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

嘗試添加< meta http-equiv =「X-UA-Compatible」content =「IE = edge」/ >緊隨您的字符集頭標記後，讓我知道是否清除它。