Abillity to pass the web accessibility check with WCAG 2.0 AAA standards for JotForms

  • Profile Image
    EloineChap
    Asked on April 28, 2017 at 11:16 PM

    Hello, I need to get a bunch of forms up to our accessibility standards and I am not sure how to modify this form to stop the errors that it is reporting

    http://wave.webaim.org/report#/https://form.jotform.com/51928859985985

  • Profile Image
    Mike_G
    Answered on April 29, 2017 at 02:02 AM

    We would like to apologize for any inconvenience, however, can you help us understand your concern, please?

    May we know what errors in the form are you referring to, please?

    We will wait for your response.

    Thank you.

  • Profile Image
    EloineChap
    Answered on April 30, 2017 at 01:53 AM

    If you click on the wave report of this form and look at the errors the main one is on the email field.

    It says an orphaned form label and that it is not associated with a form control. I also ran this form through the achecker and it says for line 223 how to repair only I am not sure how to do this suggestion "Repair: Add a label element that surrounds the control's label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element"

    I have a lot of forms and I need to get a perfect score on the achecker for compliance in the state law for accessibility requirements by the end of this year. We are an educational institution and face litigation if we don't comply. I think with these forms I have HTML access right? Only am just not familiar with coding forms so I am not sure how to do the above repair.

     

  • Profile Image
    jonathan
    Answered on April 30, 2017 at 04:40 AM

    If you click on the wave report of this form and look at the errors the main one is on the email field.

    Can  you please tell us the URL where to get the wave report?

    I think you were referring to third party website that evaluate the form structure if its according to html standard.

    You do can review the source code of your form also.

     

    I also suggest reiterating your inquiry because it was really not clear the reason we are having difficulty understanding and immediately providing you with proper response and suggestion.

  • Profile Image
    EloineChap
    Answered on May 03, 2017 at 12:35 PM

    The link is at the beginning of this thread. It's the standard when checking accessibility and I ran one of the forms through it because out legal was concerned that your forms were not accessible. You can also test your forms in others and you will get the same results. A popular checker is https://achecker.ca/checker/index.php

     

    We MUST pass this checker otherwise we won't be allowed to use our CMS that insists our code passes WCAG 2.0 AAA before using our files. Google forms passes these tests out of the box but I like jotform better and I have a lot of forms here. I really would like to know how to make the forms pass the check and I assumed I could since you have a whole use case on your site for the Educational market. If they don't pass though then you can't market to the educational institutions especially in California and New York. If you can at least post some tutorials on how to edit the forms to comply for those of us that want to avoid the drive-by lawsuits that are happening right now it would be GREATLY appreciated.

  • Profile Image
    Kiran
    Answered on May 03, 2017 at 02:51 PM

    Since the form is built using drag and drop method and generated with different fields from the builder, there may be some issues that might not pass all the checks related to accessibility. The errors might change when we add other fields like payments or other third party integrations. However, you may consider getting the full source code of the form to use it in a file hosted on your server and rectify the errors reported in the accessibility checker. 

    Let me also forward the issue to our backend team as a feature request to see if it can be fixed. I cannot provide any ETA at this moment. However, if there is any news, we'll update you here.

    Thanks!

  • Profile Image
    EloineChap
    Answered on May 04, 2017 at 03:50 PM

    Thank you very for this answer. This will work in the short term because I can update code however many of our staff are uncomfortable with working in code view. I sure hope this feature is added soon because it's very important that we show compliance.

    I do have one question about embedding the source code like this. One reason I like jot form is I don't get much spam like I've had with self hosted forms in the past. Would this open the door to more spam bots or abuses of the form if I put forms on my web pages this way?

     

    Thanks, E

  • Profile Image
    Kiran
    Answered on May 04, 2017 at 04:05 PM

    Since the issue is now forwarded to our backend team, we'll be updating the thread as soon as we have any information in this regard. 

    The other question is moved to a separate thread and shall be addressed there shortly.

    https://www.jotform.com/answers/1136772

    Thank you! 

  • Profile Image
    ibrahim
    Answered on May 05, 2017 at 06:47 AM

    Hi, 

    There was no use of a label structure for "Full Name" field. We lifted it. Could you please check it? 

    http://wave.webaim.org/report#/https://form.jotform.com/71242536223953

    Regards.

  • Profile Image
    EloineChap
    Answered on May 05, 2017 at 03:22 PM

    Hi Ibrahim, I checked it again but it still says the form label is there. You said you lifted it however I am still seeing it. Do you mean it was lifted since I made this particular form?

    http://wave.webaim.org/report#/https://form.jotform.com/51928859985985

     

  • Profile Image
    david
    Answered on May 05, 2017 at 04:35 PM

    I do see that the report states the field label is still orphaned:

    I believe this is due to the field having two separate parts.  The field label can be clicked to focus the field but not the individual parts.  The same thing happens with the address field.  The clickable labels are the sub labels. 

    To get this to pass, you would need to use a single field for each part, rather than a set of fields.  For the full name, use two different text boxes, one for first name and one for last name.