frevvo 6 – Creating Accessible Forms

Accessibility-cartoonThis article discusses features added to frevvo 6 that enable creation of accessible forms and workflows.

What does accessibility mean?

Accessibility is the ability for users with visual and/or motor impairments to interact with an application. More and more organizations require this and it is a must for any public facing application. Most importantly, it’s just the right thing to do.

For those with visual impairments, applications need to verbally communicate the content being displayed. At a high level this can be broken down into 2 requirements. First is providing a way for visually impaired users to quickly discover the general structure of what is displayed and navigate. In the web space, pages must be constructed in a manner that enables assistive technologies to present this overview and allow users to drill into areas as needed. Second is providing the right auditory cues when users interact with an application so they can grasp context (where they are) and how their actions have altered what is displayed. For example, if a user has changed a form field value to something invalid, visual cues are insufficient.

Accessibility is also about serving people with motor skill issues. For applications used on a laptop or desktop, this requirement distills down to supporting keyboard only interactions. These keyboard interactions should be standard and intuitive or clearly described if a more complex interaction is necessary.

Implementing Accessible Web Applications

Implementing accessible web applications typically requires pages to comply with Web Content Accessibility Guidelines (WCAG). Document structure is key because screen readers like JAWS or Apple’s VoiceOver will rely on the markup to announce content as well as navigate. Javascript behaviors are needed to support standard keyboard shortcuts (e.g. pressing space to click a button that has focus) or announcing content changes triggered by a user action (like flagging an email field when an invalid address is entered). WCAG is large with multiple levels of compliance and various solutions. If you are using a custom application (or planning to build one) for your forms and workflows, your developers may have A LOT of extra work to make the interfaces accessible. With frevvo 6, that burden is removed.

Creating Accessible Forms with frevvo

The first order of business is to open the form or flow in the frevvo designer and check off the Accessible property:

Screen Shot 2015-03-06 at 4.39.41 PM

Some existing user interface behaviors in frevvo needed to change to support accessibility. One example is the signature control. Accessible forms must not require mouse interaction so a signature control now includes a way for users to type their name in addition to writing with a trackpad, stylus or mouse. Rather than just globally change the signature control to include the typing option, we wanted to protect existing behavior and allow designers to explicitly enable accessibility.

Checking off the accessible property will accomplish most of the heavy lifting needed to make your forms accessible however the designer still must play a role in creating a fully accessible form. For example, WCAG requires images and videos to have an alternate text description that can be read to users with visual impairments. In frevvo, these controls have an Alt Text property that the designer can use for this purpose. Another example is specifying values for a table’s summary property and a link’s title property. Using the existing hint and help properties can also go a long way to making your form accessible.  Forms with lots of nested controls (like a table within a section within a tab) while WCAG compliant will create a more challenging experience for impaired users. Keep things simple and consider using workflows to break up one very large form into multiple steps. These are just some examples of what form designers must consider.

Testing

There are lots of tools for inspecting html and producing suggestions on what your markup should look like. But the only way to truly test is to get comfortable with assistive technology, close your eyes and test out your forms. frevvo forms were beta tested by users with visual impairments and their input was invaluable. It is very important that you test your forms for accessibility especially since the form designer must play a role.

Conclusion

Accessibility is a key requirement for modern web applications that is sometimes overlooked and can be difficult for organizations to achieve. With frevvo 6, forms and workflows can be designed to satisfy this important requirement.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: