radiobuttonlist - ラベルを RadioButtonList コントロールに関連付けて 508 準拠にする方法を教えてください。

Question

このコントロールを 508 コンプライアンステストに合格させるためにいくつかの方法を試しましたが、すべて失敗したようです。テスターからのフィードバックはなく、合格/不合格のみです。ラジオボタンの周りに自動的にレンダリングされるテーブルに関係していると思われます。ラベルはテーブル内にある必要があると思いますが、これは RadioButtonList のオプションではありません。以下は私が試して失敗した方法です。

フィールドセット/レジェンドソリューション

ASP/NET ページ:

<fieldset>
<legend>Review By:</legend>
<asp:RadioButtonList runat="server" ID="FilterType" AutoPostBack="true" Width="100%"
       BorderWidth="1"   OnSelectedIndexChanged="FilterType_OnSelectedIndexChanged" />
</fieldset>

レンダリングされた HTML:

<fieldset>
<legend>Review By:</legend>
<table id="ctl00_contentBody_FilterType" border="0" style="border-width:1px;
border-style:solid;width:100%;">
        <tr>
<td><input id="ctl00_contentBody_FilterType_0" type="radio"
name="ctl00$contentBody$FilterType" value="1" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$0
\',\'\')',  0)" /><label for="ctl00_contentBody_FilterType_0">Attending MD</label>
</td>
        </tr><tr>
<td><input id="ctl00_contentBody_FilterType_1" type="radio"
name="ctl00$contentBody$FilterType" value="2" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$1
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_1">CERMe Review 
Types</label></td>
        </tr><tr>
<td><input id="ctl00_contentBody_FilterType_2" type="radio" 
name="ctl00$contentBody$FilterType" value="3" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$2
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_2">Treating 
Specialty</label></td>
        </tr><tr>
<td><input id="ctl00_contentBody_FilterType_3" type="radio" 
name="ctl00$contentBody$FilterType" value="4" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$3
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_3">Ward Location</label>
</td>
        </tr>
</table>
</fieldset>

AssociatedControlID を使用してコントロールをラベルにリンクする

ASP.Net ページ:

<asp:Label ID="lblHiddenReviewType"  AssociatedControlID="FilterType" runat="server">
<div>Review Type:</div></asp:Label> 
<asp:RadioButtonList runat="server" ID="FilterType" AutoPostBack="true" Width="100%"
BorderWidth="1" OnSelectedIndexChanged="FilterType_OnSelectedIndexChanged" />

レンダリングされた HTML:

<td>
            <label for="ctl00_contentBody_FilterType"  
id="ctl00_contentBody_lblHiddenReviewType"><div>Review Type:</div></label> 
                <table id="ctl00_contentBody_FilterType" border="0" style="border-
width:1px;border-style:solid;width:100%;">
        <tr>
            <td><input id="ctl00_contentBody_FilterType_0" 
type="radio" name="ctl00$contentBody$FilterType" value="1" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$0
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_0">Attending MD</label></td>
        </tr><tr>
            <td><input id="ctl00_contentBody_FilterType_1"   
type="radio" name="ctl00$contentBody$FilterType" value="2" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$1 
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_1">CERMe Review Type</label>
</td>
        </tr><tr>
            <td><input id="ctl00_contentBody_FilterType_2" 
type="radio" name="ctl00$contentBody$FilterType" value="3" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$2
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_2">Treating 
Specialty</label></td>
        </tr><tr>
            <td><input id="ctl00_contentBody_FilterType_3" 
type="radio" name="ctl00$contentBody$FilterType" value="4" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$3
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_3">Ward Location</label>
</td>
        </tr>
    </table>

            </td>

コントロールを独自のパネルで囲む

ASP.Net ページ:

<asp:Panel id="pnlRadial" GroupingText="Review Type: " runat="server">
<asp:RadioButtonList runat="server" ID="FilterType"  AutoPostBack="true" Width="100%"
 BorderWidth="1" OnSelectedIndexChanged="FilterType_OnSelectedIndexChanged" />
</asp:Panel>

レンダリングされた HTML:

<div id="ctl00_contentBody_pnlRadial">
<fieldset>
<legend>Review Type:</legend>
<table id="ctl00_contentBody_FilterType" border="0" style="border-width:1px;border-
style:solid;width:100%;">
                <tr>
<td><input id="ctl00_contentBody_FilterType_0" type="radio" 
name="ctl00$contentBody$FilterType" value="1" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$0
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_0">Attending MD</label></td>
                </tr><tr>
<td><input id="ctl00_contentBody_FilterType_1" type="radio" 
name="ctl00$contentBody$FilterType" value="2" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$1
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_1">Reviewer</label></td>
                </tr><tr>
<td><input id="ctl00_contentBody_FilterType_2" type="radio" 
name="ctl00$contentBody$FilterType" value="4" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$2
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_2">Treating 
Specialty</label></td>
                </tr><tr>
<td><input id="ctl00_contentBody_FilterType_3" type="radio" 
name="ctl00$contentBody$FilterType" value="5" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$3
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_3">Ward Location</label>
</td>
                </tr><tr>
<td><input id="ctl00_contentBody_FilterType_4" type="radio" 
name="ctl00$contentBody$FilterType" value="3" 
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$4
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_4">Service Section</label>
</td>
                </tr>
</table>
</fieldset>
</div>

どんな助けでも大歓迎です!!

score 0 · Accepted Answer

テスターには、少なくともテストに使用しているものについて、合格/不合格よりも多くの情報を提供するように依頼します。たぶん、セクション508コーディネーターに参加を依頼することは、一部の人を助けるかもしれません。最初または2番目のスニペットが合格するはずです。準拠ソリューションは次のようになります。

<fieldset>
 <legend>Review type</legend>
 <table role="presentation"> //bonus for the role, not required
  <tr>
   <td>
    <input id="option1" name="myGroup" type="radio" />
   </td>
   <td>
    <label for="option1">Option 1</label>
   </td>
  </tr>
  <tr>
   <td>
    <input id="option2" name="myGroup" type="radio" />
   </td>
   <td>
    <label for="option2">Option 2</label>
   </td>
  </tr>
  ....
 </table>
</fieldset>

radiobuttonlist - ラベルを RadioButtonList コントロールに関連付けて 508 準拠にする方法を教えてください。

1 に答える 1

Related

Reference