什麼是正確的方式來應用sr-only文本的asp：LinkBut​​tons是可變的可見？

Question

我正在努力讓屏幕閱讀器更易於使用我的代碼，並且遇到了這種情況，並且找不到任何答案。如果只有在滿足條件的情況下按鈕纔可見，那麼您如何恰當地應用sr-only文本？當按鈕不可見時，我想避免屏幕閱讀器閱讀文本，因爲此時按鈕不會提供任何功能。

按鈕在分頁可用時可見（根據需要選擇下一個和上一個）。 請參閱附件中的代碼。

<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），並從代碼隱藏有條件地將類=「SR-只有」和相應的跨度文本。我在正確的軌道上嗎？有沒有更好的辦法？感謝您的輸入

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>因爲visible設置爲false btnPrev

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