The ""Membership"" page of the environment provides a table with several checkboxes that allow the user to make selections and then activate either the ""Unjoin"" or ""Clear Selections"" buttons at the bottom of the page. However, these checkboxes currently rely solely on the <title> attribute to provide their name, and do not utilize the <label> attribute. As such, screen reader users may have difficulty discerning the purpose of the checkboxes.
Developers must always provide valid labels for form fields in order to ensure that screen reader users will be able to discern the purpose of the form field. In this case, the HTML <label> attribute must be implemented with the ""for"" value matching the ""id"" of the input field. This <label> element can be positioned off-screen with CSS as long as it is not assigned the display:none property. The following code is provided as an example: