Friday, September 14, 2007

Wicket and accessibility

It's a requirement that our site be accessible. As a result, I've learned some things I'd like to share.

IBM has a useful developer checklist you can follow to make your site accessible.

Wicket already has the features necessary to make your site accessible. Here are some tips on how to use them.


To make an image accessible, you must supply the "alt" attribute. If you have a static image, this is trivial (<img src="images/logo.png" alt="My Company Logo"/>), but more often than not the image is determined dynamically. Here's the simplest way:

Image titleImg = new Image("titleimg"));
titleImg.add(new SimpleAttributeModifier("alt", getString("title")));


<img wicket:id="titleimg" src="title.gif" />

This code illustrates the following:

  • Fills in both the src and the alt attributes of the img tag

  • The alt attribute is filled in with a localized string

  • The image is assumed to live in the same directory (package) as the enclosing class (see my earlier post)

It would be nice if the Wicket Image class had a convenience method to add the alt text, since it is so important.

What if you want all your images in a centralized images directory? (This doesn't apply to the topic of this post but I'm including it anyway.)

Image titleImg = new Image("titleimg", new ResourceReference(
ImageAnchor.class, "title.gif"));

The ResourceReference is used to get an image from a centralized images directory. All you need to do this is to create an empty class called in that directory.

What if your image is in a reusable component, where the image is different for each page that includes that component? The technique must be modified as follows:

Image titleImg = new Image("titleimg", new ResourceReference(
ImageAnchor.class, this.getWebPage().getString("titleimage")));

In other words, we are obtaining the image file name from the properties file of the web page in which that component is used. Purists might say you should not use properties files for non-string resources, because it can be confusing to translators if, but I think it's OK.

The difficulty of the above code is that the web page object is not yet available while the component hierarchy is being constructed, and you'll get ugly exceptions. The solution is to put the code in onAttach():

private final Image titleImg;
public MyComponent(String id)
// Construct the image using a placeholder gif
add(titleImg = new Image("titleimg", new ResourceReference(
ImageAnchor.class, "title.gif")));
protected void onAttach()
titleImg.setImageResourceReference(new ResourceReference(
ImageAnchor.class, this.getWebPage().getString(


Typically form fields have an identifying label next to them. The easiest way to create such a label with Wicket is to put a span tag in the html and fill it with a Label object in the java code. However, this is not considered accessible. To make a form accessible, you must use the tag specially provided for this purpose, namely the label tag:

Index.html (without Wicket)

<label for="namefield">Name:</label>

<input id="namefield" />

The label that applies to the input field must be a label tag, with a "for" attribute that corresponds to the "id" attribute of the input tag. Fortunately, Wicket makes it easy to fill in both attributes.

Index.html (using Wicket)

<label wicket:id="fieldlabel">Name:</label>

<input type="text" wicket:id="formfield" />

FormComponent fc = new TextField("formfield");
fc.setLabel(new ResourceModel("namelabel"));
add(new SimpleFormComponentLabel("fieldlabel", fc);

The SimpleFormComponentLabel associates the label tag with its form field.


Al said...

If you want internationalised text, there's a nicer way to do the alt text on your image.

Instead of adding a SimpleAttributeModifier, just go:
<img wicket:id="foo" wicket:message="alt:resourceKey"/>

Julian Sinai said...

Thanks, I didn't know that.

Chris Merrill said...

Thanks to both Julian and Al...I learned two new things about Wicket today!

Alan Christian said...

What about Radio accessibility?