将仅sr文本应用于可变可见的asp：LinkBut​​tons的正确方法是什么？

Question

我正在努力使我的代码更适合屏幕阅读器使用，但我遇到这种情况并且无法找到答案。 当仅在满足条件的情况下才可见按钮时，如何正确应用仅sr文本？ 我想避免屏幕阅读器在按钮不可见时阅读文本，因为那时按钮将不提供任何功能。

当分页可用时，这些按钮是可见的（适当时是下一个和上一个）。 请参阅随附的代码。

<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：LinkBut​​ton（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>