Upload Form Dropdown menu / Combo Boxes WCAG Failures

1. While basic dropdown menus have been improved (e.g., they can be accessible by the keyboard and voiceover technology), comboboxes like "Keywords and subjects" (with controlled vocabularies and free text options) have not. They are keyboard accessible, but the controlled vocabulary dropdown lists are not labeled in a way that announces each item via voice over.

1. Required dropdown fields (e.g., Resource Type and Creators) are not properly labeled. Other required fields include the "required field" label as part of the text box associated with the field. Since "Resource Type" doesn't allow for text entry (only dropdown selection), it does not inform voiceover that it is required. Likewise, since "Creator" is a button rather than a text field, it does not inform voiceover that it is required.

**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:

```