in Accessibility, Rails, Ruby

Automated accessibility tests in Ruby on Rails

A couple of days ago I released RAAKT – The Ruby Accessibility Analysis Kit gem (I know, it really needs a better name). RAAKT is a gem that can be used independently of Rails and my plan was to make a Rails plugin that would add a custom assert method that did the check. It turns out that it only takes five lines of code so there is no need for a plugin. So let’s see how you can integrate accessibility checks into your current Rails application.

Install the RAAKT gem

This is a simple step. If you have installed rubygems all you need to do is gem install raakt. This will install the latest version of RAAKT (currently 0.3).

Add the custom assertion

Open the file test_helper.rb in the test folder in your Rails application. Add the following method to the class Test::Unit::TestCase:

[source:ruby]
def assert_basic_accessibility
rt = Raakt::Test.new(@response.body)
result = rt.all
assert result.length == 0, result.collect { |msg| “n” + msg.text + “n” }
end
[/source]

Make sure the raakt module is required by adding “require ‘raakt'” in the top of the file. No we can use assert_basic_accessibility in our functional tests (where view output is available).

Test your views

By adding assert_basic_accessibility to all functional tests that render a complete HTML document you can make sure you don’t create any of the fundamental accessibility errors that plague many applications.

Currently the RAAKT module will do the following tests on your markup:

  1. check_document_structure: Verify that headings are correctly structured (h1 -> h2 etc)
  2. check_tables: Verify that all tables have headers (th elements).
  3. check_for_formatting_elements: Make sure no font, b, i, blink or marquee elements have been used.
  4. check_has_heading: Verify that the document has at least one h1 heading.
  5. check_form: Verifies that all form input fields (except hidden fields) have a corresponding label element.
  6. check_link_text: Verifies that all link elements are unambiguous (two links with different targets should not have the same link text. Yes, that means all your “Edit” links). Use the title attribute to separate links.
  7. check_title: Verify that a non-empty title element is available.
  8. check_frames: If frames are used, verify that each frame has a descriptive title attribute.
  9. check_images: Verify that all images have an alt attribute.
  10. check_refresh: Make sure that no client-side meta refresh is present.
  11. check_for_nested_tables: Verify that no nested tables are present.
  12. check_for_language_info: Make sure the html element has a lang attribute indicating what language your document is in.

Sometime soon I will create documentation on each of the errors that you may recieve and what you can do to correct them. Suggestions and feedback are always welcome on the RAAKT project page.

  1. Ok, WordPress won’t allow me to write a backslash character. The “n” in the assertion method should be preceded by a backslash to insert newlines between the error messages.

  2. Interesting stuff! We will use this in our current project. Too bad all my pages fail the check currently:-)

Comments are closed.