E-mail List Archives
Re: Form fields in a sentence
From: glen walker
Date: Sep 7, 2023 12:02PM
- Next message: Birkir R. Gunnarsson: "Re: Form fields in a sentence"
- Previous message: Nick Bromley: "Re: Providing accessible names with
"</a></li> <li><strong>Next message in Thread:</strong> <a href="mail_message?id=49413">Birkir R. Gunnarsson: "Re: Form fields in a sentence"</a></li> <li><strong>Previous message in Thread:</strong> <a href="mail_message?id=49410">Patrick H. Lauke: "Re: Form fields in a sentence"</a></li> <li><a href="mail_thread?thread=10861">View all messages in this Thread</a></li> </ul> <hr> ><br /> > Could the intervening text, "My favourite country is" and "and favourite<br /> > sport is", be given aria-hidden="true", leaving just the two fields exposed<br /> > to AT? Would there be any downside to doing this? Or is it important that<br /> > the visible text is exposed? Or alternatively, should just "My", "is",<br /> > "and", and "is" have aria-hidden so that the text labels exposed to AT are<br /> > identical to the field names?<br /> ><br /> <br /> All four of those questions are "it depends". We don't have the context of<br /> what you're actually trying to convey. It might be important for the user<br /> to know they are filling in fields within a sentence (kind of a "mad libs"<br /> type of input, https://en.wikipedia.org/wiki/Mad_Libs) or it might not<br /> matter and just knowing there's an input field with a label is sufficient.<br /> <br /> <br /> > Another question is, if I make "favourite country" and "favourite sport"<br /> > bold to support voice activation users, would that pass WCAG SC 2.5.3 Label<br /> > in Name in your opinion?<br /> ><br /> <br /> If "favourite <whatever>" is bold, implying that it's the label for the<br /> field, then as long as "favourite <whatever>" is in the accessible name, it<br /> passes 2.5.3. You can have other stuff in the accessible name in addition<br /> to the "favourite <whatever>".<br /> <br /> From an implementation side, you could also have something like this:<br /> <br /> My <label for="country"> favourite country</label> is <input id="country"><br /> <br /> and then style the <label> so it's bold. That also gives the mouse user the<br /> benefit of clicking on the bold text and it moves the focus into the field. <hr> <ul> <li><strong>Next message:</strong> <a href="mail_message?id=49413">Birkir R. Gunnarsson: "Re: Form fields in a sentence"</a></li> <li><strong>Previous message:</strong> <a href="mail_message?id=49411">Nick Bromley: "Re: Providing accessible names with <title>"</a></li> <li><strong>Next message in Thread:</strong> <a href="mail_message?id=49413">Birkir R. Gunnarsson: "Re: Form fields in a sentence"</a></li> <li><strong>Previous message in Thread:</strong> <a href="mail_message?id=49410">Patrick H. Lauke: "Re: Form fields in a sentence"</a></li> <li><a href="mail_thread?thread=10861&id=49412#49412">View all messages in this Thread</a></li> </ul> </div> </article> <!-- --> <aside id="articlemeta"> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2024 WebAIM</h2> <p id="contact">Institute for Disability Research, Policy, and Practice<br> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/2024-campaign-site-accessibility/">Web Accessibility in the 2024 Presidential Campaigns</a></li><li><a href="/blog/screen-reader-user-survey-10-results/">Screen Reader User Survey #10 Results</a></li><li><a href="/blog/webaim-and-browserstack/">WebAIM and BrowserStack: Allies for Digital Accessibility Excellence</a></li><li><a href="/blog/an-evolution-in-microsoft-office-accessibility/">An Evolution in Microsoft Office Accessibility</a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright & Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>