We recently received a rejection in accessibility testing due to the use of H tags for question fields in our forms.
According to WCAG accessibility guidelines, question fields should be defined with a <label> tag or another suitable HTML element for better accessibility.
Is there a way to change the H tag to a <label> tag or another appropriate element within SurveyJS to comply with these guidelines?
If this feature is not currently available, is this something you plan to implement in the future?
Thank you for your assistance!
Hi Ziv,
By default, question titles are rendered within the H5 heading HTML element. You can replace a question title H5 HTML element with
labelusing thetitleTags.questionproperty: View Demo.import { settings } from "survey-core"; settings.titleTags.question = "label";Let me know if this setting works for you. If you wish to update other form HTMLs, please let me know.
I’ve been trying to use the
titleTags.questionproperty to replace the defaultH5tag with alabeltag for the question titles in my survey form, as suggested. However, after applying the change as follows:settings.titleTags.question = "label";I am encountering an issue where the question titles are no longer displayed at all. The title is completely missing after this change.
Could you please advise on what might be causing this issue or if there is any additional configuration required to make this work?
Thank you for your assistance!
Hi Ziv,
I created the following demo, however, didn't reproduce the issue: View CodeSandbox. A question title is rendered by using a
<label>HTML element:Would you please clarify how to reproduce the issue?
Hi Jane,
Thank you for the quick response.
You're right, the sample you sent is in React. We're trying to accomplish this using Angular, and in Angular, it remains as an
<h5>tag.This is the libraries we using in package.json
"survey-angular": "^1.9.136", "survey-core": "^1.9.136", "survey-creator-core": "^1.9.136", "survey-creator-knockout": "^1.9.136", "survey-knockout-ui": "^1.9.136", "survey-pdf": "^1.9.136", "surveyjs-widgets": "^1.9.136",Thank you
Hi Ziv,
Thank you for the update. Unfortunately, you're using outdated packages. If you're using Angular v12.0.0 and newer, please consider using the
survey-creator-coreandsurvey-creator-angularpackages for SurveyJS Creator andsurvey-coreandsurvey-angular-uipackages for Form Library.Upgrade your packages and version and let me know if you have any further questions.
Hi Jane,
We update to the latest version, but it's not working.
Do you have some demo with Angular?
"survey-angular-ui": "^2.0.1", "survey-core": "^2.0.1",Thank you
Hi Ziv,
We will research this issue and update you once we have any news to share: Question titles are not rendered after setting settings.titleTags.question = "label". Please stay tuned.
Hi Ziv,
I discussed this issue with our developers.
SurveyJS forms use HTML section headings (
<h1>–<h6>) to render question, panel, page, and survey titles. Using heading elements helps structure an HTML document, making it more accessible and improving search engine understanding of page hierarchy. This approach aligns with accessibility guidelines.However, we’ve decided to support the
<label>element for form element titles as well. We're working on this update, and we’ll notify you once the fix is available: Question titles are not rendered after setting settings.titleTags.question = "label".In the meantime, if you have any references to guidelines recommending
<label>or another element for form titles, please share them for our reference.Thank you
Hi Jane
I don't have any specific guidelines. It's just that the question title could be replaced from
<h1>-<h6>to<label>or another tag that is not a heading tag.Thank you