General: compatibility with touch/assistive technology devices

[TetraLogicalHelpdesk]

Priority

High

Pages/screens/components affected

• all components

Description

We encountered a variety of unusual behaviours when operating many of the components using assistive technologies on mobile/tablet devices. In most cases, these issues are not directly covered by a particular WCAG Success Criterion, but are more a general issue of using approaches that are not currently accessibility supported on touch/assistive technology environments.

In particular on iOS/VoiceOver, some of the components - such as vaadin-button, vaadin-checkbox, and vaadin-details - were not triggerable/operable. While they receive VoiceOver focus, double-tapping to activate/check the controls has no effect. This is likely due to how these components are coded and how they delegate focus to the "real" component in the shadow DOM, and how event handling takes place at this level. However, VoiceOver does not trigger focus when the screen reader's reading cursor/focus is moved, which is likely leading to the "real" element with the actual JavaScript handling not being focused.

While some of the components, such as the vaadin-combo-box and vaadin-time-picker, work reasonably well on desktop/keyboard environments with assistive technologies, operation with a touch device and assistive technologies is difficult - since the popup itself, once visible, does not immediately follow the component in the page structure, screen reader users are unable to open the popup and then easily find the displayed options - instead, these users end up navigating through all the underlying page, until they reach the popup itself at the end of the page structure.

As noted in other issues, when modal/modal-like elements are displayed, they do not currently hide the underlying page from assistive technologies. While this is less problematic on desktop/keyboard environments, where focus handling/trapping has been implemented for the most part, on touch/AT environments this once again leads to users navigating/reading through the underlying page.

The vaadin-rich-text-editor is effectively unusable on touch screen devices even without assistive technology running; basic interactions to style content by selecting the text and tapping a control failed to work on anything other than the first line of content.

User impact

Users of assistive technologies on mobile/touch devices will find it challenging or impossible to use many of the components.

Required solution

In some instances, addressing separate issues already identified in this assessment (such as issues related to handling modal-like components, and the general issue around elements with robust role/name announcements) is likely to improve compatibility with assistive technologies in general, including those of touch devices.

Particularly in the case of iOS/VoiceOver, there are bugs/incompatibilities with how programmatic focus is moved/handled. When explicitly moving focus via JavaScript (for instance, when a dialog or popup is opened), you may want to experiment with adding a short time delay between the element being displayed and focus being moved.

Note that even following WAI-ARIA Authoring Practices may not guarantee full compatibility for touch/AT users - see for instance this ongoing GitHub issue on aria-practices 'Guidance for touch devices'.

In general, we would recommend addressing issues identified in this assessment, and subsequently reviewing all components on touch devices with assistive technologies (iOS/Safari/VoiceOver, Android/TalkBack using both Chrome and Firefox). Further changes/refinements may be necessary in order to address specific shortcomings/quirks in these environments.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the components, their variants, and the documentation website have been tested for the same issue.
• All issues identified throughout the rest of the components/website have been resolved or filed as new issues.

Test data

Test date: March 2021
Website: vaadin.com/components, vaadin.com/docs-beta

[rolfsmeds]

Closing as probably fixed and not really actionable.