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

Consider adding the new information you provide in comments to the main post as an edit. — bendl, Aug 28 '17 at 15:24
thanks @bendl, took your advice and added my comment as additional text on the main post. — JakeofSpades, Aug 28 '17 at 15:36
Are you testing in a screen reader? In general, an sr-only class just visually hides the text. Your page is likely hiding the buttons altogether via display:none or similar, so it should not conflict with your sr-only styles. A functional example would help. — aardrian, Aug 29 '17 at 22:13
@aardrian I am using NVDA for testing purposes. I will share on here how I solved my problem. I'm not certain it's the best way but it has worked thus-far. — JakeofSpades, Aug 29 '17 at 22:37

JakeofSpades · Accepted Answer · 2017-08-30T16:35:51.670

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>

My .NET days are way way behind me, but I know that `runat=server` results in HTML that may look nothing like what you put in there. Can you share the HTML output? For example, does `visible=false` generate no element, an element with `display:none`, an element with CSS `visibility` set, …? These can all result in different outcomes. What I _can_ see so far looks good though. — aardrian, Aug 30 '17 at 15:36
@aardrian When one of the buttons are set to visible=false this is what occurs. The list item
I see your updated answer. and I think the missing element is likely the best approach. — aardrian, Aug 31 '17 at 17:06

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

1 Answers1