<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body dir="auto">Okay - I added a third example under the “Simple examples” heading. The aria-labelledby for the form field here includes a reference to a screen reader only piece of text that can either read “blank” or whatever the user has typed into the field. This will cause the screen reader to read out the entire answer, with the typed entry, when the user focuses on the field or presses a command to read the focused element. It doesn’t work in VoiceOver on iOS at the moment due to issues with event listeners. Also, there isn’t currently any notification for the user of this behavior occurring, so that would need to be communicated somewhere (I didn’t have the time to code that in, since my battery was dying). <div><br></div><div>I added a couple of more complicated examples after that, some of which are super convoluted, but were things I figured would be worth trying out. Again, I didn’t get a chance to figure out exactly why some of them don’t work with voiceover on iOS due to my laptop battery conking out. But feel free to poke around the code (it’s pretty messy; I’m not a trained developer). </div><div><br></div><div><a href="https://mra11yx.github.io/form-labels/">https://mra11yx.github.io/form-labels/</a><br><br>Alex</div><div><br><div id="AppleMailSignature" dir="ltr">Sent from my iPhone</div><div dir="ltr"><br>On Mar 20, 2019, at 10:41 PM, Bossley, Peter A. <<a href="mailto:bossley.5@osu.edu">bossley.5@osu.edu</a>> wrote:<br><br></div><div dir="ltr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><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;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle22
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle23
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@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">I don’t have an easy development environment handy but I wonder if adding the entered value of the form field could be dynamically added to the programmatic label so that a
user reviewing their answers by tabbing through their completed form fields could work. Maybe adding the ID of the input or select to the aria-labeledby could work if you put a placeholder of blank in the edit field…<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">Other than that someone would have to write some JS to automatically swap out a DOM node as users entered text or made a selection, and one would probably want a little bit
of a delay to avoid the API recalculating the accessible name each time someone typed a letter; some screen readers might read that label over and over again in that case.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">I don’t think anyone has come up with a great pattern for this; what you’ve done here is close but as you stated it does sound a little funny when read using reading keys,
and the post-entry review issue is a potential point of confusion.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in">
<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>Alex Umstead<br>
<b>Sent:</b> Wednesday, March 20, 2019 10:22 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<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<p class="MsoNormal">Peter - you raise a really good point here. <span style="font-size:11.0pt"><o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Here is a simple example that uses aria-labelledby and is structured in the way that Sean described. Feel free to send any ideas for improvements. It sounds decent to me in forms/focus mode, but feels a little odd in browse/virtual cursor
mode. That said, I’m sighted, so any input from folks who use screen readers full-time would be appreciated.<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal"><a href="https://mra11yx.github.io/form-labels/">https://mra11yx.github.io/form-labels/</a><o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Alex<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal" style="margin-bottom:12.0pt"><br>
On Mar 20, 2019, at 9:47 PM, Bossley, Peter A. <<a href="mailto:bossley.5@osu.edu">bossley.5@osu.edu</a>> wrote:<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">Both Alex and Sean gave you some great advice. I just want to echo the consistency bit; you want these question types to behave consistently throughout the application. Different
labelling techniques could present some serious confusion for some users. </span>
<o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">One last bit to pay attention to is the visual label for the form or input field needs to be, at minimum, contained in the programmatic label for WCAG 2.1 and this is a best
practice to assist voice recognition users. Putting the questions in a span and using aria-labeledby should be widely supported by modern browsers and assistive technology.</span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">I would suggest against a standard aria-label that doesn’t contain the question in it because in situations where a form field is present many screen reader users (myself included)
have a tendency to simply tab through the fields to fill them out. So having to exit passthrough (forms) mode to go back and read the question would be annoying when I could simply hear the question as part of the label for the field.</span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">Best,</span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"> </span><o:p></o:p></p>
<p class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;line-height:13.5pt;background:white">
<span style="font-size:9.0pt;font-family:"Arial",sans-serif;color:#333333"><image001.png><br>
</span><b><span style="font-size:9.0pt;font-family:"Arial",sans-serif;color:#BB0000;background:white">Peter Bossley</span></b><span style="font-size:9.0pt;font-family:"Arial",sans-serif;color:#333333"><br>
Director, Digital Accessibility Center<br>
</span><span style="font-size:9.0pt;font-family:"Arial",sans-serif;color:#BB0000;background:white">ADA Coordinator's Office</span><span style="font-size:9.0pt;font-family:"Arial",sans-serif;color:#333333"> - Office of University Compliance and Integrity<br>
Student Life Disability Services<br>
950 Lincoln Tower, 1800 Cannon Dr, Columbus, OH 43210<br>
614-688-3028 Office<br>
<a href="mailto:bossley.5@osu.edu"><span style="color:blue;background:white">bossley.5@osu.edu</span></a>
<a href="http://accessibility.osu.edu/"><span style="color:blue;background:white">accessibility.osu.edu</span></a>
</span><o:p></o:p></p>
<div class="MsoNormal" align="center" style="text-align:center">
<hr size="2" width="100%" align="center">
</div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"> </span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"> </span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"> </span><o:p></o:p></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in">
<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>Alex Umstead<br>
<b>Sent:</b> Wednesday, March 20, 2019 6:25 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>
</div>
</div>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal">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.<o:p></o:p></p>
<div>
<p class="MsoNormal"> <o:p></o:p></p>
<div>
<p class="MsoNormal" style="margin-bottom:12.0pt">Alex<o:p></o:p></p>
<div>
<p class="MsoNormal">Sent from my iPhone<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal" style="margin-bottom:12.0pt"><br>
On Mar 20, 2019, at 3:05 PM, Khoa Pham <<a href="mailto:kpham@swccd.edu">kpham@swccd.edu</a>> wrote:<o:p></o:p></p>
</div>
<div>
<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.</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">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>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">_______________________________________________<br>
athen-list mailing list<br>
<a href="mailto:athen-list@mailman12.u.washington.edu">athen-list@mailman12.u.washington.edu</a><br>
<a href="http://mailman12.u.washington.edu/mailman/listinfo/athen-list">http://mailman12.u.washington.edu/mailman/listinfo/athen-list</a></span><o:p></o:p></p>
</div>
</div>
</div>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">_______________________________________________<br>
athen-list mailing list<br>
<a href="mailto:athen-list@mailman12.u.washington.edu">athen-list@mailman12.u.washington.edu</a><br>
<a href="http://mailman12.u.washington.edu/mailman/listinfo/athen-list">http://mailman12.u.washington.edu/mailman/listinfo/athen-list</a><o:p></o:p></span></p>
</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></body></html>