Quelle est la manière correcte d'appliquer le texte sr-only à asp: LinkButtons qui sont variablement visibles?

Question

Je travaille pour rendre mon code plus accessible aux lecteurs d'écran et j'ai rencontré cette situation et je n'ai pas trouvé de réponse pour cela. Lorsque les boutons ne sont visibles que si une condition est remplie, comment appliquez-vous correctement le texte sr-only? Je veux éviter que le lecteur d'écran ne lise le texte lorsque le bouton n'est pas visible car le bouton ne fournira aucune fonction à ce moment-là.

Les boutons sont visibles lorsque le téléavertisseur est disponible (suivant et précédent selon le cas). S'il vous plaît voir le code ci-joint.

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

Une chose que j'ai considéré est de placer une travée à l'intérieur du asp: LinkButton (s) et du code-behind conditionnelle en ajoutant class = « sr seule » et la durée de texte approprié. Suis-je sur la bonne voie? Y a-t-il un meilleur moyen? Merci pour votre contribution

Answer 1

Je poste ma solution actuelle à ce problème. En aucun cas je ne pense que c'est la meilleure solution et j'apprécierai si vous prenez votre temps pour me montrer une meilleure manière. Voici ce que je l'ai fait sur ma page 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> 

Et dans mon code derrière

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 

Voici ce que ce code ressemble quand généré. Notez la <li> vide parce que visible est définie sur false pour 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>