Accessibility of Icon Buttons?



  • I have a challenge: I'm working on a project and I used icon buttons. Someone said icon buttons are not accessible because they don't have labels.

    ARIA and some HTML techniques can achieve accessibility compliance: https://www.sarasoueidan.com/blog/accessible-icon-buttons/

    To improve usability I've tried adding tooltips like intercom:

    ![Intercom Tooltips

    However, I was told that all icons need labels and that tooltips will not work on mobile as they don't have a hover state. Following this logic, icon buttons should not exist at all.

    I'm confused with this premise because it is widely used by many companies with solid accessibility teams and user researchers. Technically if the html is taken care of, then you really don't even need the tooltips.

    For example: Google's Material action items

    Google Material Action Items

    https://material.io/components/app-bars-top#anatomy

    Adobe Spectrum Quick Actions

    Adobe Spectrum Quick Actions

    https://spectrum.adobe.com/page/quick-actions/

    I understand that it is desirable to have labels. But, thinking about growing complex single-page applications with lots of modes like Figma and Miro that need to work both on mobile and small laptops, having labels, in my opinion, will decrease usability for people with cognitive disabilities (busy UI).

    Thoughts?



  • As long as icons are recognizable. the user's understanding of an icon is based on previous learnings or experiences. Icons without labels might not help your UX but they might not break it.

    So on this note, you should be on the safe side when using notorious icons like: print, settings, edit, play, share, save etc. but if you want to communicate a new idea through a icon it might cause confusion among users.

    This has not stopped big companies using icon as they also rely on learnability.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2