cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
AUSharePoint
Nintex Newbie

Help: How to fix Accessibility issues in Forms?

"Forms are SO unaccessible!" -- My Accessibility Department

There are several accessibility issues he pointed out that I don't know how to correct via Nintex.... does anyone have any experience, or lessons learned you can share with making Nintex Forms accessible?

EXAMPLES--------

1. Missing form label on Person Field: As you can see there are 2 missing labels in this person field. However, there is a label associated with the field and the field is obviously filled out

2. Orphaned form label on Calculated Field: As you can see the field is completed, and there is a label associated with this field

3. Missing form label on Text Field: This field has a label associated with it

4. Missing form label on "Other" textbox in choice field: The choice field has a label associated, but with the "allow other" option the textbox says there's not a label

5. Missing form labels on SQL Request Dropdown: the dropdown has a label associated with it, but there are 2 missing label hits here. One is for "loading..." text.

Reply
16 Replies
Automation Master
Automation Master

Re: Help: How to fix Accessibility issues in Forms?

Can you provide some type of tangible direction that they would like to go in order to bring the form up to whatever  spec that is set by that department?? 

The forums might be able to better help if there are specifics. 

0 Kudos
Reply
AUSharePoint
Nintex Newbie

Re: Help: How to fix Accessibility issues in Forms?

Oh yes. I guess that would be helpful. I will update the post.

0 Kudos
Reply
AUSharePoint
Nintex Newbie

Re: Help: How to fix Accessibility issues in Forms?

N M‌ thank you for the suggestion. I'm not sure why I did not think to add the examples in the first place. 

0 Kudos
Reply
Automation Master
Automation Master

Re: Help: How to fix Accessibility issues in Forms?

Are you using Responsive or Classic Forms

While there might be *something* that can be done before the page is fully rendered (I am not entirely sure how things such as screen-readers wait for the page content, or if it's just utilizing something like the 'document.ready()' event), it's going to be more or less difficult depending on the form you're using. 

That is, unless a Nintex Dev comes in here with an Out Of The Box Accessibility save. 

---------

0 Kudos
Reply
AUSharePoint
Nintex Newbie

Re: Help: How to fix Accessibility issues in Forms?

This is from a "Classic Form," and yes that would be great is a Nintex Dev would help us out. I'm sure I'm not the only one with this issue.

0 Kudos
Reply
jdblundell
Nintex Newbie

Re: Help: How to fix Accessibility issues in Forms?

I'm in the same boat (although I'm primarily using responsive forms). We must meet WCAG 2.0 AA requirements and when we saw the initial demo for Nintex we were told it was fully accessible.

From what I can tell, the labels are separate from the input fields. When I test the form with JAWS it doesn't read the label and input form together so on most of the fields, if I tab between fields, it simply reads, "input field."

Seems it's not as accessible as we were initially sold on.

Reply
AUSharePoint
Nintex Newbie

Re: Help: How to fix Accessibility issues in Forms?

Patrick Abel‌ do you have any suggestions on making classic forms accessible?

0 Kudos
Reply
Community Manager Community Manager
Community Manager

Re: Help: How to fix Accessibility issues in Forms?

Euan Gamble‌ - would you be able to comment pls?

0 Kudos
Reply
Automation Master
Automation Master

Re: Help: How to fix Accessibility issues in Forms?

So I grabbed WAVE and started looking at the forms... 

I can see whatcha mean. Some of the problems looked like they can be solved by associated a Label Control to the Named Control via the options. 

You can do this via the Control's own Settings page as shown: 

Or via the top Properties Ribbon as shown: 

However! For whatever reason, Nintex Forms doesn't seem to actually care about that association for *certain* controls. Attachments? No Association even if you use the Associated Control field!!! 

Other finds

  • Calculated Controls use a <label> element to display their values instead of something like a <span> (which can actually have any aria role on it making it far better (unless I'm missing something)). This creates a label that isn't associated with anything because it literally can't be...
    • It should also be noted that if the Calculated Control returns 'nothing' like an empty string, it will cause problems because it looks like a label that is not only detached, but also contains no text. 

  • Some controls have hidden <input> / <select> fields that are visually hidden but do not contain the aria-hidden="true" attribute, and so they throw an error. 

  • Label Controls that are associated to a Named Control will still result in an error if they are located inside of a Repeating Section due to the nature of how New Rows of a Repeating Section are cloned but not cleaned up. Essentially, all of the labels will point back to the 'hidden' Row 0 version of their associated controls, and not the newly created controls on the first and subsequent rows.
    • However for forms that are NOT new, and have had no New Rows added, they should be generated correctly. 

I don't have time to go through all of the various things, but there might be a path to correcting a lot of this with some clever javascript fixes that run before the form is finished generating. But right now that's a bit of speculation as I'm not entirely certain how Aria standards / Accessibility Software works. 

One place that I started to look is: HTML5 Accessibility Chops: hidden and aria-hidden | TPG – Digital Accessibility Solutions 

seems that using a combo of the element tags "hidden aria-hidden="true"" and the css of {display:none}, should be enough to force an element to be ignored across a majority of browsers. 

Using that knowledge in conjunction with the internal control id guids used across all forms (Form Control Property complex element), it seems like a solid series of css rules and js can be made to easily apply accessibility fixes. 

I know it's not a complete answer, but it should at least get a few of gears moving in the right direction. 

Reply