E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Message

Re: Form fields in a sentence

From: Birkir R. Gunnarsson
Date: Sep 7, 2023 1:06PM

Next message: Kevin Prince: "Re: Providing accessible names with "</a></li> <li><strong>Previous message:</strong> <a href="mail_message?id=49412">glen walker: "Re: Form fields in a sentence"</a></li> <li><strong>Next message in Thread:</strong> None</li> <li><strong>Previous message in Thread:</strong> <a href="mail_message?id=49412">glen walker: "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> Aren't we over engineering the solution?<br /> Isn't it simply to wrap "my favorite country is" and "my favorite<br /> sport is" in label elements and associate with the inputs?<br /> I mean input that says "my favorite country is" is pretty clearly<br /> labeled, more conversational than I am used to, but there is no doubt<br /> what information is expected of me.<br /> I'd imagine the form is made conversational by design, maybe to make<br /> the content more friendly or whatever.<br /> That is not an accessibility decision, that is a content/UX decision.<br /> the only thing we have to decide is whether the label of the input is<br /> descriptive, making these sentence parts into labels passes that<br /> criterion.<br /> Are they a little bit overly wordy .. yeah, I'd say they are, but not<br /> to the point where it is detrimental to the user experience.<br /> <br /> <br /> On 9/7/23, glen walker < <EMAIL REMOVED> > wrote:<br /> >><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<br /> >> 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<br /> >> 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.<br /> > > > > ><br /> <br /> <br /> -- <br /> Work hard. Have fun. Make history. <hr> <ul> <li><strong>Next message:</strong> <a href="mail_message?id=49414">Kevin Prince: "Re: Providing accessible names with <title>"</a></li> <li><strong>Previous message:</strong> <a href="mail_message?id=49412">glen walker: "Re: Form fields in a sentence"</a></li> <li><strong>Next message in Thread:</strong> None</li> <li><strong>Previous message in Thread:</strong> <a href="mail_message?id=49412">glen walker: "Re: Form fields in a sentence"</a></li> <li><a href="mail_thread?thread=10861&id=49413#49413">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>