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
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:
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.
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.
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.