时间戳

首页 > 解决方案 > 有没有办法绕过 ASP 的控制 ID（ctl00、ctl01 等）破坏 NVDA？

asp.net - 有没有办法绕过 ASP 的控制 ID（ctl00、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.netaccessibilitynvda

解决方案

自从我接触 ASP 以来已经很长时间了，所以如果这只是 80% 正确，那么我很抱歉。

话虽如此，您可以使用GroupName.

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

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

推荐阅读