[aria] Request: Provide a way to hide focusable elements from only assistive technologies

[ianthedev]

Say, on a web developer's personal page, there is an unordered list showing icons of web development skills which the developer has. And when mouse cursor or keyboard interacts with an icon, a tooltip would show up letting sighted visitors know the skill name. The HTML markup of the unordered list would be:

<ul>
	<li>
		<span class="visually-hidden">HTML</span>
		<button type="button" aria-hidden="true">
			<img src="icon-html.png" alt="">
			<span class="tooltip">HTML</span>
		</button>
	</li>
	<li>
		<span class="visually-hidden">CSS</span>
		<button type="button" aria-hidden="true">
			<img src="icon-css.png" alt="">
			<span class="tooltip">CSS</span>
		</button>
	</li>
	<li>
		<span class="visually-hidden">JavaScript</span>
		<button type="button" aria-hidden="true">
			<img src="icon-javascript.png" alt="">
			<span class="tooltip">JavaScript</span>
		</button>
	</li>
</ul>

Each list item contains a direct child span element, which is for assistive technologies to read and will be made visually hidden through CSS.

Each list item also contains a direct child button element, which contains a small img element followed by a span element. The small img element is used as an icon and the span element is to be displayed as a tooltip. These button elements are for mouse cursor and keyboard to interact with and display the tooltips to sighted users, so I use aria-hidden="true" on them to try to hide them from assistive technologies.

The problem is, the button elements would still be focusable to assistive technologies and would therefore confuse users of assistive technologies. And tabindex="-1" would not help here because it would make the buttons unfocusable to sighted keyboard users, too.

To solve this problem, we need a way to hide a focusable element from only assistive technologies.

[keithamus]

Thanks for filing the issue @ianthedev.

I'd recommend finding another way to structure this HTML. I understand the concern around making these buttons not focusable for assistive technologies but pages should be equally interactive for both users of assistive technologies as well as those who don't.

I won't make firm suggestions on the exact way to represent this HTML that's accessible with the current standards, as I am not entirely sure the intent of this markup. However using a tooltip to describe an icon is quite a common pattern, I am sure there are many resources at your disposal that can provide some insight into how to build such patterns, perhaps WCAG 1.4.13 Content on Hover or Focus (Level AA) or WCAG Understanding SC 1.4.13: Content on Hover or Focus (Level AA) or Tooltip Accessibility: How to Create Accessible Tooltips (According to WCAG) can offer useful jumping off points here.

With that all said, I think there's nothing actionable for the ARIA working group here - the group has no plans to prevent interactive elements from being focusable exclusively for assistive technologies, as each mode of interaction should have an equivalent experience. Given this, I'm going to close the issue but please feel free to discuss this further, we can always re-open if needed.