Twoslash output is inaccessible

[delucis]

Hey there 👋 I noticed that currently TwoSlash produces inaccessible output.

This issue is not a comprehensive accessibility audit, but I wanted to draw attention to some key issues that would need addressing to make TwoSlash code blocks usable by more users.

The references here are to Web Content Accessibility Guidelines (WCAG) 2.2

Key accessibility failures

Guideline 2.1 Keyboard Accessible

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes

Twoslash tooltips are only available via mouse/pointer hover, so fails most of WCAG Guideline 2.1 regarding keyboard accessibility: it should be possible for users to access the content of tooltips using only the keyboard.

Guideline 4.1 Compatible

Maximize compatibility with current and future user agents, including assistive technologies.

Twoslash tooltips are not available to screen readers: navigating a code sample using Twoslash, there is no way for screenreaders to access the content of tooltips.

Other details

There are some smaller things like the following, but these are kind of moot given the bigger issues:

1.4.13 Content on Hover or Focus

A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;

Tooltip content is not dismissible via a mechanism other than moving the pointer’s hover position.

[natemoo-re]

I don't know if it's an explicit project goal that Twoslash output must not include JavaScript, but the library currently relies entirely on CSS for functionality. As this issue outlines, that makes the content of tooltips inaccessible to users who navigate via keyboard or screen readers.

How possible would it be to keep the current CSS-only foundation that is currently in place, but use the forthcoming Popover API to provide a more accessible experience in browsers that support it? There could be some challenges matching the hover behavior with the Popover API without additional JavaScript to implement imperative popover toggling, but 1) encoding the tooltips in the markup would support screen readers and 2) JavaScript would likely be necessary to support the roving tabindex pattern anyway.

[orta]

I think this energy is probably worth putting into the new version of twoslash which might have more of a way to customize how the twoslash annotations are turned into HTML due to it being a shiki transformer: https://github.com/twoslashes/twoslash

[delucis]

I think this energy is probably worth putting into the new version of twoslash which might have more of a way to customize how the twoslash annotations are turned into HTML due to it being a shiki transformer: twoslashes/twoslash

Ah, thank you! I missed the note in the README about the new repo. Moved my issue over to: https://github.com/twoslashes/twoslash/issues/32