sr-onlyテキストをaspに適用する正しい方法は何ですか？LinkBut​​tonsは可変表示されますか？

Question

私はスクリーンリーダーのために自分のコードをより使いやすくするために取り組んでいます。私はこの状況に遭遇し、答えを見つけることができませんでした。条件が満たされている場合にのみボタンが表示される場合、どのようにsr-onlyテキストを適切に適用しますか？ボタンが表示されていないときに、ボタンがその時点で何の機能も提供しないので、スクリーンリーダーがテキストを読むのを避けたい。

これらのボタンは、ページングが利用可能な場合（必要に応じて前後）に表示されます。 添付のコードをご覧ください。 LinkBut​​tonコントロール（複数可）と、コードビハインドから条件付きでクラス=「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内のスパンを置いています。正しい軌道にいるのですか？より良い方法がありますか？あなたの入力をありがとう

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 

以下このコードが生成されたときにどのように見えるかです後ろ。目に見えるが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>