[split-layout] Provide proper semantics for screen readers

[juuso-vaadin]

What is the problem?

Graphical control elements should have semantics that describe their purpose. The Split Layout handle isn't currently focusable with keyboard and isn't visible to screen reader users.

WCAG success criteria for controls: https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

Currently the Split Layout is not adjustable with keyboard, but accessible name can help users with other assistive technologies.

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS

[yuriy-fix]

Is it about the handle or the layout itself?
What would be other assistive technologies?

[jouni]

I don't think the handle is even focusable, so I wonder what an accessible name on that would accomplish. Or can you move screen reader focus on it (rather than regular keyboard focus)?

[juuso-vaadin]

This is about the split handle.

The topic was originally raised in an accessibility audit of a Vaadin 23 application. I suppose the "other assistive technologies" refers to being able to focus the control using the virtual cursor feature of the screen readers. Another edge case could be screen readers being able to announce the element that you're pointing with mouse cursor. Not sure if that is even intended to be covered in the WCAG specs though.