什么是正确的方式来应用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>