Accessibility: instead of label on button with icon try title on icon

[eemt]

The documentation under Foundation -> Icons -> Accessibility makes the following recommendation:

If the icon in an interactive item does not have text then the parent interactive item (typically a button or link) should have an appropriate aria-label describing the interaction.

<cds-icon-button aria-label="toggle menu">
  <cds-icon shape="bars"></cds-icon>
</cds-icon-button>

I propose that this is not the best solution.

I recommend that instead of using aria-label on the button, it is better to use the title attribute on the icon.

The documented solution addresses the issue of missing text on the button. However, it leaves open the lack of text on the icon. Furthermore, using title on the icon has the advantage that mouse using sighted users will get a tool tip description of the button. This avoids unnecessary use of aria and gets three advantages instead of one.

<cds-icon-button>
  <cds-icon shape="bars" title="toggle menu"></cds-icon>
</cds-icon-button>

[hippee-lee]

Hi @eemt, thanks for the suggestion. We have worked with our internal accessibility team to implement the simplest accessible icons that meet wcag guidelines.

Here are the reasons why we are not doing it like your suggestion at this time:

The recommended best practice is that the aria-label be on the interactive element that it describes. Not on the content within it. This means that using it on the icon is valid if we want to describe the icon as a context to additional text content inside the button. Note, this means that an aria-label or title on the svg directly can fail in some situations; whereas the aria-label on the interactive element is a more robust solution.

In addition, the original title attribute was complicating the clr-icons b/c it had to set hidden text content that could be read by a screen reader. Then it got weird because the title + hidden content could potentially duplicate the labeling content. E.g:

<cds-button> <cds-icon shape="bars"></cds-icon> menu </cds-button>

In the case above, the icon needs to be invisible to a screen reader. When cds-icons (a re-write of the original clr-icons) was implemented for @clr/core we simplified things and made cds-icon elements inert, essentially they do not represent anything and we can use the browser tools to set them up for specific use cases:

1. If its decorative, our consumers do not have to do anything
2. If its an image, use the role="img" on the icon element
3. If its interactive, use aria-label on the interactive element or use additional text in the button

This article digs down into more details and was used as a reference as we iterated on a solution with the accessibility team.