将 sr-only 文本应用于可变可见的 asp:LinkButtons 的正确方法是什么？

Question

我正在努力使我的代码更容易被 screen-readers 访问，我遇到过这种情况，但一直找不到解决办法。当按钮仅在满足条件时可见时，您如何正确应用 sr-only 文本？我想避免屏幕-reader 在按钮不可见时读取文本，因为那时按钮将不提供任何功能。

当分页可用时按钮可见（下一页和上一页视情况而定）。请看附件代码。

<div id="divPager" runat="server"  class="gutter-bottom text-center">
  <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="ServerClick" />
    </Triggers>
    <ContentTemplate>

      <ul class="pager">
        <li>
          <asp:LinkButton runat="server" ID="btnPrev" Visible="False" CommandName="PrevPage">
            <i class="fa fa-arrow-left"></i> Prev
          </asp:LinkButton>
        </li>
        <li>
          <asp:LinkButton runat="server" ID="btnNext" Visible="False" CommandName="NextPage">
            Next <i class="fa fa-arrow-right"></i>
          </asp:LinkButton>
        </li>
      </ul>

    </ContentTemplate>
  </asp:UpdatePanel>
</div>

我考虑过的一件事是在 asp:LinkButton(s) 中放置一个跨度，并从代码隐藏中有条件地添加 class="sr-only" 和适当的跨度文本。我在正确的轨道上吗？有没有更好的办法？感谢您的输入

Answer 1

我正在发布我当前对此问题的解决方案。我绝不认为这是最好的解决方案，如果您花时间向我展示更好的方法，我将不胜感激。 这是我在我的 aspx 页面上所做的:

<ul class="pager">
            <li>
              <asp:LinkButton runat="server" ID="btnPrev" Visible="False" CommandName="PrevPage">
                <span id="btnPrevSR" runat="server" class="sr-only"></span>
                <i class="fa fa-arrow-left"></i> Prev
              </asp:LinkButton>
            </li>
            <li>
              <asp:LinkButton runat="server" ID="btnNext" Visible="False" CommandName="NextPage">
                <span id="btnNextSR" runat="server" class="sr-only"></span>
                <i class="fa fa-arrow-right"></i> Next
              </asp:LinkButton>
            </li>
          </ul>

而在我后面的代码中

If btnPrev.Visible = True Then
  btnPrevSR.InnerHtml = "Previous Page of Announcements"
End If

If btnNext.Visible = True Then
  btnNextSR.InnerHtml = "Next Page of Announcements"
End If

下面是这段代码生成后的样子。注意空 <li> 因为 btnPrev

的 visible 设置为 false

 <ul class="pager">
            <li>

            </li>
            <li>
              <a id="ctl00_ctl00_cpContent_cpContent_btnNext" href="javascript:__doPostBack(&#39;ctl00$ctl00$cpContent$cpContent$btnNext&#39;,&#39;&#39;)"><span id="ctl00_ctl00_cpContent_cpContent_btnNextSR" class="sr-only">Next Page of Announcements</span>
                <i class="fa fa-arrow-right"></i> Next
              </a>
            </li>
          </ul>

将 sr-only 文本应用于可变可见的 asp:LinkButtons 的正确方法是什么？

What is the correct way to apply sr-only text to asp:LinkButtons that are variably visible?

asp.net

accessibility

asplinkbutton

screen-readers