While testing, our team identified an issue: the ScreenReader, like Voice Over (Apple) and NVDA, read the options (single-select and multi-select) twice. It is occurring due to the aria-labelledby in HTML flow has the group header, label, and the option text all added in a single line. Is there a way to edit it and customize the aria-labelledby for individual options?
<div class="choice checkbox"><div class="choice-error-container"><div class="choice-error"><label class="choice-label" for="mc-choice-input-QID13-1"><input aria-invalid="false" aria-labelledby="choice-display-QID13-1 choice-group-display-QID13-cg_3 exclusive-choice-label-QID13-1" id="mc-choice-input-QID13-1" name="QID13" role="checkbox" type="checkbox"><span class="radio-button checkbox"></span><span class="choice-content"><span class="display-with-image" id="choice-display-QID13-1"><span class="display-with-image-display rich-text">Métis</span></span></span></label></div></div></div>
These are the options in the survey, which are being read twice:
