10 Comments

  1. Hello, Sathish Kumar! I highly familiar with HTML and CSS but sometimes have questions about link and button – How states could i use in mobile screens? Using states :active and :focus for link it’s enough? And :hover using only desktop screen.
    What is your opinion?

  2. Hi! It would be great to provide an updated article that includes native mobile in your example and not just web – the premise is still correct, but should include the caveat that selecting the native app button may navigate the user within the app, but a link takes the user to an external site. Would you agree?

  3. Hi,
    I have one question regarding the tertiary button which appears as a link but operate as a button where button tags are used but visually it seems link. Other than SR user for everyone it seems to be link which sets incorrect expectation, so what can be do in that case.

    1. Hi Vaibhav,
      Thanks for the comment. As mentioned in the blog post, we need to prioritize functionality and the design team needs to design buttons and links appropriately.
      If something appears to be a link but functions as a button, it may confuse users who rely on visual assistance from screen readers. I recommend speaking with the design team and educating them on this issue.

      1. As a developer you would code to the function. As an accessibility professional you would have a conversation first with the designer or better, more widely with the design team, about the pattern of using blue text to indicate a button or modal. Other items like a tooltip/more information icon could be used, not just a big button, for example if the action is to open a modal. As a designer you’d think about the various ways someone might access the content that the button goes to, and consider whether blue text is the best indicator. As a PO, there’s the question of why this “linking” of information is needed. What is the requirement? Why is it there? Is it necessary to take the user somewhere else?

        Lastly, in a web vs mobile app space, there are times when a webpage makes sense as a functional link whereas in the app for the same function you might link to the same webpage in a browser. But if the action opens a modal or goes to a different section of the same app, many a11y SME’s follow the idea that any navigation action that keeps the user in-app is functionally a button; I’ve seen some variation on this though, which is maybe why this issue comes up regularly in apps.

        1. Thank you for bringing up the importance of considering accessibility in the design and development process. It’s crucial to have conversations with the design team, question the requirements, and consider different ways users might access the content. It’s also important to consider the difference between web and mobile app approaches. Your insights are much appreciated.

  4. If i used buttons to take a person to another page on the website instead of the picture links im using on the homepage atm would this be okay

    Would changing the picture links to button links speed up the load time of my homepage?

    Lastly i need 15 points to get my website speed to 99% mobile would removing the pics and adding buttons do this?

  5. I strongly believe that whatever the reason, button must be designed as button and links should be designed as link. Buttons can be triggered by using either enter key or spacebar key, whereas links can be triggered only using enter key. if we style links as buttons there are chances users endup pressing spacebar and user will feel like he/she is been cheated here.

Leave a Reply

Your email address will not be published. Required fields are marked *