The Icon Tool is an interactive gallery and icon creation tool, built for the disabilities charity Scope. Users are able to browse, draw or upload their own icons, or to select pre-made icons for inclusion in the gallery. Users are also required to submit a personal story about what they want to be possible in the next few years, in terms of how life can be improved for people with disabilities. Working as Head of Development for Catch Digital I was responsible for the overall development of the project, working with a team of four full-time developers and several freelancers. The site was built in Drupal, with all pages loading via AJAX requests.

Scope Homepage

Gallery

Users are able to select from three different views in the icon gallery - a staggered view where icons scroll at different rates, a larger grid view which (better for visually impaired users), and a list view. Users are able to scroll through the gallery and select icons which are of interest. Clicking on an icon reveals the user’s story.

Icon Gallery

Icon Creation

Although I was personally responsible for the overall development of the site, the majority of my own development time was spent building the icon creation tool. This was a multi-step form built using the Drupal forms API, which collects data and stores it in a session cookie until the final step when the icon is saved in Drupal. The user initially decides whether to create their icon or enter their story first. The icon is created either by uploading an image, selecting a pre-made icon, or creating their own using the flash drawing tool.

Choose your icon

Draw an icon

The next step is to enter their story. The user can either start with several pre-defined options, or can create their own story from scratch.

Write your story

Next the user is requested to tag their icon - tags are suggested from an approved list, although the user is able to enter their own tags.

The user is then requested to login or go through the registration process. The final step is to preview their icon before submitting it to the gallery.

Submit your icon

Moderation

After an icon has been submitted, it has to go through a moderation process before entering the gallery. The Workflow and Rules modules were used to allow moderators to accept or reject icons, but to also tell a user why an icon was rejected, allowing them to correct the issues and resubmit the icon.

Icon Moderation

Integration with scope.org.uk

Possibly the most difficult aspect of the project was the integration of the Icon Tool with the main Scope.org.uk site. The Bakery module was used to provide single-sign on functionality, but this caused numerous problems which required the module to be enhanced significantly. The user profile area on the Icon Tool site was required to allow users to update their own personal information, and have that synchronised between the two sites. This was achieved using the Services module, and a custom-built profile update module installed on the two sites.

Bakery

When a user logs on to the site, the Bakery module discreetly redirects to the “master” site, then back to the “slave”. Due to the fact that every page was to load via AJAX, further problems were caused - security measures built in to browsers prevent AHAH requests from other domains, so we had to load the login form into the site using an iFrame, then adapt the bakery module so we could determine whether the user had successfully authenticated. The author of the Bakery module did not help matters by calling his functions very descriptive names, such as “Bake_Chocolate_Chip_Cookie” and “Taste_Oatmeal_Cookie”. Believe it or not, this module is used on Drupal.org! This was a very challenging aspect to the project, but worth the effort!

Accessibility

Another challenging aspect to the project was that the site was required to be accessible to AA WAI standards. Throughout my web development career, I’ve always cared about writing accessible code, but in reality I had no idea about what was involved in building a site to these accessibility standards. Firstly, we had to build three different colour schemes for the site with different contrasts, to help visually impaired users. This was a massive undertaking - essentially theming the whole site three times. We added buttons to allow the user to change the font size up two sizes, but also built the site so that the font size could be made even larger in the browser settings. Every button, link, form element had active and hover states, in all three colour schemes.

Blue Theme

Soft Theme

High Viz Theme

We also had to use ARIA labels on every form element, make everything accessible from the keyboard in the gallery, icon creation tool and moderation tool. We spent weeks testing with the JAWS screen reader to ensure everything was read out and understandable for blind people. We worked closely with a company called Shaw Trust, which tested the site for accessibility and provided feedback during the project.

Font Size

« Back

Tags: Accessibility, CSS, Drupal, HTML, MySQL, PHP, jQuery