<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
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;}
span.EmailStyle18
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle19
{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>
</head>
<body lang="EN-US" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D">Karl and Sean,<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">Thank you very much for responding. Your response has definitely cleared things up for me. My understanding is if a developer follow the WCAG standards and WAI-ARIA
best practice then there should not be any issues with contents when it comes to using different AT, such as JAWS and NVDA. Is this correct?<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">The reason brought this question to the community is due to a response I had received from a vendor. When I brought some code such as the one in the original
attached image and invalid ARIA codes, they said they had to modify or engineer the code in order for it to work with JAWS specifically. I didn’t believe them to begin with, but it seems they were adamant about their coding practices.<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"><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 <athen-list-bounces@mailman12.u.washington.edu>
<b>On Behalf Of </b>Sean Keegan<br>
<b>Sent:</b> Monday, October 22, 2018 8:40 AM<br>
<b>To:</b> Access Technology Higher Education Network <athen-list@u.washington.edu><br>
<b>Subject:</b> Re: [Athen] form elements<o:p></o:p></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<div>
<div>
<div>
<div>
<div>
<p class="MsoNormal">> On another question regarding grouping of radio buttons and checkboxes.<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Karl has already answered the question, but I wanted to share out a few resources we have created for web developers in our system. We have (at this time) 16 short videos that describe various approaches to accessibility practices. Two
of them may be relevant to your question about radio buttons, check boxes, and the fieldset element:<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Checkboxes and Radio Buttons<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><a href="https://cccaccessibility.org/web/web-developer-tutorials/checkboxes-and-radio-buttons">https://cccaccessibility.org/web/web-developer-tutorials/checkboxes-and-radio-buttons</a><o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Using the Fieldset and Legend Elements<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><a href="https://cccaccessibility.org/web/web-developer-tutorials/using-the-fieldset-and-legend-elements">https://cccaccessibility.org/web/web-developer-tutorials/using-the-fieldset-and-legend-elements</a><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>
</div>
</body>
</html>