<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body dir="auto"><div dir="ltr"><span></span></div><div dir="ltr"><meta http-equiv="content-type" content="text/html; charset=utf-8">Here’s a solution you might want to try. It’s a bit hacky, and might not work with direct speech in Dragon, but works with NVDA in FF and Chrome, JAWS 2018 in IE, FF, and Chrome, and VoiceOver on iOS in Safari. It probably goes without saying, but will want to make sure that if you go this route, you label the field/dropdown in a way that doesn’t change the meaning of the control substantially. Basically, what I’ve done is I’ve made the visual labels just be generic elements (rather than being <label> tags connected to the fields using the “for” attribute, which would he the typical “base” technique for labeling), and hid them by setting aria-hidden=“true”. I then labeled each form element with the aria-label attribute. Don't set aria-hidden on the form fields— just put it on the text labels. Again, not an idea situation, but if you have to use this design, might be workable. I might also suggest cross-posting on the web-a11y Slack if you haven’t already. <div><br></div><div>You can ignore the placeholder tab stops at the top and bottom of the page - I only use them when coding prototypes because sometimes NVDA doesn’t read the first focused element on the page. They don’t have anything to do with the solution here. <br><div><br></div><div><a href="https://codepen.io/mra11yx/pen/bZxoXZ">https://codepen.io/mra11yx/pen/bZxoXZ</a></div><div><br></div><div>Alex<br><br><div dir="ltr">Sent from my iPhone</div><div dir="ltr"><br>On Mar 19, 2019, at 7:04 PM, Khoa Pham <<a href="mailto:kpham@swccd.edu">kpham@swccd.edu</a>> wrote:<br><br></div><div dir="ltr">
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
<div class="WordSection1">
<p class="MsoNormal">Hi everyone,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Regarding text inputs fields and select menus in the attached image. How would you make something like these accessible with proper labels? I’m use to these fields appearing after a label, but I’m unsure of how to ensure accessibility when
they are provided in the middle of a question or sentence like in the attached image.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Thanks,<o:p></o:p></p>
<p class="MsoNormal">Khoa<o:p></o:p></p>
</div>
</div><div dir="ltr"><2019-03-19_15-38-12.jpg></div><div dir="ltr"><span>_______________________________________________</span><br><span>athen-list mailing list</span><br><span><a href="mailto:athen-list@mailman12.u.washington.edu">athen-list@mailman12.u.washington.edu</a></span><br><span><a href="http://mailman12.u.washington.edu/mailman/listinfo/athen-list">http://mailman12.u.washington.edu/mailman/listinfo/athen-list</a></span><br></div></div></div></div></body></html>