有没有办法绕过 ASP 的控件 IDctl00、ctl01 等破坏 NVDA？

如何解决有没有办法绕过 ASP 的控件 IDctl00、ctl01 等破坏 NVDA？

首先，我是 ASP 的新手。

我正在研究我们网站的可访问性，我们有一个控件，其中包含一个中继器内部的单选按钮列表。使用屏幕阅读器 NVDA 时，它会将每个单选按钮读取为“1 of 1”，而不是“1 of 3”、“2 of 3”和“3 of 3”。

我已经诊断出该问题似乎来自于 ASP 自动将“ctl00”、“ctl01”和“ctl02”附加到每个单选按钮的事实。我知道如果我要删除这些和/或将它们全部更改为“ctl00”，NVDA 会按预期正确读取它们。

另一个我无法解释的怪癖是，将 Windows 和 Chrome 与 NVDA 一起使用会导致它被正确读取，但我在 Windows 上尝试过的任何其他浏览器和 Mac 上的所有浏览器（使用 VoiceOver，而不是 NVDA）不要按预期阅读。

有没有办法从 HTML 中的 name 属性中删除“ctl00”？

示例代码 (.ascx)：

<div class="css-radio-buttons">
    <ul class="css-radio-buttons__ul">
        <asp:Repeater 
            ID="shippingOptionsRepeater" 
            runat="server" 
            OnItemDataBound="OnoptionBound">
            <ItemTemplate>
                <li class="css-radio-buttons__radio-item">
                    <asp:RadioButton 
                        ID="shippingOptionRadioButton" 
                        runat="server" 
                        OnCheckedChanged="OnoptionChoice"
                        CssClass="css-radio-buttons__input"
                    />
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>

背后的代码：

protected void OnoptionBound(object sender,RepeaterItemEventArgs eventArgs)
{
    ShippingOption option = (ShippingOption)eventArgs.Item.DataItem;

    RadioButton radioButton = (RadioButton)eventArgs.Item.FindControl("shippingOptionRadioButton");
    // omitted
    radioButton.AutopostBack = true;
    radioButton.GroupName = GROUP_NAME_PREFIX + option.FulfillerId.ToString();
    //omitted
}

示例输出：

<div class="css-radio-buttons">
    <ul class="css-radio-buttons__ul">
        
                <li class="css-radio-buttons__radio-item">
                    <span class="css-radio-buttons__input" data-fulfiller-id="1" data-option-id="3"><input id="ctlOrderReview_shipments_ctl00_shippingOptions_shippingOptionsRepeater_ctl00_shippingOptionRadioButton" type="radio" name="ctlOrderReview$shipments$ctl00$shippingOptions$shippingOptionsRepeater$ctl00$ShippingOptions1" value="shippingOptionRadioButton" checked="checked" onclick="setUniqueRadioButton('input[name$=&quot;ShippingOptions1&quot;]',this);"><label for="ctlOrderReview_shipments_ctl00_shippingOptions_shippingOptionsRepeater_ctl00_shippingOptionRadioButton">FREE Delivery Between Dec 25-29</label></span>
                </li>
            
                <li class="css-radio-buttons__radio-item">
                    <span class="css-radio-buttons__input" data-fulfiller-id="1" data-option-id="2"><input id="ctlOrderReview_shipments_ctl00_shippingOptions_shippingOptionsRepeater_ctl01_shippingOptionRadioButton" type="radio" name="ctlOrderReview$shipments$ctl00$shippingOptions$shippingOptionsRepeater$ctl01$ShippingOptions1" value="shippingOptionRadioButton" onclick="setUniqueRadioButton('input[name$=&quot;ShippingOptions1&quot;]',this);setTimeout('__doPostBack(\'ctlOrderReview$shipments$ctl00$shippingOptions$shippingOptionsRepeater$ctl01$shippingOptionRadioButton\',\'\')',0)"><label for="ctlOrderReview_shipments_ctl00_shippingOptions_shippingOptionsRepeater_ctl01_shippingOptionRadioButton">$29.99 Delivery by Dec 24</label></span>
                </li>
            
                <li class="css-radio-buttons__radio-item">
                    <span class="css-radio-buttons__input" data-fulfiller-id="1" data-option-id="1">
<input id="ctlOrderReview_shipments_ctl00_shippingOptions_shippingOptionsRepeater_ctl02_shippingOptionRadioButton" type="radio" name="ctlOrderReview$shipments$ctl00$shippingOptions$shippingOptionsRepeater$ctl02$ShippingOptions1" value="shippingOptionRadioButton" onclick="setUniqueRadioButton('input[name$=&quot;ShippingOptions1&quot;]',this);setTimeout('__doPostBack(\'ctlOrderReview$shipments$ctl00$shippingOptions$shippingOptionsRepeater$ctl02$shippingOptionRadioButton\',0)"><label for="ctlOrderReview_shipments_ctl00_shippingOptions_shippingOptionsRepeater_ctl02_shippingOptionRadioButton">$39.99 Delivery by Dec 23</label></span>
                </li>
            
    </ul>
</div>

解决方法

我已经很久没有接触 ASP 了，所以如果这只是 80% 正确，那么我很抱歉。

话虽如此，您可以使用 GroupName 覆盖中继器内单选按钮的自动命名。

所以在接下来的调整中，我只是简单地添加了 GroupName="shipping"，这应该会生成所有带有 name="shipping" 的单选按钮，然后它会按预期工作（我相信，再次道歉它一直是一个 looong时间！）。

<ItemTemplate>
            <li class="css-radio-buttons__radio-item">
                <asp:RadioButton 
                    ID="shippingOptionRadioButton" 
                    runat="server" 
                    OnCheckedChanged="OnOptionChoice"
                    CssClass="css-radio-buttons__input"
                    GroupName="shipping" 
                />
            </li>
        </ItemTemplate>