[Resolved] Accessibility issue with Views controls

[Author]

Posts

[Suzanne Wenger]

Several of my views which have filter controls on them were throwing "missing form label" accessibility errors. I have labels for the controls in the view, but since not all the controls have an "Id" attribute and the corresponding labels do not have any "for" attributes assigned, they are not considered accessible. (see attached screenshot) I have been able to fix some of the errors because some of your controls come up with system generated "id" attributes and then I can manually add a "for" attribute to the label. As an example I have fixed the form controls on this page: hidden link (see attached screenshot)

I have attempted to add an ID fields or other fields to the label and control under the Edit View > Filter Editor area to fix the controls which do not get ids, but this gets ignored by the views system and they do not show up in the page. (see attached screenshot)

You can view the accessibility error at this page on our site: hidden link

I need to have all of the accessibility errors on our site cleared within a month or so for compatibility with national laws.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Suzanne,

Thank you for contacting our support forum.

Is it that you want to add the for attribute to the select field ?

Please let me know.

Thanks,
Shane

[Suzanne Wenger]

Hi Shane,
It isn't just that I need to add a "for" attribute to the Label. I can do this, but the control field the label is attached to also needs an "id" field. If the control has an "id" then I can add a "for='id'" into the label field and then they won't have any issues with accessibility. There are more than one way to fix this accessibility error, but none will work because I can't add additional attributes to your shortcodes.

Below is a description of the error and how it can be fixed...

Errors: Missing form label

What It Means
A form control does not have a corresponding label.

Why It Matters
If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.

How to Fix It
If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.

The Algorithm... in English
An <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea> does not have a properly associated label text. A properly associated label is:

• a <label> element with a for attribute value that is equal to the id of a unique form control
• a <label> element that surrounds the form control, does not surround any other form controls, and does not reference
• another element with its for attribute
• a non-empty title attribute, or
• a non-empty aria-labelledby attribute.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Suzanne,

I have an idea that might work.

Why not add it through the frontend using some jquery.

Take a look at the link below
hidden link

This should provide an example of what i'm referring to.

I know that if the attribute isn't an allowed attribute then it won't show up.

Please let me know if this helps.
Thanks,
Shane