How to make your forms accessible for people with disabilities

[00:01:05]

For those of you who don’t know, I just wanted to give a brief overview of what web accessibility is and why it’s important. Web accessibility helps people with disabilities access the web through the use of assistive technology such as screen readers, voice recognition programs, screen enlargement applications, and more. And it’s really important because web accessibility provides equal access to basically everybody to tools and applications that will help them live a more productive and organized life. So Jotform was really interested in being part of this and especially offering accessibility to our users since we are approaching 6 million users now. 

So after doing some research about Americans with disabilities, we found that 57 million Americans actually have a disability. And some examples of this are about 19.9 million have difficulty lifting or grasping, and this can impact their ability to use a mouse or keyboard. 8.1 million have a visual impairment. These individuals might rely on a screen magnifier or a screen reader or have a form of color blindness that affects their ability to understand online content. 7.6 million have a hearing impairment.

[00:02:22]

So that might make them rely on transcripts and captions for audio and video media. As you can see, 57 million is a huge number and that’s only in the U.S. You can imagine how many more people are affected globally. With that said, it’s really important to not only have accessible tools available but also have them for your customers and your clients and your users as well.

[00:02:51]

This brings us into Accessible Forms and why Jotform decided to launch this. As I kind of mentioned a couple minutes ago, it’s so utterly important to provide equal access to all of your tools and Accessible Forms is a really great way to include that in your suite of tools that you already have.

It’s great for companies who want to reach a larger number of users or people in general to broaden their customer base. When you have Accessible Forms, you’re able to collect information from anybody no matter what their disability is.

So it’s just really important to think about and to implement them into your workflow. I want to talk a little bit more about Jotform’s Accessible Forms and its features.

[00:03:47]

We have a really great built-in accessibility tracker. We also have alt-text descriptions, accessible color schemes, and also support standard input mechanisms such as your provided keyboards and pointing devices. We also have accessibility badges that are available on published forms so that when your forms are live, somebody can go through and they can see the badge there and they’ll know that it’s accessible. And also if you’re on the go, or you don’t have a lot of time, we have premade accessible templates so it’s really easy to use one of those.

And to have it ready to go and not have to spend a lot of time on it. Lastly, our forms are also Section 508 and WCAG compliant. So that makes it really great for organizations that need to follow those standards.

[00:04:39]

So before we jump into the demo, I want to go over a few dos and don’ts for building Accessible Forms. Do use plain language. So it’s so important to use very simple language, probably about like a third-grade level just so that people don’t feel confused or so that the words aren’t too complicated to understand. The second thing is to clearly label form fields and we’ll give an example of this in the demo. But the more descriptive that you are with the form fields, the easier it is for people to understand what you’re asking and it’ll be easier for them to give you the information that you want.

[00:05:16]

Besides that, it’s really good to use an accessible color scheme. Jotform is one of the most versatile form builders out there, and we have a ton of different options for choosing really cool backgrounds with images and videos, but it turns out that in terms of accessible forms, the simpler the better with color schemes. We’ve clearly labeled these color schemes within a little human badge in the upper left hand corner so I’ll show that to you in a demo as well. But it’s really important to make sure that you’re using an accessible color scheme so that people can easily see what it is that you are including in your form.

[00:05:56]

Besides that we also have the ability to write descriptive text alternatives for images and also descriptive names for links. As you can see, there’s kind of a theme here to make things really clear, simple, and as descriptive as possible. Moving on to the don’ts: don’t use blinking or flashing images because they just kind of make things confusing for people, and don’t use fancy fonts.

So make sure they’re very clear and easy to read. OK.

[00:06:36]

Annabel: We’re going to jump into the demo. This is a demo on how to build an accessible registration form. I am just going to come over and switch my screen really quickly.

OK, perfect. So now we are in Jotform’s Form Builder. So I’m sure most of you are familiar with this. So I won’t spend too much time here. What I’ll do is I’m going to click on this piano lesson registration form, and we are going to edit that. I have already built this form just to make it a little bit easier for the demo. So I’m just gonna go through and kind of show what you would have done so far, and then I’ll go through the accessible forms portion of this.

[00:07:32]

So for the welcome page, we have a piano lesson registration form. We have a piano icon and as we scroll down, we have a nice image here to add some personalization to the form.

We also have general details that we want to get from people such as name and email.

This blank form field here actually is going to be a phone number, but I left it blank on purpose so that I can show you the example with the Accessibility Checker.

[00:08:02]

Next we have which level are you, so that people can choose which level they are and then when they would like to start their lessons. Then if I want to make this form accessible, all I do is come up to the Settings option here in the top, and then I’m going to click show more options. And then next, I’m going to scroll down the page until I come to the Form Accessibility section. Here all I need to do is just click the dropdown menu, press Enabled, and then also click the box that says show the accessibility badge on the form.

Now, this is optional, but we highly recommend that you choose that because it will automatically have an accessibility badge up here that validates your form and people know that it’s accessible.

[00:08:54]

So now I’m going to come back to my form, and as you can see, I have three accessibility problems that have appeared on this form. There are all three of them. The first one says, “Accessibility warning: Your form’s color contrast isn’t good for web accessibility. Please change your color palette.” So it’s a quick fix. I was going to come over to the Form Designer, click on that, and then when I scroll down, you can see that there are a few different color schemes that have this little human icon in the upper left hand corner.

That means it’s an accessible color scheme and you can even see when you have your mouse over it. It also describes that it’s accessible. So I’m going to choose this green one here, and then once I click on this accessible color scheme, that problem goes away. So that’s automatic. So now I’m going to come down and look at my second accessibility warning. So that says this image has no alt-text. All images must have alt-text for accessibility.

[00:10:06]

That’s another quick fix. I’m going to click on this picture. Click on the Properties and then come to Advanced, and then all I do is just type in a description here. So I will say, “women playing the piano.” And then once I type that in, that accessibility problem also goes away too. 

So now I will come down to the third accessibility warning, and that one says all form questions should have a label. This is one that I mentioned earlier that was supposed to be the phone number. I’m going to type in “phone number.” Once I do that, the accessibility warning disappears too. So now my form should be totally accessible. I can publish this, and then I can open this in a new tab, and then I will need to share my screen one more time to show you the final result.

There we are. Perfect. As you can see, my piano lesson registration form is complete. And I also have this really great accessibility badge at the bottom. I’m just going to go through and see what the form looks like, and it’s finalized. Once I press Submit, I can send in all of my information. That’s the end of the demo.

[00:12:06

Annabel: I just want to talk about Section 508 compliance. A lot of users have reached out and asked us about what it is, who needs to be Section 508 compliant, is Jotform Section 508 compliant etc. This is just like a brief overview of what all that means.

So Section 508 compliance requires certain organizations to make all technology and internet content accessible for people with disabilities. Even if your organization isn’t required, because not all of them are, we do recommend that you still look at the compliance and work to make your online forms accessible and tools accessible so that everybody can access them. Going to the next question: Who needs to be section 508 compliant? Section 508 applies to all agencies that receive federal funding. This includes government agencies, nonprofits that receive federal funding, public K–12 schools and public colleges and universities. 

[00:13:04]

And lastly, is Jotform Section 508 compliant? Yes, we are. In the demo, when I showed you the warnings that were popping up, that is actually our built-in Section 508 compliance feature, which, as you saw, automatically warns you if you add a form feature that isn’t section 508 compliant. We are 508 compliant, and if you have any other questions or you’d like more information, we have a really great FAQ section on 508 compliance, and that’s available on our Accessible Forms page, which is jotform.com/accessible-forms. I’ll also provide that link to you at the end of the webinar.

[00:13:49]

Annabel: We also have the WCAG compliance that stands for web content accessibility guidelines, which explains how to make website content more accessible to those with disabilities.

And it also aims to make site information more easily interpreted by assistive technologies. So who needs WCAG compliance? Since it’s a set of formal guidelines, it’s not necessarily a legal requirement to be WCAG compliant, but many organisations have adopted these standards regardless. And there’s also some countries that require this compliance for government agencies. 

[00:14:25]

Just make sure that you keep a lookout for those if you if that applies to you. Is Jotform WCAG compliant? According to the WCAG standards, we are level A and level AA compliant by default, and you can also learn more about this by visiting our FAQ on the landing page. This is the end of our presentation. We’re going to jump into the live Q&A session right now. Please enter your questions in the chat panel, and then David and I will help answer them.

[00:15:03]

Annabel: OK. Now we have a question from Katie: Can the Accessibility Checker be turned on by default for an enterprise account? So David has responded to this question saying by default the Accessibility Checker is disabled, including enterprise so it would need to be enabled on a per form basis.

OK, it looks like we have another question: “Are WCAG and 508 Canadian references or American?”

So I believe these are both actually. David, do you have any more information on that one?

David: I do not. I actually wasn’t aware there was a difference between the two compliances. I believe our standards were geared toward the American audience. I’m not sure if the Canadian standards differ.

[00:16:14]

Annabel: Perfect. Thank you. It looks like there are some other audience members who’ve included some answers in the chat panel too. Maybe you get to reference that for people who might have more information on it. Cool so it looks like Michael is mentioning that another really good best practice for creating a description is to include a period so that the screen readers pause. That’s also a really good tip for writing your descriptions. Let’s see here we have some other questions.

“When creating a registration form, can a payment be taken or accepted?” Yes. We have about 30 different payment processors to choose from. If you just integrate those into your form, then you’ll be able to accept payments with that. Question here from Patrick, saying, “Is this a toggle on or off feature, so people can use the form that best works for them?”  Yes, Patrick. In the demo, we just went over to the Settings section of the Form Builder. And then if you scroll down, you can just click the dropdown menu and either enable or disable the feature.

[00:17:35]

So we have a question here from Jess: “I do not currently use JotForm. Does it easily link up with Google Docs to export the information the forms gather?” David, you have some insight on this one.

David: Yeah. We actually have built-in Google Docs and Google Drive integrations. The Google Docs integration specifically, when it’s set up, will create a new spreadsheet in Google Docs and every new submission as well as all current form data would be directly sent to that sheet. So every time a new submission is received, that data gets sent to your Jotform account and then also forwarded to the integrated Google Docs spreadsheet.

[00:18:17]

Annabel: Perfect. Thanks, David. We have a question here from Katie, asking, “Do you have a VPAT available?” Yes, we do. If you head over to the Accessible Forms landing page, you will be able to check it out there.

[00:18:32]

OK. Perfect. So we have a question here from Ashton: “How would you suggest fixing a signature widget to be accessible? I’m getting the error, ‘This widget may limit the accessibility of your form. Users with impairments may have trouble filling out your form.’ ” David, would you mind answering this one?

David: Yeah. One of the limitations on our widgets is the way they’re loaded in frames into the form, and some widgets, no matter what is applied to them simply based on the way they load into the form cannot be made accessible. That signature widget, specifically with the way it’s sort of a drawing box, cannot be made accessible for people who are blind and that sort of thing. One of those limitations in producing fully accessible forms is using field types that are also accessible. So you may be limited when doing a fully accessible form to not using certain types of fields.

[00:19:39]

Annabel: Thank you, David. Let’s see here. All right. Other questions.

So Sonny is asking, “Is there a link to see videos on how to create different forms?” Yes, Sonny. So if you visit, we’ll have this recording available if you’re looking for info on how to create an accessible form. But if you’re looking for general ways to create forms, visit our YouTube channel: YouTube.com, and Jotform is the username. You’ll be able to see other videos on how to create forms. Kathleen is asking, “It would be nice if widgets could be made ADA compliant. Is that something coming in the future?”

So we’re always adding new features to our products. That is something that could really likely happen. I don’t have an update right now. But if you check in another couple of weeks to months, we’ll be able to provide some more information on that. We have another question here from Janine: “Can our guests receive an email confirmation that their registration and payment are complete?” Yes Janine, you can enable email notifications so that people can receive confirmation that their form has been submitted. Depending on which payment provider you choose, they also have different notifications that you can enable.

[00:21:23]

A question here from Haven: “Does the Accessibility Checker actually limit what you can do with the form or are the popups just suggestions for how to improve accessibility?” David, do you have an answer for this one?

David: So they are just suggestions on what you can do in terms of improving accessibility. It will show errors in the builder. If there is something that’s not fixed, it won’t prevent you from using the form if you don’t fix it. So if half of the form is accessible, it will allow you to still use the full form. It just won’t present the accessibility badge unless it’s 100-percent accessible. Unless all those errors are cleared, form is still usable but it won’t show the badge that it’s fully accessible.

[00:22:17]

Annabel: Thanks, David. And then we have a question here from Paul: “Do you have a list of people locally so that I can sit down face to face with for help with forms?” Unfortunately, Paul, we don’t have any in-person support, but we do have a really great support forum that you can use. And that’s just going to be jotform.com/contact. And then we’ll be able to answer any questions or kind of guide you through the building process. OK, we have time for one or two more questions.

Great. Well then I guess we can end. I just want to say thank you to everybody for joining our webinar today. And if you have any other questions, please contact our support team. And that’s going to be jotform.com/answers/ or support@jotform.com. And if you’d like more information, please feel free to visit our Accessible Forms landing page.

And that’s going to be at jotform.com/accessible-forms. All right. Thank you and have a good one.