Solution:
Elements having a WAI-ARIA complementary role must have a label specified with aria-label or aria-labelledby so as not to confuse users while navigating a page.
The following example shows an element with a WAI-ARIA complementary role. The element is labeled with an aria-labelledby attribute that references an html heading.
The following example shows an element with a WAI-ARIA complementary role. The element is labeled with an aria-label attribute. The label in this example is not visible to sighted users. However, a screen reader will read the label.
Page: Story
On Element: /html/body/main/aside
Solution: Elements having a WAI-ARIA complementary role must have a label specified with aria-label or aria-labelledby so as not to confuse users while navigating a page.
The following example shows an element with a WAI-ARIA complementary role. The element is labeled with an aria-labelledby attribute that references an html heading.
The following example shows an element with a WAI-ARIA complementary role. The element is labeled with an aria-label attribute. The label in this example is not visible to sighted users. However, a screen reader will read the label.