Accessibility issue with Visforms: Ensures select element has an accessible name

The select filter used for front-end form data display fails to meet the accessibility requirement "Ensures select element has an accessible name."

Scanning a page with the Deque axe-tools browser plugin shows the following result:

Issue Description

Ensures select element has an accessible name
Element location

#filter_com_visforms_visformsdata_656_1_vfsortordering

Element source

<select id="filter_com_visforms_visformsdata_656_1_vfsortordering" name="filter[com_visforms_visformsdata_656_1_vfsortordering]" class="btn" onchange="vttableFullOrderingcom_visforms_visformsdata_656_1_(this);">

To solve this violation, you need to...
Fix at least one (1) of these issues:

aria-label attribute does not exist or is empty

aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty

Form element does not have an implicit (wrapped) <label>

Form element does not have an explicit <label>

Element has no title attribute

Element's default semantics were not overridden with role="none" or role="presentation"

One way to fix this would be to add an aria-label to the element, for example:

Change:


to

Can this be addressed in a future version of Visforms?

Thanks,
Eddie K.

Hi,
thanks,
I will take a look into this and if there are no complications I will address this in a future release.
Regards,
Aicha

Hi,
after Joomla 4 was finally released and after spending the last month finalizing Visforms for Joomla 4, I think this is a good time to address this issue.
I'm not really an expert on the topic of accessibility but I did some research, in order to find a good solution which can be implemented smoothly.
As far as I have learned, there are different ways to approach the subject.
I guess the following article dequeuniversity.com/rules/axe/4.1/select-name lists good solutions.
With regards to how the search tools are implemented, it would be the easiest approach to use the first solution. Add a label with a "for" attribute to each listbox.
The label would then be visually hidden, using css.
For example for the "Ordering" select in  the frontend data view this would then look like this (All texts will be set according to the websites language, so in my case they are in German). As I mentioned before, the label itself would not be visible, because it is hidden using css.
Do you think, this would suffice, and solve the problem?
Regards,
Aicha