4

私は、より大きなサイト内で動的に構築されたクイズでアクセシビリティの作業を行っています (質問を入力するために Knockout バインディングを使用しています)。現在、ラジオ ボタンの質問に取り組んでいます。当初、適切な場所に「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>


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

人々は、私がこれを引き起こしているものを継承している可能性があるという考えを持っていますか?

前もって感謝します！

4

1 に答える 1

1

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> をヘッドの文字セット メタ タグの直後に追加してみて、問題が解決するかどうかお知らせください。

于 2016-05-06T02:01:00.813 に答える