What is the correct way to apply sr-only text to asp:LinkButtons that are variably visible?

Question

I am working to make my code more accessible for screen-readers and I have come across this situation and have been able to find no answer for it. When buttons are only visible given a condition is met, how do you properly apply sr-only text? I want to avoid the screen-reader reading the text when the button is not visible as the button will not provide any function at that time.

The buttons are visible when paging is available (next and previous as appropriate). Please see the attached code.

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

One thing I have considered is placing a span inside the asp:LinkButton(s) and from the code-behind conditionally adding class="sr-only" and the appropriate span-text. Am I on the right track? Is there a better way? Thanks for your input

Answer 1

I am posting my current solution to this problem. By no means do I think it is the best solution and I will appreciate if you take your time to show me a better way. Here is what I did on my aspx page:

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

And in my code behind

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

Below is what this code looks like when generated. Notice the empty <li> because visible is set to false for 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>