<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body dir="auto">Actually - let me see if I can code up versions of Sean’s and my examples in another environment that doesn’t have the editor components that CodePen does. I’ll try and do this later tonight or tomorrow evening.<div><br><div>Alex<br><br><div id="AppleMailSignature" dir="ltr">Sent from my iPhone</div><div dir="ltr"><br>On Mar 20, 2019, at 3:05 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:12.0pt;
font-family:"Times New Roman",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;}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
p.msonormal00, li.msonormal00, div.msonormal00
{mso-style-name:msonormal0;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
p.msochpdefault, li.msochpdefault, div.msochpdefault
{mso-style-name:msochpdefault;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Calibri",sans-serif;}
span.emailstyle18
{mso-style-name:emailstyle18;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle21
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;
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"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D">Alex and Sean,</span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D"> </span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D">Thank you for getting back to me with these solutions. I’m currently reviewing an app and many of their questions are formatted in this manner and when using
a NVDA to compile a lists of form elements these show up as having no labels. AXE would indicate that these elements are missing labels. I just want to make sure there are solutions to making this accessible prior to working with the vendor and them telling
me otherwise.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D">Khoa</span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D"> </span><o:p></o:p></p>
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">From:</span></b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"> athen-list <<a href="mailto:athen-list-bounces@mailman12.u.washington.edu">athen-list-bounces@mailman12.u.washington.edu</a>>
<b>On Behalf Of </b>Sean Keegan<br>
<b>Sent:</b> Tuesday, March 19, 2019 8:14 PM<br>
<b>To:</b> Access Technology Higher Education Network <<a href="mailto:athen-list@u.washington.edu">athen-list@u.washington.edu</a>><br>
<b>Subject:</b> Re: [Athen] Form Labels</span><o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<div>
<div>
<div>
<p class="MsoNormal">I encountered this type of question format a lot when dealing with assessment tests. Part of the challenge is that you want to offer the ability to navigate the text content, but at the same time ensure that the input element is also useable,
makes sense given the context of the surrounding text, and does not unduly influence the test participant into how to answer the question. <o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"> <o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">Keeping it simple, one way to handle this would be to use aria-label attributes on the input fields. The aria-label for the <input> field could be, aria-label="Enter response" or "Enter answer". For the second example, the aria-label for
the <select> could be aria-label="Select the value".<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"> <o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">Another option I have seen would be to use aria-labelledby and concatenate the question as part of the form field's label. In other words, you have the text preceding the form field wrapped in a <span> with an id attribute. You then have
the text after the question wrapped in a <span> with a different id attribute. There is then a third <span> (visually hidden) with an third id attribute and the text content set as "blank".<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"> <o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">Using aria-labelledby on the input element to concatenate the values, this would be: aria-labelledby="span1 span3 span2". The result would be spoken as, "The blank has a greater average weight."<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"> <o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">Separate from changing the UI, I think there are a few ways to make this accessible. What would be important, though, would be to see all the different question types in the system and come up with consistent design patterns so that the
experience is consistent as the participant moves from question to question.<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"> <o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">Take care,<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">Sean<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"> <o:p></o:p></p>
</div>
</div>
</div>
</div>
</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></body></html>