Hmm - looks like I need to check those label names again.<br><br><div class="gmail_quote">On Thu, Mar 14, 2013 at 4:08 PM, Howard Kramer <span dir="ltr"><<a href="mailto:hkramer@ahead.org" target="_blank">hkramer@ahead.org</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Hi Joe,<div><br></div><div>I addressed the issues you mentioned as indicated below, in case you or someone else wants to check the corrections.</div>
<div><br></div><div>Thanks,</div><div>Howard<br><br><div class="gmail_quote"><div class="im">
On Thu, Mar 14, 2013 at 6:49 AM, Humbert, Joseph A <span dir="ltr"><<a href="mailto:johumber@iupui.edu" target="_blank">johumber@iupui.edu</a>></span> wrote:<br></div><div class="im"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div lang="EN-US" link="blue" vlink="purple">
<div>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">Answer: Yes you still need a label element with a fieldset/legend combination. Otherwise every form control would have the same label.<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">The form accessibility issues that I found are:<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u> <u></u></span></p>
<p style="margin-left:42.0pt">
<u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">You don’t have instructions on how to identify required form controls for sighted users (without hovering over the form control).</span></p>
</div></div></blockquote></div><div>Now have * and yellow field to indicate required. </div><div class="im"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div lang="EN-US" link="blue" vlink="purple">
<div><p style="margin-left:42.0pt"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p style="margin-left:42.0pt">
<u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">Required form controls are denoted in the title attribute. But since the form control has a label many assistive technology will not read the title
unless specifically set to read it as well.</span></p></div></div></blockquote></div><div>addressed via above </div><div class="im"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div lang="EN-US" link="blue" vlink="purple">
<div><p style="margin-left:42.0pt"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p style="margin-left:42.0pt">
<u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">Since you have the same form controls for both speakers, you have two form controls with the same label but different purposes. You should make 1<sup>st</sup>
speaker and 2<sup>nd</sup> speaker legends.</span></p></div></div></blockquote></div><div>I added the legend. Looks nice too! </div><div class="im"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div lang="EN-US" link="blue" vlink="purple"><div><p style="margin-left:42.0pt"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p style="margin-left:42.0pt">
<u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">The “1<sup>st</sup> speaker and 2<sup>nd</sup>” speaker radio buttons target the same label so they effectively have the same label.</span></p>
</div></div></blockquote></div><div>I didn't find this. The labels appear to be different and matching to the input id. In any case I test it with a screenreader and seems to work. </div><div class="im"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div lang="EN-US" link="blue" vlink="purple"><div><p style="margin-left:42.0pt"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p style="margin-left:42.0pt">
<u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">The “length of session” radio buttons leave out whether it is general or pre conference. (e.g., length of session 1-hr)</span></p>
</div></div></blockquote></div><div>I added some "invisible" text to the labels for each radio button indicating general or main conference. I used the font size = 0px if anyone's interested. </div><div class="im">
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div lang="EN-US" link="blue" vlink="purple"><div><p style="margin-left:42.0pt"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p style="margin-left:42.0pt">
<u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">The “type of presentation” radio buttons target the same label.</span></p></div></div></blockquote>
</div><div>Maybe I fixed it earlier and forgot but seems to be coded correctly when I just looked. </div><div class="im"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div lang="EN-US" link="blue" vlink="purple">
<div><p style="margin-left:42.0pt"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p style="margin-left:42.0pt">
<u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">All of your “if you have not presented…” input form controls in the table point to non-existent labels. Therefore, they are all labeled by the legend
and have the same label.</span></p></div></div></blockquote></div><div>Added an "invisible" label for each field as per the length of session radio button labels above.</div><div class="im"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div lang="EN-US" link="blue" vlink="purple"><div><p style="margin-left:42.0pt"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p style="margin-left:42.0pt">
<u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">Some of your “for” attributes do not match the “id” on the corresponding form control.</span></p>
</div></div></blockquote></div><div>I went through and think I've corrected all of these. </div><div class="im"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div lang="EN-US" link="blue" vlink="purple">
<div><p style="margin-left:42.0pt"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p style="margin-left:42.0pt">
<u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">On most of your form controls you use both a label element and the aria-labelledby attribute. This may cause some assistive technology to read the
label twice. I would suggest you use one or the other, preferably the label because its backwards compatible.</span></p></div></div></blockquote></div><div>Removed the aria.</div><div class="im"><div> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div lang="EN-US" link="blue" vlink="purple"><div><p style="margin-left:42.0pt"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">Other issues:<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"> <u></u><u></u></span></p>
<p><u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">Your skip links are not accessible to sighted keyboard-only users and will not work with webkit browsers. (<a href="http://whatisdamon.com/blog/2012/01/why-your-skip-to-content-link-might-not-work/" target="_blank">http://whatisdamon.com/blog/2012/01/why-your-skip-to-content-link-might-not-work/</a>)</span></p>
</div></div></blockquote></div><div>Have not fixed this one yet. </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div lang="EN-US" link="blue" vlink="purple"><div>
<div class="im"><p><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u><u></u></span></p>
<p><u></u><span style="font-size:10.0pt;font-family:Symbol;color:#404040"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040">Some of your “id” attributes are not valid because they start with numbers (e.g., 1hour-ariaLabel). (<a href="http://www.w3.org/TR/html4/types.html#type-name" target="_blank">http://www.w3.org/TR/html4/types.html#type-name</a>)<u></u><u></u></span></p>
</div><p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u> Corrected this.<u></u></span></p><div><div class="h5">
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif"">Joe Humbert, Adaptive Technology and Accessibility Specialist</span><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif"">UITS Adaptive Technology and Accessibility Centers</span><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif"">Indiana University, Indianapolis and Bloomington</span><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif"">535 W Michigan St. IT214 E</span><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif"">Indianapolis, IN 46202</span><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif"">Office Phone: <a href="tel:%28317%29%20274-4378" value="+13172744378" target="_blank">(317) 274-4378</a></span><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif"">Cell Phone: <a href="tel:%28317%29%20644-6824" value="+13176446824" target="_blank">(317) 644-6824</a></span><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif""><a href="mailto:johumber@iupui.edu" target="_blank">johumber@iupui.edu</a></span><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif""><a href="http://iuadapts.indiana.edu/" target="_blank">http://iuadapts.Indiana.edu/</a></span><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#404040"><u></u> <u></u></span></p>
<p class="MsoNormal"><b><span style="font-size:10.0pt;font-family:"Tahoma","sans-serif"">From:</span></b><span style="font-size:10.0pt;font-family:"Tahoma","sans-serif""> <a href="mailto:athen-list-bounces@mailman1.u.washington.edu" target="_blank">athen-list-bounces@mailman1.u.washington.edu</a> [mailto:<a href="mailto:athen-list-bounces@mailman1.u.washington.edu" target="_blank">athen-list-bounces@mailman1.u.washington.edu</a>]
<b>On Behalf Of </b>Howard Kramer<br>
<b>Sent:</b> Thursday, March 14, 2013 12:40 AM<br>
<b>To:</b> Access Technology Higher Education Network<br>
<b>Subject:</b> [Athen] Proposal form for AHG 2013 is up in test mode<u></u><u></u></span></p><div><div>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">Hello All:<u></u><u></u></p>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">The form is up at: <a href="http://accessinghigherground.org/wp/proposalform.php" target="_blank">http://accessinghigherground.org/wp/proposalform.php</a> if anyone would like to try it out. You can submit real proposals. I don't want to advertise it to
a larger audience until it's tested a bit.<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">The form seems very accessible in my tests with JAWs with Firefox but JAWS with IE does not read the form controls correctly. Testing with achecker returns errors with missing labels even where I have labels.<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">Question: with a legend tag are you still required to have a label tag.<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">Any feedback is welcome.<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">Thanks,<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal">Howard<br clear="all">
<u></u><u></u></p>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<p class="MsoNormal">-- <u></u><u></u></p>
<div>
<p class="MsoNormal">Howard Kramer<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal">CO-PI - UDUC<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><i>Promoting the Integration of Universal Design into University Curricula (UDUC)</i><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal">Lecturer, Cont. Ed - Evening & Cred Admin<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><a href="tel:303-492-8672" value="+13034928672" target="_blank">303-492-8672</a><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal">cell: <a href="tel:720-351-8668" value="+17203518668" target="_blank">720-351-8668</a><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
</div>
</div></div></div></div></div>
</div>
<br><div class="im">_______________________________________________<br>
athen-list mailing list<br>
<a href="mailto:athen-list@mailman1.u.washington.edu" target="_blank">athen-list@mailman1.u.washington.edu</a><br>
<a href="http://mailman1.u.washington.edu/mailman/listinfo/athen-list" target="_blank">http://mailman1.u.washington.edu/mailman/listinfo/athen-list</a><br>
<br></div></blockquote></div><div class="im"><br><br clear="all"><div><br></div>-- <br><div>Howard Kramer</div><div>Conference Coordinator</div><div>Accessing Higher Ground</div><div><a href="tel:303-492-8672" value="+13034928672" target="_blank">303-492-8672</a></div>
<div>cell: <a href="tel:720-351-8668" value="+17203518668" target="_blank">720-351-8668</a></div><div><br></div>
<div><span style="color:rgb(51,51,51);font-family:Verdana,Arial,sans-serif;font-size:11px;line-height:14px;background-color:rgb(249,248,243)">AHEAD Association of Higher Education and Disability</span></div><div><br></div>
</div></div>
</blockquote></div><br><br clear="all"><div><br></div>-- <br><div>Howard Kramer</div><div>Conference Coordinator</div><div>Accessing Higher Ground</div><div>303-492-8672</div><div>cell: 720-351-8668</div><div><br></div><div>
<span style="color:rgb(51,51,51);font-family:Verdana,Arial,sans-serif;font-size:11px;line-height:14px;background-color:rgb(249,248,243)">AHEAD Association of Higher Education and Disability</span></div><div><br></div>