Hello! We have run an accessibility scan through Level Access and it returned an issue with the dropdown and it's lack of a label. The given errors were "The input element does not have an associated visible label" & "HTML5 placeholder is the only visible label". When I dug into the HTML, I noticed, the inputs that functioned correctly had an id='abc_ariaTItle'
on the h5 question and on the input itself, there was an aria-labelledby='abc_ariaTitle'
so they were correctly connected. However, on the drowdown, the h5 question has an id='efg_ariaTitle'
but the input does not have an ariaLabelledby=
. Instead, the container div with role='combobox'
has the ariaLabelledby='efg_ariaTitle'
. This seems to be causing a critical level issue on the scan because the label is not accurately connected to the input. This seems to be a bug so I wanted to reach out about it. Thanks for your help!
Question
T14862
Visible to All Users
Hello Kelley,
Thank you for reaching out. I tested a Dropdown question with the NVDA speech viewer. An
input
element withrole="combobox"
doesn't actually have anaria-labeledby
attribute. Nevertheless, I confirmed that the speech viewer correctly announced a value selected within a dropdown. Please refer to my screenshots below.Would you please elaborate on the actual accessibility issue which is caused by this Dropdown configuration? I look forward to your reply.
Hey Jane,
Thanks for your reply!
I see that the placeholder “Select…” in your image is the aria-label and that was the 2nd issue that the scan showed " HTML5 <placeholder> attribute must not be used as a visible label replacement. ” . I’ve attached a screenshot of the error description from Level Access below. The other error was " The input element does not have an associated visible label” and so because there is no associated label, and the placeholder is the label, it is showing critical level error for it. I’m curious why for these types of inputs (the dropdown) why the input does not have a ariaLabelledby= s imilar to how the other inputs do that is linked to the ID of the question h5 input. I also attached a screenshot of the combox div that has the labelledby that I was describing. Thanks!
Hello Kelley,
Thank you for the update and clarification. So, from what I gather, the
Select...
placeholder should not be read by a screen reader. I'll forward this issue to our developers for further investigation: https://github.com/surveyjs/survey-library/issues/7071.We'll update you as soon as we have any news to share.
Thanks
Thanks so much Jane!
Hello Kelley,
Thank you for your patience. With the recent update (v1.9.112), we made changes to the Dropdown HTML structure to eliminate the issue. Please upgrade to v1.9.112 and check to see how a Dropdown performs with the Level Access scanner. Please share your results with us.
Thanks
Thank you for letting me know about that. I will get it upgraded and re-run the scanner. I had one question about the upgrade-
We currently have “survey-core”, “survey-react” and “survey-react-ui” in our package.json. Do all of those need to be upgraded to the 1.9.112 version or just the “survey-core”? I noticed on npmjs.com all 3 packages link to the surveyjs repo so wasn’t sure which that change was held in. Thanks!
Kelley
On Oct 11, 2023, at
Hello Kelley,
Thank you for the update. The
survey-react
package is no longer required. We separated the core functionality from the rendering code. You can learn more about this change in this post. Now, to integrate a SurveyJS Form Library for a React JS app, it is necessary to install thesurvey-react-ui
package. Thesurvey-core
package will be installed as a dependency.So, answering your question - please remove
survey-react
from your package.json and upgrade thesurvey-react-ui
andsurvey-core
packages.Please feel free to update this thread if you have new information.
Thanks