Building an accessible online collection for Sarjeant Gallery

Paul Rowe
Paul Rowe
Nov 15, 2017 · 7 min read

The online collection site for Sarjeant Gallery Te Whare o Rehua Whanganui has been up and running for a month. In my previous post I described the work we’ve done to allow visitors to explore the collection by colour, image orientation, artist, object type, and automated subject tags (using Google Vision API). In this post I’ll cover the ways in which we’ve thought about the accessibility of the site. Specifically, what we did put in place to make the site accessible to the most people on the widest range of devices.

Making the whole collection available

For the first time, almost the entire collection of Sarjeant Gallery is available online. No collection catalogue is perfect (perfection is the enemy of done) and the decision was made early in the project to publish all of the records for Sarjeant Gallery’s collection.

This is a huge achievement for a regional gallery with a small staff. Sarjeant Gallery do not have an in-house technical team. The Gallery has focused on copyright clearance and some minor data cleanup, and Vernon Systems worked on the technical implementation. We were able to get a basic prototype of the site running in the first month of the project and then refine the fields and formatting of the data published through many iterations over the next three months.

Publishing the entire collection has many advantages. There are more artworks for the software to connect, with these connections encouraging exploration and serendipitous discovery by the visitors. Google Analytics can be used to gain a broader picture of the areas of the collection the visitors are looking at. The volume of online visitors grows as the volume of pages on the site grows. While there is a risk to publishing information which is incomplete or incorrect, having more eyes on the data provides an opportunity to improve the collection catalogue.

We’ve been able to use the full catalogue to give a sense of scale within the site. Everywhere where we display categories, including on the home page, we display a live count of how many works fall into each category.

The object type tag cloud on the home page gives a count of how many works fall into each category

Natural language and readability

Like most internal catalogues, the source data can appear dry and formal. For Sarjeant Gallery a small number of artwork records already had more detailed curatorial descriptions, but for most records there were only the basic keyword (object type, production place, record type etc) and text (medium, measurements etc) fields. It wasn’t feasible to add more descriptive text to large numbers of records with the resources available, although this is a task for the longer term, so we had to explore ways to make the best use of the existing data.

Generated sentence text on the artwork page helps to describe the work and link to other works.

We were inspired by the Cooper Hewitt online collection site’s use of natural language. We’ve combined the object type, production place and production date data into a sentence on the page for each artwork. By doing an automated search on the object type, we’re able to display a count of the related artworks of the same type. This continues our goal to give the user a sense of the scale of the collection. Object type and production place both appear as links so that the visitor can easily jump to all of the works in the same category.

Making clearer the connection to related works.

We do the same for record type and related works to make it clearer what the record represents, and to surface the links already in the data to related collection records. To do this we’ve hard-coded the sentence version of each record type. e.g. ‘archive series’ became ‘an archive series’, ‘page from a book’ became ‘a page from book’.

There was one other quick win. The Gallery wanted to provide nationality as an option for exploring the collection. Most of the artist records noted the person’s place of birth. After reviewing the data we found that there for only 40 unique countries represented, so we were able to easily fill in the correct nationality text for each of the possible countries. e.g. The nationality of someone from Wales now appears as Welsh on the site.

Accessibility compliance

We wanted the site to comply with accessibility standards from day one. It’s often more difficult to change the design after launch, and accessibility compliance can often be forgotten after the rush of the first phase of development.

The site has been tested for compliance with web accessibility standards to meet a WCAG 2.0 AA standard. We used the Wave browser plugin so that compliance could be checked during the development work within our internal development environment. We’ve also used WebAIM’s contrast checker to check contrast ratios for all of the key colours in the branding.

Not all of the features we prototyped survived our testing. We included a background colour on the artwork page based on the dominant colour in that artwork along the lines of the National Galleries Scotland site. However with some works it was impossible to get a contrast ratio we were happy with, and some works had an intense dominant colour that distracted from the image when used as a background to the text.

The compliance checkers helped us spot problems such as missing image alt text. We also considered the wording used throughout the site, such as on buttons and in links. We’ve used’s courses on writing for the web to improve our skills in this area.

Create once, publish everywhere

The site uses responsive templates to provide layouts for mobile, tablet and desktop screens. Through these templates we can take the same data, but display it in the most appropriate way for the device screen size. For example, on smaller screens we display smaller images sizes (this also helps with speed over slower connections) and we change the menu into a collapsed single-level list.

We use standard HTML metadata tags and Open Graph metadata tags to help search engines index the site and improve sharing on social media sites. Open Graph tags ensure that the correct image, title and description is grabbed when users share a page on social media. Social media sharing buttons are included on the artwork and artist details pages to streamline sharing.

Much of the collection is still under copyright, but images that are out of copyright are marked to allow for re-use by visitors. The site’s terms of use page had to include common legal caveats, but we have also included clear, plain language summaries of the right types on the terms of use page.

Filter by rights type.

Lastly, the website is built on top of an API to provide potential options in the future for data re-use and new interfaces. The API will be used to share the records with New Zealand’s cultural heritage aggregator — DigitalNZ.

No dead ends

The search results page provides options for filtering the results. Want to search for all the landscapes? Want to then see the most common colours for that search? We’ve got options to cover that.

One further feature than didn’t make it to the final site was a timeline to show the dominant colours by decade. We hoped this would provide an interesting visual with the popular colours slowly changing over time. In practice the most dominant colours each decade were always neutral tones and we ended up with a dull graph made up of beige and grey.

The search filters make it easy to browse on subsets of the collection. However, for the more serious researcher it’s still useful to get a complete list of the terms available in key fields on the site. With that in mind we have included an advanced search screen to display all of the options for fields such as production place, artist nationality, medium and object type.

We also believe that an online collection site shouldn’t exist in a vacuum. Many of the artists represented in the collection have pages on Wikipedia. A couple of hours work spent checking through the 100 most represented artists proved well worthwhile. Approximately one third of the artworks in the collection now connect via the artist page to further details on Wikipedia. We’ve also added links for artists with biographies in Te Ara (the encyclopedia of New Zealand) and to a handful of other online resources. Gallery staff will be adding Wikipedia pages for some of the artists which are not documented on Wikipedia and are adding links from Wikipedia back to Sarjeant Gallery’s artist pages to help people discover the website.

Once you add in the options to find related records by colour and Google Vision subject tags, it’s easy to get drawn into exploring further. So far the Google Analytics statistics look promising: > 3 minutes average session time and an average of 5 pages viewed per session.

I’ll close off with one last example. Do you need to find all of the images of facial hair in time for Movember? Sure!”facial+hair

Paul Rowe

Written by

Paul Rowe

I work with people that manage, interpret & share collections. I'm CEO of Vernon Systems. We develop Vernon CMS & eHive. I love curiosity cabinets and caves.