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