Provide a valid label for form fields - permission widget

The "Permissions" page of the Calendar section of the environment allows the user to change permission settings of the currently selected calendar through a table with a series of checkboxes. Currently these checkboxes are provided a label via the HTML <label> attribute. However the <label> element wraps the <input> (instead of simply wrapping the label text), and the <span> of text that comprises the label is placed off-screen with CSS via the display:none property. This effectively hides the <label> from accessibility technologies and prevents a screen reader user from being able to discern the label for each presented checkbox.

<td class="1 checkboxCell"><label for="accesscalendar.new"><span class="skip">Enable access: Create events</span><input type="checkbox" value="accesscalendar.new" id="accesscalendar.new" name="accesscalendar.new" class="accesscalendar.new"></label></td>

Developers must ensure that proper programmatic labels are utilized for all form fields in the environment. The HTML <label> element currently utilized is appropriate, however the <label> must not wrap the <input> element it corresponds to. Further, the <span> of text placed inside the <label> must not be assigned the CSS display:none property. The text can be positioned off-screen with CSS other ways, but the display:none property must not be used.

<td class="1 checkboxCell"><label for="accesscalendar.new"><span class="skip">Enable access: Create events</span></label><input type="checkbox" value="accesscalendar.new" id="accesscalendar.new" name="accesscalendar.new" class="accesscalendar.new"></td>

http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/eb0fda06-aa37-4f6a-9e75-3ea5c66a5ee4/sakai.permissions.helper.helper#d4f544cfc3ae72da61349fcb7b54b598-HTML