Upload Form Combo Boxes WCAG Failures #254
Comments
|
NB: @ptamarit observes that the problems in this ticket are traceable first to semantic-ui and has some ideas about how to address problems with semantic-ui not actually being very semantically conformant:
|
and others
Contents and/or State of items from dropdown lists and comboboxes often not available to AT and/or are not completely keyboard accessible. (e.g., Subject Select, Languages, Additional Description/Language, Add Standard Award/Funder)
Required dropdown fields (e.g., Resource Type and Creators) are not properly labeled.
Example of non-compliant "Subject Select" combobox form field, followed by improved code sample:
Issues with the above code:
Ensure the Label is Properly Associated:The label currently has a nested label element with no accessible text or description. This can be improved by associating the label directly with the input using the for attribute and providing meaningful text.
Correct the Use of name Attribute:The name attribute is being incorrectly used on a div element. It should either be removed or replaced with a valid attribute that applies to div elements, like data-* attributes.
Role and ARIA Attributes:Ensure that the roles and ARIA attributes are correctly used and clearly convey the purpose of each interactive element. For example, the combobox should clearly indicate its expanded state, and options should convey selection status appropriately.
Keyboard Accessibility:Ensure that all interactive elements are keyboard accessible, with focusable attributes like tabindex and appropriate event handling for keyboard interaction.
Add Accessible Descriptions:Use aria-describedby or similar attributes to provide additional context or descriptions where needed.
Improved version:
Example of non-compliant required dropdown field (Resource Type):
1. Analysis of the Current Code
Role and Accessibility
The role="listbox" attribute is correctly used, indicating that the element functions as a listbox. The aria-multiselectable="false" attribute specifies that the listbox does not support multiple selections.
The aria-expanded="true" attribute indicates that the dropdown is currently open, which is appropriate.
The aria-label="Resource type" attribute provides a label for screen reader users, which is good for accessibility.
Missing Elements
There is no visible label associated with the dropdown. While aria-label is used, it’s better to have a visible label and link it to the dropdown using the for attribute.
The required attribute is present, but it is set to an empty string (required=""). This does not fully indicate that the field is required to assistive technologies.
The aria-describedby attribute could be used to provide additional context or error messages.
Interactive Elements
The tabindex="0" makes the dropdown keyboard navigable, which is good, but additional focus management for options should be ensured.
2. Enhancements for WCAG Conformance
To make the code more conformant with WCAG 2.1 Success Criterion 4.1.2, especially for a required field, the following enhancements are suggested:
The text was updated successfully, but these errors were encountered: