Introduction to Gravity Forms Accessibility Checklist

Building Accessible Forms

Amber: And then building forms.

Uh, so when you are actually building forms, I’m going to say a few things that if you’re an experienced Gravity Forms user, you might be like, wait a minute, what? But these are all things that. have come up when we’ve audited websites because we do a lot of accessibility audits. And so one of the first things is use the advanced fields where applicable.

So Gravity Forms has done a really great job of creating fields for special formats. These are things like email addresses, websites, phone numbers, um, physical addresses, and these four, these fields expect data to be in a certain format and they won’t validate. So for example, the email field won’t validate unless there’s an ad symbol and a period included in it.

And I’ve audited fields where someone has just built a field. or forms where they fill everything with a single line text field. And then what happens is, is it doesn’t force people to actually put a correctly formatted email address in. And sometimes if the browser has auto [00:01:00] completed information or put something in the wrong spot and someone with disabilities doesn’t notice that, then they could submit the form and not get told that they put the wrong information in the wrong field.

So you really want to use these advanced fields because they’re going to help people to provide you the right information. in the right format, um, which is better for the user. And it’s also better for you because it ensures that you get the information and the data that you need. The next thing is paginate really long fields.

If you have a form that has more than 10 fields on it, um, 20, 50, 100, I’ve seen this, you want to make sure that you use the pagination feature in Gravity Forms so that you can present people information in meaningful chunks and not this very long overwhelming list of fields. And then another thing on that same Boat is using conditional logic to hide fields is really important.

So if you have something, I have a screenshot [00:02:00] here that’s just from the default Gravity Forms documentation on conditional logic. So it’s like, do you own a pet? Yes or no. And then there’s a question below it that is, what kind of pets do you own? Probably. And it has options like dog, cat, bird, fish, reptile.

And what we’re doing is turning on conditional logic to only show that what kind of pets do you own field. If someone has said, yes, they own pets, because you don’t really need to show that to someone who’s already told you, no, I don’t own pets. So really thinking about conditional logic so that you’re only showing people fields that are relevant to them.

That’s going to create a form that is more usable for everyone and doesn’t give them a lot of noise that they have to decide, oh, do I ignore this or not? And then the other thing, again, this might seem really basic, but we’ve encountered this a lot. actually marking fields as required. You can find a checkbox under the general settings for the fields where you just check a box and say it’s required.

This will programmatically make it required. So [00:03:00] I’ve encountered a lot of fields or forms recently where it says all fields are required, but then literally nothing is technically required, which means that the user can submit the form without actually filling anything in. Um, so you got to make sure that you’re actually marking fields as required.

And then a really important thing that a lot of people get wrong on forms is that you always have to have visible labels. Uh, and this isn’t just labels for screen readers, but actual visible labels for everyone. Uh, Gravity Forms does a great job if you leave a field label blank. In the admin, it will give you an error that says an empty label violates WCAG, so that’s Web Content Accessibility Guidelines.

Please use descriptive text for your label. To hide the label, use the field label visibility settings. don’t use that. So, um, using that provides a label for screen reader users, but it does not provide a label for sighted people. And it is not okay to only [00:04:00] use placeholder text. Because what happens when you use placeholder text and you hide the field label visually, is that once information has been stored, submitted in the field, you can no longer see the name or the label because you’ve just used placeholder disappears when you type in a field.

So, if you have a long form, And let’s say you ask for name up at the top and then the browser, they go to type their name. The browser is like, Oh, do you want to fill it in? And it thinks it knows what all the stuff is. And it fills in a whole bunch of other fields. Some of which might be below the fold for them.

They have to scroll to see them. If you’ve only had placeholder texts on those, they aren’t going to know whether or not it filled the right information in, perhaps it made a mistake about what information was supposed to go in this field. And now they’re going to have to delete it, see what the placeholder texts is, and then go back in.

So you really need to have visible labels on every field. [00:05:00] If you want to have this slimmer design, I have a screenshot here on the page that shows an example of a floating label. So this is a literal label. It’s not placeholder text, but it’s been positioned with CSS and a combination of CSS and JavaScript so that it looks like it’s in the field.

And then when you type in the field or put your cursor in the field, it moves up. Um, so you can do that. are less ideal, but this would be considered sufficient from an accessibility standpoint if you have a designer who really wants to have this really slim appearance. Another thing that is really important and that Gravity Forms gives us a tool for is enabling autocomplete attributes.

So an autocomplete attribute is something that is added onto a form input field. It’s hidden. You can’t see it unless you inspect the HTML code, but it allows browsers to automatically suggest and fill in information for you. I have an example here [00:06:00] where I have a single line text field that’s asking for a job title.

That’s the label. And then under the advanced settings for the field, we’ve checked off the box to enable autocomplete. When you check that box off, it then provides. An additional field where you can type in the autocomplete attribute, and in this case, it’s organization title. Um, There are specific attributes that are allowed here that are recognized by browsers and would allow, enable people to, um, Have these be autocompleted by their browser for them.

Uh, there’s a link that I have on the slide or if you go to that web page, you can find the same information. It’s also in Gravity Forms documentation of what the specific attributes are. Something that’s important to note is that it, You need to ask for all of these for the person who is submitting the form, but not for other people.

So, if you have a form, I’m a parent, I fill out forms all the time for my kids school. And there are [00:07:00] two name fields on those forms. There’s one where they want my name, and there’s one name field where they want my child’s name. It would be correct to have autocomplete attributes on the field that asks for my name.

But you do not want these on the field that asks for my child’s name. So, so when you are creating these forms, or another one might be if you are doing a grant application, you might say, okay, who are you? And then who are all of your co applicants and what are all of their email addresses? You would want all of the information for the person submitting the form to have autocomplete attributes.

You don’t want it for all of the fields about their co applicants or something. And that’s why I love this setting in Gravity Forms, to be honest, because there are a lot of other WordPress form plugins where, by default, every email field has the autocomplete attribute of email. But that, again, is not correct.

You only want to have it on fields that ask for information for the person submitting the form. But this is a very important feature, so you don’t want to miss it. It is [00:08:00] definitely worth the extra time. two minutes or less than it takes to add it. So here’s another little trick that is really helpful if you have drop downs.

If you have drop downs in Gravity Forms, it’s going to default to the first item being visible from the choices, being visible in the drop down and selected. If you have a required field and it is a dropdown, then what would happen is that if you don’t do what I’m about to tell you to do, someone can just submit the form without choosing anything from the dropdown, and therefore it would default to saying that they wanted the first choice, which may or may not actually be correct.

And again, for someone who is, Not sighted. They’re a blind user on a screen reader. If for some reason they missed the field, it would not error to them. They might not even notice. that, uh, it was saying that they wanted the, something different or making [00:09:00] a different choice than actually what they want. So how do we handle that?

I have, for example, a field here from a nonprofit intake form that says I am interested in, and then the dropdown has four different options, services for children, birth to whatever age it was, services for children three and up, early learning, disability training for Early learning, I think is what that was.

Um, and what we’ve done is above the first option, we have added another choice. We do these with parentheses, select, close parentheses, which then means that when a screen reader user encounters this field, it will say, I am interested in. Um, select, right. It will tell them they need to select something.

And then we’ve toggled on the values option, which is a checkbox down below all your choices. And then we’ve deleted the value from that select item, which means that it will not validate and the form will not be able to submit [00:10:00] unless they choose one of the other options that actually has a value. So this is really helpful, again, to stop people from accidentally submitting forms without making a selection.

Better data for you, better accessibility for people with disabilities. And then I have a couple of things related to opt ins or check marks, check boxes. So for example, uh, agreeing to a privacy policy. One thing that is important to know is if you have They have a consent field that is built into Gravity Forms.

If you have very long text, like privacy policy, uh, do not use this field. You can paste really long text into it, it works. Uh, you, if you wanted to format it, you’d have to use HTML, which isn’t super great, I don’t think, um, from just like a user standpoint. But the real problem with this from an accessibility standpoint is it’s not scrollable with a keyboard, and so nobody who can’t use a mouse is They would not be able to [00:11:00] access this.

Uh, so the better option instead is to have your checkbox. We just use the regular checkboxes option and just give one option. We put a label of privacy policy. We say that it’s required. Um, and then we have something that says I have read and accept organization names privacy policy with a link. You want the link to open in a new tab, uh, so that users don’t use the, lose their progress on the form.

So that’s really important. Um, but then they can go over and open the privacy policy and read it somewhere else. Um, and then if you want to, I have a link on the slide to the accessibility new window warnings, which is a free plugin that automatically warns users if they’re opening in a new tab. Um, so that would be the best way to handle any sort of opt in or consent.

Um, things like, do you want to join our email list, privacy policy, all of those things.