Tools Used

Intro

Use Case

Accessibility is an important consideration when building your website. Gravity Forms 2.5 is coming soon with major improvements to accessibility. GravityView does a great job of building layouts that will work for most people, and then they make it flexible so that you can customize it to meet your specific needs. This post covers a couple of tips to enhance the accessibility of your View if your needs differ from the standard layouts.

Tips

Specify the Label Heading Levels

Proper layout of heading levels is important for a visually impaired user to scan your site quickly for the information they need using a screen reader. GravityView makes this easy with their default layouts, but if your needs differ from the default layout, here is a quick tip.

In a Listing View, the Listing Title is H3, the Subheading is H4 and the Other Fields are paragraph text.

In Table View, the column labels are bold paragraph text.

If you need to change the levels of your headings, that is easy to do with a custom label:

1. Click the Gear Icon of the field that you want to modify.
2. Check “Show Label”
3. In the Custom Label box, enter your label surrounded by the appropriate HTML tags:
   1. <h1>…</h1>
   2. <h2>…</h2>
   3. <h3>…</h3>
   4. <h4>…</h4>
   5. <h5>…</h5>
   6. <h6>…</h6>

You also have the option to name a Custom CSS Class in the next box. By naming your own Custom CSS Class you can modify the way that the field appears, regardless of what the heading settings are.

Finally, note that the DIY Layout available with the GravityView All Access License allows you to customize every aspect of your View, including a custom label, HTML before and after the output, changing the container tag, and identifying a custom CSS class.

Add an Alt Tag to Your Images

Alt tags help screen readers know what they are looking at. If you are displaying images directly from your form entries, you don’t have an option to add an alt tag through the Media Library.

Instead, add an additional question to your form that asks for the alt tag. You can ask your visitors to fill this in, or you can hide the field and fill it in yourself after the entry has been submitted. (Or you can get fancy with Gravity Perks Copy Cat to automate the completion of the field.)

To attach the alt tag to the image in your View, use a Custom Content field and enter HTML in this format: <img src=”{File Upload field:1}” alt=”{Alt field:2:esc_html}”>.

Wrap Up

In this post we looked at how to enhance your GravityView display by specifying the heading levels of your labels and adding alt tags to your images. 

What other accessibility enhancements do you need to perfect your Views?