Missing form label for accessibility test

[lmcbhvu]

Summary

I have WAVE (Web Accessibility Evaluation Tool) installed on my google chrome. I tried to run a test on both dev and staging (version 1.7) and I found one issue (missing form label) on our dev environment. Here is the detail of issue

Errors Missing form label 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. A properly associated label is: a <label> element with a for attribute value that is equal to the id of a unique form control a <label> 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-labelledby attribute. <strong>Standards and Guidelines</strong> 1.1.1 Non-text Content (Level A) 1.3.1 Info and Relationships (Level A) 2.4.6 Headings and Labels (Level AA) 3.3.2 Labels or Instructions (Level A)</p> <p><img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/60269104/95872306-a9a08400-0d3c-11eb-8e21-19834abe6a2c.png" alt="image" /></p> <p><img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/60269104/95872440-ca68d980-0d3c-11eb-9d50-4b4744c746c0.png" alt="image" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lmcbhvu"><img src="https://avatars.githubusercontent.com/u/60269104?v=4" />lmcbhvu</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p><img src="https://user-images.githubusercontent.com/60269104/95895507-c1860100-0d58-11eb-8804-262f46b75aa6.png" alt="image" /></p> <p><img src="https://user-images.githubusercontent.com/60269104/95895411-9e5b5180-0d58-11eb-99bc-90185587c0b0.png" alt="image" /></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>