Components - Graphical MCQ - Some forms don't have accessible names? - [RDI 2.37]

[LIT-EIA-OWNER]

A form control is an interactive HTML element used for user input. Form controls include buttons, checkboxes, text fields, color pickers, and more.

An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type.

How to fix

For each or element, provide an accessible name using one of the following methods. </p> <p>Good </p> <p>title attribute </p> <p>placeholder attribute </p> <p>Better </p> <p>aria-label attribute </p> <p>aria-labelled-by attribute </p> <p>Best </p> <p>Explicit <label> element </p> <p>Implicit (wrapped) <label> element </p> <p>Accessibility Insights: Label </p> <p>This was also tested with JAWS, we had two different results. </p> <p>In IE11, JAWS did not announce the alt text. The only thing announced by JAWS for each answer option was “radio button not checked.” </p> <p>In Chrome and Edge, JAWS does announce the alt text with the radio button. “Four diverse people each working at desk at the same size and height, radio button not checked one of two.” </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/LIT-EIA-OWNER"><img src="https://avatars.githubusercontent.com/u/18216769?v=4" />LIT-EIA-OWNER</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Filling in the "Item Text" under each image adds the aria label to the control</p> <p>Need Melissa to take a look and see the best way to use that. Should it be used with an Alt tag? No alt tag but always use item text?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/LIT-EIA-OWNER"><img src="https://avatars.githubusercontent.com/u/18216769?v=4" />LIT-EIA-OWNER</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>the IMG is inside the label tag, so the image is associated with the input.</p> <p>3 options:</p> <ul> <li>If you put an alt tag, it will read it as a label</li> <li>If you put item text, it will read it as a label and show it next to the radio button (recommended)</li> <li>If you put both, it doesn't read the alt tag at all, just the item text</li> </ul> </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>