Accessibility Issues: Required Fields Flagged on Form

Hello, I am researching accessibility and ran into these issues on this form.

It seems to be flagging the required fields for the following.

Hi Isaiah,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

The accessibility issue you are encountering with the span elements having aria-label attributes that are not used is a known concern in web accessibility. Specifically, when a span element has an aria-label attribute but does not have an ARIA-assigned role or is not intentionally hidden, screen readers may not recognize or use the label. This can cause confusion for users relying on assistive technologies.

In Jotform, this often appears on required field indicators (such as asterisk marks) that use span elements with aria-label="Required". While these are meant to indicate that a field is required, the way the aria-label is applied may not be fully accessible.

To improve accessibility in your form, consider the following:

• Ensure that all form fields have proper labels associated with them, as screen readers rely on these for context.
• Use Jotform's Accessibility Enhancer widget to improve ARIA attributes and error message handling. This widget helps reduce accessibility issues, although it may not completely resolve the span aria-label warning.
• Review your form for other accessibility warnings such as color contrast, empty labels, and alternative text for images, as these also affect overall accessibility.

You can enable the Form Accessibility option in your form settings under the Settings tab to have Jotform scan your form for accessibility issues and provide guidance on fixing them.

Here is a helpful guide on How to Make My Forms Accessible that explains these steps in detail.

Give it a try and let us know how it goes.

Adding the accessibility widget actually caused failures instead of the previous items that just needed to be reviewed:

Hi Isaiah,

Thanks for sharing your experience with the Accessibility Enhancer widget. It is known that while this widget improves ARIA attributes and error message handling, it may sometimes cause new accessibility warnings or failures to appear instead of just review flags.

Here’s what you can consider to address this:

• The Accessibility Enhancer widget helps reduce many accessibility issues but does not guarantee removal of all warnings, especially those related to specific widgets like the Unique ID widget, which is not fully accessibility-compliant.
• Review the new warnings carefully to determine if they require action or if they are false positives caused by the widget's scanning method.
• Make sure your form fields have proper labels, sublabels, and alternative text where applicable, as these are common sources of accessibility warnings.
• If a specific widget or element is causing persistent accessibility issues, consider replacing it with a more accessible alternative or a basic field.
• Use the built-in Form Accessibility checker in the Settings tab to scan your form and follow its guidance for fixing issues.

For detailed guidance, you can refer to Jotform’s accessibility resources and best practices on how to make forms accessible.

Give it a try and let us know how it goes.

Hi Isaiah,

Thank you for your patience as the team took a look at the form, as well as the testing you've been doing on the accessibility functionality. Here's what they've found after their review:

1. There is an accessibility limitation on the signature field since it currently only supports drawing, which is causing the warning message to trigger when accessibility checks are enabled.
2. The date picker does not have any major functionality issues, however, it currently announces "telephone" when entering the field.
3. Also within the date picker field, the Previous and Next buttons used to cycle through Months and Years do not currently have label announcements.
4. The sub labels within the address field are not being announced as expected.

We appreciated and understand how important this functionality is to ensure a smooth user experience when completing forms and the team is actively working to address all of the issues they discovered as quickly as possible.

There isn't an ETA for a full resolution at this time, however, we'll be sure to update this ticket as soon as we have any new information from the team.

In the meantime, please let us know if you have any additional concerns and we'll be happy to pass those along as well.

hello i was speaking with one of your reps and he asked me to update the ticket with the following information i showed him.

A element contains visible text that is not found in the accessible name

XPath or CCS selector: body>form:nth-of-type(1)>*:nth-child(10)>*:nth-child(2)>*:nth-child(1)

HTML Element: <a class="badge-wrapper-button accessibility-badge-wrapper" href=https://www.jotform.com/accessible-forms/?utm_source=formfooter&amp;utm_medium=banner&amp;utm_term=260925076608058&amp;utm_content=accessibility_enabled_form&amp;utm_campaign=form_badges target="_blank">...</a>

Description

One or more A elements, without an ARIA-assigned role, not intentionally hidden in the DOM and available to assistive technologies, contains visible text not found in its accessible name.

Span element has aria-label that will not be used

This item repeats for all form elements.

XPath or CCS selector: body>form:nth-of-type(1)>*:nth-child(10)>*:nth-child(1)>*:nth-child(4)>*:nth-child(1)>*:nth-child(1)

HTML Element: <span class="form-required" aria-hidden="true" aria-label="Required" aria-describedby="requirement_description_0">...</span>

Description

One or more span elements, without an ARIA-assigned role, not intentionally hidden in the DOM and available to assistive technologies, has an aria-label attribute.

Hi Isaiah,

Thanks for the additional information about this. Our relevant team will look into this, and we'll update you on this thread once we hear back from them.

Thanks for your patience and understanding, we appreciate it.

Hello, i made a new form and found other issues that i wanted to inform your team about.

https://form.jotform.com/261343582318053

Input type text with suspicious accessible name

XPath or CSS selector

body>form:nth-of-type(1)>*:nth-child(10)>*:nth-child(1)>*:nth-child(10)>*:nth-child(2)>*:nth-child(1)

HTML element

<input type="text" id="input_8" name="q8_q8_textbox6" data-type="input-textbox" class="form-textbox" data-defaultvalue="" style="width:310px" size="310" data-component="textbox" aria-labelledby="label_8" value="" tabindex="0">

Description

One or more input type='text' elements, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies, has a suspicious accessible name value (i.e. under 4 characters long).

Input type checkbox has suspicious accessible name

XPath or CSS selector

body>form:nth-of-type(1)>*:nth-child(10)>*:nth-child(1)>*:nth-child(12)>*:nth-child(2)>*:nth-child(1)>*:nth-child(1)>*:nth-child(2)

HTML element

<input type="checkbox" class="form-checkbox validate[required, maxselection,minselection]" id="input_10_0" name="q10_q10_checkbox8[]" aria-labelledby="label_input_10_0" data-maxselection="1" data-minselection="1" value="Yes">

Description

One or more input type="checkbox" elements, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies, has a suspicious accessible name value (i.e. under 4 characters long).

Aria-required used where it is not allowed

XPath or CSS selector

body>form:nth-of-type(1)>*:nth-child(10)>*:nth-child(1)>*:nth-child(12)>*:nth-child(2)>*:nth-child(1)

HTML element

<div class="form-single-column" role="group" aria-required="true" aria-labelledby="label_10" data-component="checkbox">...</div>

Description

One or more elements, excluding datalist elements (without an ARIA-assigned role), select elements (without an ARIA-assigned role), textarea elements (without an ARIA-assigned role), input type='checkbox | color | date | datetime-local | email | file | month | number | password | radio | range | search | tel | text | time | url | week' elements (without an ARIA-assigned role), and elements with a role='searchbox | spinbutton | textbox | combobox | columnheader | rowheader | gridcell | listbox | radiogroup | tree | treegrid' attribute, not intentionally hidden in the DOM and available to assistive technologies, has an aria-required attribute.

Hi Isaiah,

I’ve passed this along to our relevant team and will update you as soon as we hear back from them.