Accessibility concerns for Image Select element

Created on 14 May 2024, 7 months ago

Problem/Motivation

The implementation of the Image Select Element causes certain accessibility concerns. The underlying select element is made invisible by setting the opacity to 0. This keeps the element in the document flow, meaning that screen readers first encounter the select element, then the images. It also means you can still accidentally click on the drop down menu from the select element if you happen to click where it is.

Secondly, the list of images is a sibling element to the select element itself, so it is not clear from using a screen reader what the images are for, or that they could be an answer to the prompt.

Steps to reproduce

This should be the case for any Image Select element.

Proposed resolution

At the very least, the select element should be hidden using visibility: hidden; instead of the current method.

Ideally, the field should be implemented as a fieldset (similar to the Radios element) instead of as a select element so that the prompt can better be associated with the images.

The proposed solution requires only changes to the UI.

Feature request
Status

Active

Version

6.2

Component

Accessibility

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024