Details
-
Type:
Bug
-
Status: CLOSED
-
Priority:
Blocker
-
Resolution: Fixed
-
Affects Version/s: 11.2
-
Component/s: Accessibility, Permission Widget (authz)
-
Labels:
-
11 status:Verified
Description
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>
Gliffy Diagrams
Zeplin
Attachments
Issue Links
- mentioned in
-
Page Loading...