Message: Good Morning Ninja Forms Representative,
I am currently performing an accessibility audit utilizing the WCAG 2.1 AA standard guidelines and various accessibility tools (see link below.)
WAVE Evaluation Tool for the Google Chrome browser: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
Browser Environment: Chrome Version 75.0.3770.100 (Official Build) (64-bit)
- Click on ‘Feedback’ link in the top navigation.
- Perform a WAVE scan on this Ninja Forms ‘Feedback’ form.
The WAVE scan has identified 2 accessibility queries that I am looking to bring into compliance:
ITEM #1: Form Label: Empty ‘Form Label’ is present, but does not contain any content. WCAG 2.4.1: Form Labels must-have content specified.
Fields in Question:
- I visited because…
- I accessed services related to…
- I had trouble finding
- I didn’t use the search feature because…
- I would describe myself as…
What It Means: A form label is present but does not contain any content.
Why It Matters: A element that is associated to a form control but does not contain text will not present any information about the form control to the user.
How to Fix It: Ensure that the form label contains text that describes the function of the associated form control. Labels are not required for image, submit, reset, button, or hidden form controls. If a label is not necessary visually, a descriptive title attribute may be added to the form control.
The Algorithm... in English A form label is present and associated with an existing form control (using for/id or surrounds the form control), but does not contain any text or images with alternative text.
ITEM #2. Missing Form Label: A form control (Star Likert Scale) does not have a corresponding label. WCAG 2.4.1: Form Labels must-have a corresponding label specified.
Star Likert Scale (Fields in Question):
- easy to understand
- met my needs today.
- I can easily find services.
- I would recommend to friends.
What It Means: A form control does not have a corresponding label.
Why It Matters: If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.
How to Fix It: If a text label for a form control is visible, use the element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.
The Algorithm... in English: An (except types of image, submit, reset, button, or hidden), , or does not have a properly associated label text. A properly associated label is: a element with a for attribute value that is equal to the id of a unique form control a element that surrounds the form control, does not surround any other form controls, and does not reference another element with its for attribute a non-empty title attribute, or a non-empty aria-labelled by attribute.
This accessibility issue was found using WebAIM’s WAVE Evaluation Tool, a tool that helps find accessibility issues. Get more information & download this tool at https://wave.webaim.org/
In attempting to reconcile these items, I was unable to locate any Ninja Forms support documentation that spoke about how to address & resolve these items, I was hoping your team may be able to advise if:
Are these accessibility-related items are currently supported within Ninja Forms?