[LON-CAPA-cvs] cvs: rat /client parameter.html

raeburn raeburn at source.lon-capa.org
Wed Jun 24 18:15:44 EDT 2026


raeburn		Wed Jun 24 22:15:44 2026 EDT

  Modified files:              
    /rat/client	parameter.html 
  Log:
  - WCAG 2 compliance
    - Include labels for form elements.
    - Include page region and heading structure.
    - Use <th> tags for row headings in table with scope="row" attribute.
    - Satisfy minimum spacing between touch targets.
    - Group form elements in fieldset with legend for screenreaders.
  - Satisfy w3c validation
  
  
-------------- next part --------------
Index: rat/client/parameter.html
diff -u rat/client/parameter.html:1.98 rat/client/parameter.html:1.99
--- rat/client/parameter.html:1.98	Wed Jul  2 16:08:37 2025
+++ rat/client/parameter.html	Wed Jun 24 22:15:44 2026
@@ -5,7 +5,7 @@
 The LearningOnline Network with CAPA
 Parameter Input Window
 //
-// $Id: parameter.html,v 1.98 2025/07/02 16:08:37 raeburn Exp $
+// $Id: parameter.html,v 1.99 2026/06/24 22:15:44 raeburn Exp $
 //
 // Copyright Michigan State University Board of Trustees
 //
@@ -82,7 +82,7 @@
 function choicestart() {
   this.window.choices.document.open();
   choicewrite('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
-  choicewrite('<html xmlns="http://www.w3.org/1999/xhtml">');
+  choicewrite('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">');
   choicewrite('<head>');
   choicewrite('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');
   choicewrite('<title>LON-CAPA</title>');
@@ -95,17 +95,24 @@
   choicewrite('background: #FFFFFF;');
   choicewrite('}');
   choicewrite('table.LC_parmsel_table {font-size: 90%;}');
+  choicewrite('table.LC_parmsel_table tr th, ');
   choicewrite('table.LC_parmsel_table tr td { padding: 5px; border: 1px solid #C8C8C8;}');
-  choicewrite('fieldset.LC_grace { display:inline; }');
+  choicewrite('table.LC_parmsel_table tr th.LC_rowheader { font-weight: normal; text-align: left; }');
+  choicewrite('fieldset.LC_grace { display: inline; line-height: 205%; margin: 1px; }');
   choicewrite('fieldset.LC_grace > legend { font-weight: normal; }');
+  choicewrite('div.LC_landmark { margin: 0; padding: 0; border: none; }');
+  choicewrite('.LC_heading_3 { font-size: 1.0em; line-height: 90%; margin: 0; padding: 0;" }');
+  choicewrite('fieldset.LC_borderless { display: inline; border: 0; padding: 0; margin: 0; line-height: 205%; }');
+  choicewrite('.LC_visually_hidden:not(:focus):not(:active) { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; display: inline; }');
   choicewrite('-->');
   choicewrite('</style>');
   choicewrite('</head>');
   choicewrite('<body>');
+  choicewrite('<div class="LC_landmark" role="contentinfo">');
 }
 
 function choiceend() {
-  choicewrite('</body></html>');
+  choicewrite('</div></body></html>');
   this.window.choices.document.close();
 }
 
@@ -115,14 +122,15 @@
 
 function tablestart(headtext) {
   choicewrite('<table class="LC_parmsel_table"><tr bgcolor="#C5DB99"><th colspan="3">'+
-              headtext+'</th></tr>');
+              '<h1 class="LC_heading_3">'+headtext+'</h1></th></tr>');
 }
 
 function valline(text,id1,id2) {
-  choicewrite('<tr><td>'+text+
+  choicewrite('<tr><td><label for="val'+id1+'">'+text+'</label>'+
               '</td><td><input type="text" size="4" name="val'+
-              id1+'" /></td><td>incl:<input type="checkbox" name="val'+
-              id2+'" /></td></tr>');
+              id1+'" id="val'+id1+'" /></td>'+
+              '<td><label>incl:<input type="checkbox" name="val'+
+              id2+'" /></label></td></tr>');
 }
 
 function escapeHTML(text) {
@@ -149,7 +157,7 @@
 function hour() {
    var thishour=cdate.getHours();
     var i; var j;
-    choicewrite('<select name="hours" onchange="parent.datecalc();">');
+    choicewrite('<select name="hours" onchange="parent.datecalc();" aria-label="hours">');
     for (i=0;i<=23;i++) {
         choicewrite('<option value="'+i+'"');
         if (i==thishour) {
@@ -173,7 +181,7 @@
 function minute() {
    var thisminutes=cdate.getMinutes();
     var i;
-    choicewrite('<select name="minutes" onchange="parent.datecalc();">');
+    choicewrite('<select name="minutes" onchange="parent.datecalc();" aria-label="minutes">');
     for (i=0;i<=59;i++) {
         choicewrite('<option value="'+i+'"');
         if (i==thisminutes) {
@@ -187,7 +195,7 @@
 function second() {
    var thisseconds=cdate.getSeconds();
     var i;
-    choicewrite('<select name="seconds" onchange="parent.datecalc();">');
+    choicewrite('<select name="seconds" onchange="parent.datecalc();" aria-label="seconds">');
     for (i=0;i<=59;i++) {
         choicewrite('<option value="'+i+'"');
         if (i==thisseconds) {
@@ -202,7 +210,7 @@
 function date() {
    var thisdate=cdate.getDate();
     var i;
-    choicewrite('<select name="date" onchange="parent.datecalc();">');
+    choicewrite('<select name="date" onchange="parent.datecalc();" aria-label="date">');
     for (i=1;i<=31;i++) {
         choicewrite('<option value="'+i+'"');
         if (i==thisdate) {
@@ -223,7 +231,7 @@
    if (thisyear>nowyear) { loweryear=nowyear-2; }
    if (thisyear<nowyear) { upperyear=nowyear+5; } 
     var i;
-    choicewrite('<select name="year" onchange="parent.datecalc();">');
+    choicewrite('<select name="year" onchange="parent.datecalc();" aria-label="year">');
     for (i=loweryear;i<=upperyear;i++) {
         choicewrite('<option value="'+i+'"');
         if (i==thisyear) {
@@ -237,7 +245,7 @@
 function month() {
     var thismonth=cdate.getMonth();
     var i;
-    choicewrite('<select name="month" onchange="parent.datecalc();">');
+    choicewrite('<select name="month" onchange="parent.datecalc();" aria-label="month">');
     for (i=0;i<=11;i++) {
         choicewrite('<option value="'+i+'"');
         if (i==thismonth) {
@@ -784,8 +792,10 @@
     if (frame.document.getElementById('LC_string_ipacc_inner_'+iptype)) {
         var innerDiv = frame.document.getElementById('LC_string_ipacc_inner_'+iptype);
         var ipDiv = frame.document.createElement('div');
-        ipDiv.innerHTML = '<input type="text" size="12" name="setip'+iptype+'" onblur="parent.ipstringeval();" />'+"\n"+
+        ipDiv.style.margin = "4px 0";
+        ipDiv.innerHTML = '<input type="text" size="12" name="setip'+iptype+'" onblur="parent.ipstringeval();" aria-label="IP Rule" />'+"\n"+
                           '<a href="#" onclick="parent.removeIpRule(this,\''+iptype+'\');return false;">Remove</a>';
+
         innerDiv.appendChild(ipDiv);
     }
     return;
@@ -898,12 +908,12 @@
     }
     return '<input type="hidden" name="setgrace" value="" />'+
            '<fieldset class="LC_grace"><legend>Time past due</legend>'+
-           '<span style="white-space:nowrap">'+intweek(gweeks)+' weeks </span>'+
-           '<span style="white-space:nowrap">'+intday(gdays)+' days </span><br />'+
-           '<span style="white-space:nowrap">'+inthour(ghours)+' hours </span>'+
-           '<span style="white-space:nowrap">'+intminute(gmins)+' mins </span>'+
+           '<span style="white-space:nowrap"><label>'+intweek(gweeks)+' weeks</label> </span>'+
+           '<span style="white-space:nowrap"><label>'+intday(gdays)+' days</label> </span><br />'+
+           '<span style="white-space:nowrap"><label>'+inthour(ghours)+' hours</label> </span>'+
+           '<span style="white-space:nowrap"><label>'+intminute(gmins)+' mins</label> </span>'+
            '</fieldset><fieldset class="LC_grace"><legend>Partial Credit</legend>'+
-           '<input type="text" size="3" name="frac" value="'+gfrac+'" onblur="parent.gracestringeval();" />'+
+           '<input type="text" size="3" name="frac" value="'+gfrac+'" onblur="parent.gracestringeval();" aria-label="value" />'+
            '  <label><input type="checkbox" value="1" name="grad"'+checktext+' onclick="parent.gracestringeval();" />'+
            'gradual</label></fieldset>'+
            '<a href="#" onclick="parent.removeGrace(this);return false;">Remove</a><hr />';
@@ -1128,16 +1138,18 @@
          choicewrite( [
             '<tr><td colspan="3">'+intervaldis()+'</td></tr>',
             '<tr><td>Time:</td><td colspan="2">',
-                '<span style="white-space:nowrap">'+intday()+' days </span>',
-                '<span style="white-space:nowrap">'+inthour()+' hours</span>',
-                '<span style="white-space:nowrap">'+intminute()+' mins</span>',
-                '<span style="white-space:nowrap">'+intsecond()+' secs</span>',
+                '<span style="white-space:nowrap"><label>'+intday()+' days</label> </span>',
+                '<span style="white-space:nowrap"><label>'+inthour()+' hours</label></span>',
+                '<span style="white-space:nowrap"><label>'+intminute()+' mins</label></span>',
+                '<span style="white-space:nowrap"><label>'+intsecond()+' secs</label></span>',
             '</td></tr>',
             '</table>',
             '<br />',
             ].join("\n"));
          tablestart('Provide a "Done" button to students?');
          choicewrite('<tr><td>Value:</td><td colspan="2">');
+         choicewrite('<fieldset class="LC_borderless">');
+         choicewrite('<legend class="LC_visually_hidden">Include button?</legend>');
          choicewrite('<label><input name="donebutton" value=""'+
                      ' type="radio" '+callintervalpmodval());
          if (pmodval == '') { choicewrite(' checked="checked"'); }
@@ -1161,14 +1173,14 @@
                      '<input name="donebutton_text" value='+
                      '"'+escapeHTML(pextravaltwo)+'" type="text" '+
                      'size="10" onblur="parent.intcalc();" /></span></div>');
-         choicewrite('</td></tr></table>');
+         choicewrite('</fieldset></td></tr></table>');
       } else {
          choicewrite('<tr><td colspan="3">'
          +cdate.toString()+
-         '</td></tr><tr><td>Date:</td><td colspan="2">');
+         '</td></tr><tr><th class="LC_rowheader" scope="row">Date:</th><td colspan="2">');
          month();date();year();
-         choicewrite('</td></tr><tr><td>Time:'
-         +'</td><td colspan="2">');hour();choicewrite('h ');minute();
+         choicewrite('</td></tr><tr><th class="LC_rowheader" scope="row">Time:'
+         +'</th><td colspan="2">');hour();choicewrite('h ');minute();
          choicewrite('m ');second();
          choicewrite('s</td></tr></table>');
       }
@@ -1185,12 +1197,12 @@
       } else {
        if (pscat=='range') {
          tablestart('Integer range');      
-         choicewrite('<tr><td>Lower Value:'+
+         choicewrite('<tr><td><label for="val2">Lower Value:</label>'+
               '</td><td colspan="2"><input type="text" size="4" name="val2'+
-              '" /></td></tr>');
-         choicewrite('<tr><td>Upper Value:'+
+              '" id="val2" /></td></tr>');
+         choicewrite('<tr><td><label for="val4">Upper Value:</label>'+
               '</td><td colspan="2"><input type="text" size="4" name="val4'+
-              '" /></td></tr></table>');
+              '" id="val4" /></td></tr></table>');
          var range=new Array;
          if ((svalue!='') && (typeof(svalue)!="undefined")) {
             range=svalue.split(',');
@@ -1213,8 +1225,8 @@
         if (pscat=='any') {
            tablestart('Integer');
         }
-        choicewrite('<tr><td>Value:</td><td colspan="2">');
-        choicewrite('<input name="intval" size="10" value="'+escapeHTML(svalue)+
+        choicewrite('<tr><td><label for="intval">Value:</label></td><td colspan="2">');
+        choicewrite('<input name="intval" id="intval" size="10" value="'+escapeHTML(svalue)+
                     '" onchange="parent.integereval()" />');
         choicewrite('</td></tr></table>');
       }
@@ -1235,8 +1247,8 @@
         if (pscat=='any') {
            tablestart('Floating point number');
         }
-        choicewrite('<tr><td>Value:</td><td colspan="2">');
-        choicewrite('<input name="floatval" size="10" value="'+escapeHTML(svalue)+
+        choicewrite('<tr><td><label for="floatval">Value:</label></td><td colspan="2">');
+        choicewrite('<input name="floatval" id="floatval" size="10" value="'+escapeHTML(svalue)+
                     '" onchange="parent.floateval()" />');
         choicewrite('</td></tr></table>');
       }
@@ -1246,13 +1258,15 @@
         if ((pscat=='any') || (pscat=='') || (pscat=='default') || 
             (typeof(pscat)=='undefined')) {
            tablestart('Text');
-           choicewrite('<tr><td>Value:</td><td colspan="2">');
-           choicewrite('<input name="stringval" size="20" value="'+escapeHTML(svalue)+
+           choicewrite('<tr><td><label for="stringval">Value:</label></td><td colspan="2">');
+           choicewrite('<input name="stringval" id="stringval" size="20" value="'+escapeHTML(svalue)+
                     '" type="text" onchange="parent.stringeval()" />');
         }
         if (pscat=='yesno') {
            tablestart('Yes/No');
 	   choicewrite('<tr><td>Value:</td><td colspan="2">');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Status</legend>');
            choicewrite('<label><input name="stringval" value="yes"'+
                   ' type="radio" '+callradiostringeval('yes'));
            if (svalue=='yes') { choicewrite(' checked="checked"'); }
@@ -1260,11 +1274,13 @@
            choicewrite('<label><input name="stringval" value="no"'+
                   ' type="radio" '+callradiostringeval('no'));
            if (svalue=='no') { choicewrite(' checked="checked"'); }
-           choicewrite(' /> No</label><br />');
+           choicewrite(' /> No</label></fieldset><br />');
         }
         if (pscat=='problemstatus') {
            tablestart('Problem Status');
 	   choicewrite('<tr><td>Value:</td><td colspan="2">');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Status</legend>');
            choicewrite('<label><input name="stringval" value="yes"'+
                   ' type="radio" '+callradiostringeval('yes'));
            if (svalue=='yes') { choicewrite(' checked="checked"'); }
@@ -1280,11 +1296,13 @@
            choicewrite('<label><input name="stringval" value="no_feedback_ever"'+
                   ' type="radio" '+callradiostringeval('no_feedback_ever'));
            if (svalue=='no_feedback_ever') { choicewrite(' checked="checked"'); }
-           choicewrite(' /> No, show no feedback at all.</label><br />');
+           choicewrite(' /> No, show no feedback at all.</label></fieldset><br />');
         }
         if (pscat=='examtype') {
            tablestart('Exam Type');
 	   choicewrite('<tr><td>Value:</td><td colspan="2">');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Type</legend>');
            choicewrite('<label><input name="stringval" value="online"'+
                 ' type="radio" '+callradiostringeval('online'));
            if (svalue=='online') { choicewrite(' checked="checked"'); }
@@ -1292,11 +1310,13 @@
            choicewrite('<label><input name="stringval" value="checkout"'+
               ' type="radio" '+callradiostringeval('checkout'));
            if (svalue=='checkout') { choicewrite(' checked="checked"'); }
-           choicewrite(' /> Check out</label><br />');
+           choicewrite(' /> Check out</label></fieldset><br />');
        }
         if (pscat=='questiontype') {
            tablestart('Question Type');
 	   choicewrite('<tr><td>Value:</td><td colspan="2">');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Type</legend>');
            choicewrite('<label><input name="stringval" value="problem"'+
                ' type="radio" '+callradiostringeval('problem'));
            if (svalue=='problem') { choicewrite(' checked="checked"'); }
@@ -1344,7 +1364,7 @@
            choicewrite('<label><input name="stringval" value="library"'+
                ' type="radio" '+callradiostringeval('library'));
            if (svalue=='library') { choicewrite(' checked="checked"'); }
-           choicewrite(' /> Library</label><br />');
+           choicewrite(' /> Library</label></fieldset><br />');
         }
         if (pscat=='lenient') {
            var patternLenientStd = /^(yes|no|default)$/;
@@ -1353,6 +1373,8 @@
            var relatives = new Array;
            tablestart('Lenient Grading (Partial Credit)');
            choicewrite('<tr><td>Value:</td><td colspan="2">');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Status</legend>');
            choicewrite('<label><input name="stringval" value="yes"'+
                   ' type="radio" '+calllenientradioeval('yes'));
            if (svalue=='yes') { choicewrite(' checked="checked"'); }
@@ -1372,7 +1394,7 @@
               lenientweighted='block';
               var relatives = svalue.match(patternLenientRel);
            }
-           choicewrite(' />Yes, weighted (optionresponse in checkbox mode)</label><br /><br />'+
+           choicewrite(' />Yes, weighted (optionresponse in checkbox mode)</label></fieldset><br /><br />'+
                        '<div id="lenientweighteddiv" style="display:'+lenientweighted+'">'+
                        '<table class="LC_parmsel_table"><tr bgcolor="#C5DB99">'+
                        '<th colspan="2">Foil submission status</th><th>Points</th></tr>');
@@ -1386,15 +1408,19 @@
                        relatives[j] = '0.0';
                    }
                }
-               choicewrite('<tr><td colspan="2">'+lenienttypes[i]+'</td>'+
+               choicewrite('<tr><td colspan="2"><label for="lenientrelwt'+i+'"">'+
+                           lenienttypes[i]+'</label></td>'+
                            '<td><input type="text" name="lenientrelwt" value="'+relatives[j]+'"'+
-                           ' size="3" onblur="parent.lenienteval(\'weighted\')" /></td></tr>');
+                           ' id="lenientrelwt'+i+'" size="3" onblur="parent.lenienteval(\'weighted\')" />'+
+                           '</td></tr>');
            }
            choicewrite('</table></div>');
         }
         if (pscat=='discussvote') {
            tablestart('Discussion Voting');
            choicewrite('<tr><td>Value:</td><td colspan="2">');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Status</legend>');
            choicewrite('<label><input name="stringval" value="yes"'+
                   ' type="radio" '+callradiostringeval('yes'));
            if (svalue=='yes') { choicewrite(' checked="checked"'); }
@@ -1406,11 +1432,13 @@
            choicewrite('<label><input name="stringval" value="no"'+
                   ' type="radio" '+callradiostringeval('no'));
            if (svalue=='no') { choicewrite(' checked="checked"'); }
-           choicewrite(' /> No</label><br />');
+           choicewrite(' /> No</label></fieldset><br />');
         }
         if (pscat=='tex') {
            tablestart('TeX file display');
            choicewrite('<tr><td>Value:</td><td colspan="2">');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Status</legend>');
            choicewrite('<label><input name="stringval" value="tth"'+
                   ' type="radio" '+callradiostringeval('tth'));
            if (svalue=='tth') { choicewrite(' checked="checked"'); }
@@ -1418,7 +1446,7 @@
            choicewrite('<label><input name="stringval" value="mathjax"'+
                   ' type="radio" '+callradiostringeval('mathjax'));
            if (svalue=='mathjax') { choicewrite(' checked="checked"'); }
-           choicewrite(' /> MathJax</label><br />');
+           choicewrite(' /> MathJax</label></fieldset><br />');
         }
         if (pscat=='ip') {
             var currallow = new Array;
@@ -1459,7 +1487,7 @@
                              '<div>',
                              '<div id="LC_string_ipacc_inner_'+acctypes[i]+'">'].join("\n"));
                 for (var j=0; j<curripaccess[i].length; j++) {
-                    choicewrite(['<div><input type="text" size="12" name="setip'+acctypes[i]+'" value="'+curripaccess[i][j]+'" onblur="parent.ipstringeval();" />',
+                    choicewrite(['<div style="margin: 4px 0;"><input type="text" size="12" name="setip'+acctypes[i]+'" value="'+curripaccess[i][j]+'" onblur="parent.ipstringeval();" aria-label="IP Rule" />',
                                  '<a href="#" onclick="parent.removeIpRule(this,\''+acctypes[i]+'\');return false;">Remove</a>',
                                  '</div>'].join("\n"));
                 }
@@ -1469,7 +1497,9 @@
         }
         if (pscat=='fileext') {
             tablestart('Allowed File Extensions');
-	   choicewrite('<tr><td>Value:</td><td colspan="2">');
+           choicewrite('<tr><td><label for="stringval">Value:</label></td><td colspan="2">');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Status</legend>');
            choicewrite('<label><input name="radstringval" value="txt"'+
                ' type="radio" '+callradiostringeval('txt'));
            if (svalue=='txt') { choicewrite(' checked="checked"'); }
@@ -1482,13 +1512,15 @@
                ' type="radio" '+callradiostringeval('doc,docx,xls,xlsx,ppt,pptx'));
            if (svalue=='doc,docx,xls,xlsx,ppt,pptx') { choicewrite(' checked="checked"'); }
            if (svalue=='doc,xls,ppt') { choicewrite(' checked="checked"'); }
-           choicewrite(' /> Office Document</label><br />');
-           choicewrite('<input name="stringval" size="20" value="'+escapeHTML(svalue)+
+           choicewrite(' /> Office Document</label></fieldset><br />');
+           choicewrite('<input name="stringval" id="stringval" size="20" value="'+escapeHTML(svalue)+
                     '" onchange="parent.stringeval()" />');
        }
        if (pscat=='useslots') {
            tablestart('Slots control access');
 	   choicewrite('<tr><td>Value:</td><td colspan="2">');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Status</legend>');
            choicewrite('<label><input name="stringval" value="no"'+
                   ' type="radio" '+callradiostringeval('no'));
            if (svalue=='no') { choicewrite(' checked="checked"'); }
@@ -1504,7 +1536,7 @@
            choicewrite('<label><input name="stringval" value="map_map"'+
                   ' type="radio" '+callradiostringeval('map_map'));
            if (svalue=='map_map') { choicewrite(' checked="checked"'); }
-           choicewrite(' /> Yes, and the scope of the slot is the enclosing map/folder. When checking in, all resources in the map/folder are checked in.</label><br />');
+           choicewrite(' /> Yes, and the scope of the slot is the enclosing map/folder. When checking in, all resources in the map/folder are checked in.</label></fieldset><br />');
            choicewrite('</td></tr></table>');
        }
        if (pscat=='deeplink') {
@@ -1576,8 +1608,8 @@
            deeplinktargettxt = ['Embedded','Not embedded'];
            var deeplinkexit = ['yes','url','no'];
            tablestart('Deep-linked items');
-           choicewrite('<tr><td>Access status?</td><td>');
-           choicewrite('<select name="deeplinkstate">');
+           choicewrite('<tr><td><label for="deeplinkstate">Access status?</label></td><td>');
+           choicewrite('<select name="deeplinkstate" id="deeplinkstate">');
            for (var i=0; i<deeplinkstate.length; i++) {
                choicewrite('<option value="'+deeplinkstate[i]+'"');
                if (deeplinkvals[0] == deeplinkstate[i]) {
@@ -1586,8 +1618,8 @@
                choicewrite('>'+deeplinkstatetxt[i]+'</option>');
            }
            choicewrite('</select></td></tr>');
-           choicewrite('<tr><td>Hide other resources?</td><td>');
-           choicewrite('<select name="deeplinkothers">');
+           choicewrite('<tr><td><label for="deeplinkothers">Hide other resources?</label></td><td>');
+           choicewrite('<select name="deeplinkothers" id="deeplinkothers">');
            for (var i=0; i<deeplinkothers.length; i++) {
                choicewrite('<option value="'+deeplinkothers[i]+'"');
                if (deeplinkvals[1] == deeplinkothers[i]) {
@@ -1596,8 +1628,8 @@
                choicewrite('>'+deeplinkotherstxt[i]+'</option>');
            }
            choicewrite('</select></td></tr>');
-           choicewrite('<tr><td>In Contents + Gradebook?</td><td>');
-           choicewrite('<select name="deeplinklisted">');
+           choicewrite('<tr><td><label for="deeplinklisted">In Contents + Gradebook?</label></td><td>');
+           choicewrite('<select name="deeplinklisted" id="deeplinklisted">');
            for (var i=0; i<deeplinklisting.length; i++) {
                choicewrite('<option value="'+deeplinklisting[i]+'"');
                if (deeplinkvals[2] == deeplinklisting[i]) {
@@ -1606,8 +1638,8 @@
                choicewrite('>'+deeplinklisttxt[i]+'</option>');
            }
            choicewrite('</select></td></tr>');
-           choicewrite('<tr><td>Access scope for link</td><td>');
-           choicewrite('<select name="deeplinkacc">');
+           choicewrite('<tr><td><label for="deeplinkacc">Access scope for link</label></td><td>');
+           choicewrite('<select name="deeplinkacc" id="deeplinkacc">');
            for (var i=0; i<deeplinkscopes.length; i++) {
                choicewrite('<option value="'+deeplinkscopes[i]+'"');
                if (deeplinkvals[3] == deeplinkscopes[i]) {
@@ -1617,17 +1649,19 @@
            }
            choicewrite('</select></td></tr>');
            choicewrite('<tr><td>Link protection</td><td>');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Link protection</legend>');
            choicewrite('<span style="white-space: nowrap;"><label>');
            choicewrite('<input name="deeplinkprotect" value="none"'+
                   ' type="radio" '+calldeeplink('protect'));
            if (deeplinkvals[4]=='none') { choicewrite(' checked="checked"'); }
            choicewrite(' /> not in use</label>');
-           choicewrite('<input name="deeplinkprotect" value="key"'+
+           choicewrite('<label><input name="deeplinkprotect" value="key"'+
                   ' type="radio" '+calldeeplink('protect'));
            if (deeplinkvals[4]=='key') { choicewrite(' checked="checked"'); }
            choicewrite(' /> key access</label>');
-           choicewrite('<input type="'+dlinkkeysty+'" name="deeplinkkey" id="deeplinkkey" value="'+dlinkkeyval+'" size="10" />');
-           choicewrite('</span><br />');
+           choicewrite('<input type="'+dlinkkeysty+'" name="deeplinkkey" id="deeplinkkey" value="'+dlinkkeyval+'" size="10" aria-label="Key" />');
+           choicewrite('</fieldset></span><br />');
 
            var possmenus = new Array();
            if ((pextra != '') && (typeof(pextra) != 'undefined')) {
@@ -1654,7 +1688,7 @@
                                if (deeplinkvals[4]=='ltic') { choicewrite(' checked="checked"'); }
                                choicewrite(' /> course LTI launch</label>');
                                choicewrite('<div id="deeplinklticdiv" style="display:'+dlinklticdivsty+'">');
-                               choicewrite('<select name="linkpossltic">');
+                               choicewrite('<select name="linkpossltic" aria-label="Launcher">');
                                var sel='';
                                if (deeplinkvals[4]!='ltic') {
                                    sel = ' selected="selected"';
@@ -1724,6 +1758,8 @@
                }
            }
            choicewrite('<tr><td>Menu Items Displayed</td><td>');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Menu Items</legend>');
            choicewrite('<span style="white-space: nowrap;"><label>');
            choicewrite('<input name="deeplinkmenus" value="std"'+
                        ' type="radio" '+calldeeplink('menus'));
@@ -1736,9 +1772,9 @@
                choicewrite('<input name="deeplinkmenus" value="collnum"'+
                            ' type="radio" '+calldeeplink('menus'));
                if (deeplinkvals[5] > 0) { choicewrite(' checked="checked"'); }
-               choicewrite(' /> Numbered collection</label>');
+               choicewrite(' /> Numbered collection</label></span></fieldset>');
                choicewrite('<div id="deeplinkmenusdiv" style="display:'+dlinkmenusdivsty+'">');
-               choicewrite('<select name="linkpossmenu">');
+               choicewrite('<select name="linkpossmenu" aria-label="Collection number">');
                var sel='';
                if (deeplinkvals[5] == 0) {
                    sel = ' selected="selected"';
@@ -1753,11 +1789,11 @@
                    }
                    choicewrite('<option value="'+possmenus[i]+'"'+sel+'>'+possmenus[i]+'</option>');
                }
-               choicewrite('</select></div></span><br />');
+               choicewrite('</select></div><br />');
            }
            choicewrite('</td></tr>');
-           choicewrite('<tr><td>Embedded?</td><td>');
-           choicewrite('<select name="deeplinktarget">');
+           choicewrite('<tr><td><label for="deeplinktarget">Embedded?</label></td><td>');
+           choicewrite('<select name="deeplinktarget" id="deeplinktarget">');
            for (var i=0; i<deeplinktarget.length; i++) {
                choicewrite('<option value="'+deeplinktarget[i]+'"');
                if (deeplinkvals[6] == deeplinktarget[i]) {
@@ -1768,6 +1804,8 @@
            choicewrite('</select>');
            choicewrite('</td></tr>');
            choicewrite('<tr><td>Exit Button?</td><td>');
+           choicewrite('<fieldset class="LC_borderless">');
+           choicewrite('<legend class="LC_visually_hidden">Exit Button</legend>');
            choicewrite('<span style="white-space: nowrap;"><label>');
            choicewrite('<input name="deeplinkexit" value="no"'+
                   ' type="radio" '+calldeeplink('exit'));
@@ -1782,11 +1820,11 @@
            choicewrite('<input name="deeplinkexit" value="url"'+
                   ' type="radio" '+calldeeplink('exit'));
            if (deeplinkvals[7]=='url') { choicewrite(' checked="checked"'); }
-           choicewrite(' />in use, redirect to URL</label></span><br />');
+           choicewrite(' />in use, redirect to URL</label></span></fieldset><br />');
            choicewrite('<div id="deeplinkexitdiv" style="display:'+dlinkexitdivsty+'">');
-           choicewrite('<br /><span style="white-space: nowrap;">Button text: ');
+           choicewrite('<br /><span style="white-space: nowrap;"><label>Button text: ');
            choicewrite('<input type="text" name="deeplinkexittext" id="deeplinkexittext" value="'+dlinkexittextval+'" size="10" />');
-           choicewrite('</span></div>');
+           choicewrite('</label></span></div>');
            choicewrite('</td></tr></table>');
        }
        if (pscat=='grace') {
@@ -2059,7 +2097,7 @@
 
   this.window.selector.document.open();
   selwrite('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
-  selwrite('<html xmlns="http://www.w3.org/1999/xhtml">');
+  selwrite('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">');
   selwrite('<head>');
   selwrite('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');
   selwrite('<title>LON-CAPA</title>');
@@ -2071,12 +2109,17 @@
   selwrite('font-size:0.83em;');
   selwrite('background: #FFFFFF;');
   selwrite('}');
+  selwrite('div.LC_landmark { margin: 0; padding: 0; border: none; }');
+  selwrite('.LC_heading_3 { font-size: 1.0em; }');
+  selwrite('fieldset.LC_borderless { display: inline; border: 0; padding: 0; margin: 0;}');
+  selwrite('.LC_visually_hidden:not(:focus):not(:active) { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; display: inline; }');
   selwrite('-->');
   selwrite('</style>');
   selwrite('</head>');
   selwrite('<body>');
-  selwrite('<form name="fsel" action=""><b>'+pname+'</b><br />');
-  selwrite('Format of Value(s): <select name="fcat" onchange="parent.catchange();">');
+  selwrite('<div class="LC_landmark" role="contentinfo">');
+  selwrite('<form name="fsel" action=""><h1 class="LC_heading_3">'+pname+'</h1>');
+  selwrite('Format of Value(s): <select name="fcat" onchange="parent.catchange();" aria-label="format">');
 
   if (ptype=='tolerance') {
      sopt('default','Default');
@@ -2160,8 +2203,9 @@
   selwrite('</select></form>');
   if (ismap == 1) {
       if ((pparm != 'hiddenresource') && (pparm != 'encrypturl')) {
-          selwrite('<form name="frec" action="">');
-          selwrite('Recursive: <label><input type="radio" name="recurse" value="1" ');
+          selwrite('<form name="frec" action=""><fieldset class="LC_borderless">');
+          selwrite('<legend class="LC_visually_hidden">Recursive</legend>');
+          selwrite('<span aria-hidden="true">Recursive: </span><label><input type="radio" name="recurse" value="1" ');
           if (precursive == 1) {
               selwrite('checked="checked" ');
           }
@@ -2171,9 +2215,10 @@
               selwrite('checked="checked" ');
           }
           selwrite('onclick="parent.recursechange();" />No</label>');
-          selwrite('</form><br />');
+          selwrite('</fieldset></form>');
       }
   }
+  selwrite('<div style="margin: 2px 0 0 0; padding: 0;">');
   var targ='parent.opener';
   if (pmodal==1) {
      targ='parent.parent';
@@ -2210,7 +2255,7 @@
   }
   selwrite('">Delete</a>  ');
  
-  selwrite('</body></html>');
+  selwrite('</div></div></body></html>');
   this.window.selector.document.close();
   if (pscat == 'deeplink') {
       if (psmap==1) {


More information about the LON-CAPA-cvs mailing list