WAIAble 1.0.0 released! Now you can make your Rails forms accessible.

Well, this is the blog to let all of you know that WAIAble 1.0.0 was released on Thursday, July 2 2015. We, at Techvision, are all happy about it. Yes just happy and still not excited as we want to ensure we can get more Accessibility enhancements to your Rails applications. This blog starts with a small introduction on how it all started, then briefing about features we have in WAIAble 1.0.0 and finally a vote of thanks to all those who have contributed.

Introduction

We started web development using ruby on rails (ROR) in December 2012. After doing some web projects, we felt the need to have web accessibility in rails applications. We started to explore Rails core to look for areas where Accessibility could be integrated alongside Rails Views. At ground level, there were 2 ways to address this:

  1. Have a gem that automates Accessibility Testing and then allows to write accessibility test cases. We discussed in one of very early blogs on”Marveling RSpec with Accessibility Expectations“.
  2. Build a library of components and widgets that provide for an eventually Accessible UI.

The prior sounded great from technical perspective. Just like rspec and minitest, we would have SpecAcce. But this called for developers needing to know about Accessibility. So we kept our focus on the latter and spoke about our idea at RailsConf Chicago in April 2014. The talk titled “Empowering Rich Internet Applications (RIAs) with Accessibility” got quite a good amount of feedback. Inspired by the feedback we got, we decided to release a gem that addresses accessibility in Rails. First we tried to make accessible widgets. Taking this idea further we narrowed down our scope to the very basic components and thought of addressing Accessibility in the forms generated using form_for API of Rails. We needed to know how to build gems for Rails Views to be able to make Rails Forms accessible using WAIAble. And once that was in our knowledge kitty, we came up with WAIAble.

How did we get the name?

The World Wide Web Consortium (W3C) has been working on numerous guidelines and drafts on Web Accessibility via their Web Accessibility Initiative (WAI). The accessibility guidelines called Web Content Accessibility Guidelines (WCAG) and Accessible Rich Internet Applications (ARIA) are continuously updated by working groups under the Web Accessibility Initiative. Now that you know what WAI is, you have already figured out where WAIAble (pronounced “viable”) got its name.

Features of WAIAble gem

WAIAble gem will add different accessibility features to make rails form accessible for screen reader users and keyboard users. Visually this will not remove or change any existing functionalities provided by rails core and will include aria-properties for form fields to enhance screen reader performance. Following are the features of WAIABLE gem:

  1. Rails already takes care of one to one form labeling between form label and form control via the ‘for’ attribute on label element. For accessible form labeling, default ID attribute added to label element When there is one-to-many or many-to-one relationship (e.g. radio button), aria-labelledby property added as html options. To know more visit our previous blogs on accessible form labeling. (Links of accessible form labeling part 1 and accessible form labelling part
  2. Accessible mandatory field : For mandatory form fields, aria-required property has been added. When developer makes form field mandatory by making presence validator true, aria-required = true gets added for that field. Below is an example of making name field mandatory:
    
    class Form< ActiveRecord::Base
    
    validates :name, presence: true
    
    end
    
    
  3. For text field and text area, if maxlength property is added then WAIAble gem will add aria-describedby property which will announce the size limitation for that field to the screen reader.
  4. Accessible error messages: After submitting form, if there is any error then WAIAble gem will make these error messages linkable. When clicked on the link, focus will shift to the erroneous field for which the error message gets generated. Additionally when the focus is on the erroneous input field screen reader will read out the error message again. This has been accomplished by adding error message id to the aria-describedby property. This way screen reader users can easily navigate to the erroneous field and will not have to remember the error message as it will be announced by the screen reader when the field is on focus.
  5. For form search field, aria-label property has been added to add a label for screen reader. This will provide information about the search field to the screen reader users.

Installing WAIAble

To add WAIAble gem to your rails application, add it to your gem file:


Gem ‘waiable’

Run the following command to install it:


Bundle install

Not possible without community contributions

We would like to thank Josh Software team and Pune ruby community for providing us support and technical guidance in WAIAble gem development.

Use this gem to make rails form accessible and please let us know if there is any feedback/issue regarding WAIAble gem.

Github: https://www.github.com/techvision/waiable

What’s lined-up next?

We are primarily going to target the following 2 areas in our next release of WAIAble.

  • Accessibility in error pages.
  • Accessibility with ajax enabled links with :remote => true passed to link_to method.

So keep an eye out for our tweets and blogs

Advertisements
Posted in Accessibility, Gems, Ruby Gems

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: