Embedding Forms & Checking Accessibility

Embedding Gravity Forms on a Page

Amber: So now I want to talk a little bit about embedding gravity forms on a page, because there are actually some practices here that, depending upon the settings you choose, could, uh, impact how accessible the actual page is with the gravity forms.

So the first op thing that you need to always do is always enable AJAX when adding a form to a page. What the AJAX settings in Gravity Forms does is it ensures that the error and confirmation messages will load without a page reload. And will be announced to screen readers. So if you don’t turn on Ajax, when you embed a gravity form, then, um, what will happen is someone will hit submit and it will either reload the same page with that error or confirmation message, or if you’re having it go somewhere else, it will go to the other page, but, um, if you turn on Ajax, then the page does not reload, it just refreshes the form content.

And that helps screen reader users be exactly where they need to be. Um, [00:01:00] without AJAX, when the page reloads, they’re at the top of the page, then they have to go back and find the form to either figure out, A, did it work? Or B, is there now an error message that I have to go, you know, try and fix and resubmit?

Uh, so this is really important. If you’re using the short code, you just need to add AJAX equals true to the short code. If you are using the Gravity Forms block, under the advanced settings, there is a toggle for AJAX. Always turn that on and then you need to sort of be aware of heading levels headings are really important for screen reader users Um using headings in the correct order is a web content accessibility guideline requirement It helps people navigate understand pages So something you should be aware of is that when you add a Gravity Forms to a page, the form title, if you choose to show that, is a Heading 2, and any section titles, if you use that field, is a Heading 3.

So if your form [00:02:00] is in a different section of your page, showing the form title or using section fields could cause heading level failures. So here’s an example of that. If I have added to my page a heading level three, and then I insert my form right below that, and I have put section fields inside my form, now I have heading threes that actually probably should be heading fours, because they need to be nested under that heading three.

Or, another example is, If I have section fields on my page, and I insert the form, and it’s the only thing on the page, and there’s a heading level one for the page title, I choose not to show the form title, because I’m like, oh, this is internally use only, I don’t need to show that, then it’s going to skip from a heading level one to the heading three in my section.

So you really need to be thoughtful about when you choose to show or hide the form title, and [00:03:00] when you choose to show or hide the section fields, or you might need to, you could, there are filters where you could change the heading level of the section fields, or maybe use the HTML blocks to add headings if you want in that way.

Um, there’s a really handy free browser extension called the Headings Map extension that you can use to test heading levels on your page and make sure they make sense semantically.

So that kind of takes me to, in general, there’s a lot of things that even if gravity forms and you’ve done a great job building your gravity form, if you haven’t done, if your theme or other plugins on your website are not doing a great job, It can override all the work that you’ve done with your Gravity Forms.

So you really need to test your whole website for accessibility. Um, and if you haven’t done that, that’s something that I recommend doing now. Forms are obviously just a part of an accessible website. If your navigation doesn’t work, um, And [00:04:00] people aren’t even going to be able to find your form, right?

They won’t know how to get to the contact page or the donate page. Um, so your content theme and plugins needs to be accessible. My company makes a plugin for WordPress websites called accessibility checker. It’s. There’s a completely free version you can get off of WordPress. org that doesn’t limit you in the number of pages or posts that you can check and it will scan for problems, so you might want to check that out.

Um, again, I’m Amber Hines. I’m the founder and CEO of Equalize Digital. You can find me on Twitter at heyamberhines or on LinkedIn. And if you are interested in learning more, I also run the official WordPress Accessibility Meetup. Which meets twice a month and has tons of great content. And you can find that at equalizedigital.

com slash meetup.