The newly completed Cockburn ARC site is the perfect example of great accessibility, great usability and seamless technical integration.

Website / Government

Case Study

The newly completed Cockburn ARC site is the perfect example of great accessibility, great usability and seamless technical integration.

Have a look at the site for yourself, you can use your keyboard to navigate everywhere (we mean everywhere), on menus, tabs, and concertinas. The colours are great, even if you're colour blind or have poor vision and if you have full loss of vision everything still makes perfect sense. Try and crank up the zoom, you will see that the site is still usable and accessible.

The contact details even have directions for getting to Cockburn ARC by bus, train or car. You don’t want to get there to find that there’s no available spots left in your fitness class so we included a site-wide online booking system that is so well designed you don’t realise you’re being taken to an external site.

You don't find this level of integration and design often, especially on a AA site. Actually, we dare you to find a better looking AA compliant site.

Cloud 1 Cloud 2 Cloud 3 Cloud 4 Ladder

The Challenge

Building a site like Cockburn ARC was unchartered territory. The level of integration we achieved had never been done before but we eagerly accepted the challenge.

Traditional web design is aimed at the masses whereas an accessible component will often have to be created so that some mainstream users are disadvantaged.

We automatically assume that site users able bodied, with great eyesight and hearing. So you would expect that things like using a mouse would be easy right? Not always. When we are designing sites for disabled users we often have to reduce the style and features of a site. This results in accessible sites being generally (much) less pleasing than sites for a mainstream audience because interactive elements are highly simplified.

Cockburn ARC was going to be different. Achieving the level of integration and accessibility compliance that they wanted is not something that anyone had ever achieved before. We knew that we were in new territory but accepted the challenge and got to work.

The Solution

For the developers at Alyka this project was a labour of love. From the outset, we labeled the task as 'Accessibility is in the DNA' which ensured that accessibility was thought of in all elements.

The UX stage considered all elements and how they are perceived and interacted with. We asked ourselves, can a blind user interact with the navigation? Can a deaf user interact with videos? Will the sliders make sense to a user who has poor vision and can only use a keyboard? We painstakingly prototyped each element and considered all users. We expanded text elements, reduced the amount of distance between labels and data.

The visual designer made poetry out of colour, combining them so that each match meets a contrast ratio is hard work. Each item has a 'focus state' to make sure that the user is aware of the current position on the screen, and when you scan the page it's all in balance.

Some bigger challenges arose with the booking system, timetables and lane/class availability grids. The data was coming from an external system and difficult to render in the correct format. Our 'front end' developers (the gurus of HTML and CSS) worked with the technical developers (the gurus of code and databases) to exchange the correct data structure. They created pages that conformed to the strict design requirements, creating the perfect connection between editor controlled content and system controlled content to ultimately achieve a seamless integration solution (see, technology doesn't have to drive design!).
 

View Website Here

Cockburn ARC Cockburn ARC
Rocket Icon

The Results

The new Cockburn ARC site was independently audited for AA compliance by the Digital Accessibility Centre (DAC).

The DAC have a panel of users who each test the site for specific issues. Some will test the site to make sure that each label makes sense, even when the context is unknown (like trying to work out what 'click here' is going to do when you don't know what it refers to!). They also test for keyboard compliance, visual contrast, text size, interaction, dyslexia, and a suite of other issues to make sure that all users are able to comfortably use the site and it got the tick with very little rework required!

Internally, at Alyka the best result is that you wouldn't know the site is accessible unless, you needed it to be accessible.