A quick tour of the main CELA website and its support for accessibility

Top of the CELA home page

This blog post is a quick tour of the CELA website, for which I’m the web developer, looking at it from an accessibility point of view. CELA proves Canada’s national digital library for print disabled users (see Introducing CELA). The main website is available in English and French:

Public access to the CELA library is constructed across a number of subsites. Some deal with patron registration, others with specific-use on-line forms, and of course our main website, which is shown in the image above.

The picture shows the top part of our website home page. I didn’t zoom in for this picture it’s a full screen shot from my laptop. Yes we really do make it that big. If you want it smaller, then use control minus on your web browser. The size is a compromise between the needs of low vision users who want large readable pages by default, and something usable by more sighted users. It’s a good example of how our user base influences our design choices. If you think it’s an odd compromise, then you need to know that some of our low vision users find the font still too small.

Looking in detail, the picture shows the page header with it’s accessibility menu at the top of the page providing basic text resizing and an alternative yellow on back colour scheme. Below the accessibility menu is the CELA site branding with the service name. We make visible skip-to-content for the benefit of low vision users using screen magnifiers.

Then comes the sign in/out and registration menu, and the helpline phone number. The phone number is important as many of our patrons will struggle to get much further into the site than the home page, and use our call centre for service requests. If you are familiar with HTML 5 (we’re an HTML 5 house) then you will be disappointed to discover that the phone number is not discoverable using the HTML5 <a> tag:

<a href="tel:+1-855-655-2273">+1-855-655-2273</a>

The problem with enabling that functionality is that browsers have a nasty habit of pushing patrons to install phone calling software that is not accessible, particularly on PCs.

Then comes the main menu which includes our language switch; CELA is a fully bi-lingual service. Bi-lingual to the point of being able to switch language in the middle of filling in forms without losing data. This was a requirement from one of the provinces. That means our content authors spend a lot of time ensuring the language tags are correct (listening to a screen-reader read foreign language text without language tags is hilarious but unhelpful).

Now on to the next line, and we get to the meat of the service: search. We provide both a simple keyword search for content (not site), and an advanced search based on stored user preferences. A detailed set of filters are provided on the search results. By default it is the simple search as shown in the image above.

We also encourage discovery via genre, the same category or genres used by our automatic profiling system, Simple, advanced, and browse by category option are shown on the one search line of the picture. Discovery is important for accessibility reasons, in addition to being generally helpful. CELA’s patrons are spread geographically around Canada, sometimes quite far from their local public library, and given that our patrons may well have mobility issues, our site has to try and proceed the same form of help and guidance patrons receive in person,and our discovery pages are part of that. Discovery / browse by category is also important in reducing the degree of navigation needed to find an item in the catalogue. With the best will in the world, screen-reader access to complex search pages is tedious to navigate, browse by category significantly reduces the amount of content to navigate when the patron reaches the search results.

Finally, we see the tip of two content panels, or widgets in our terminology on the home page. Let’s see a bigger slice of the page.

Screenshot of the CELA home page showing body of page
CELA home page showing body of page

The image above is a slightly longer slice of the home page to illustrate the format of the main body of the page. What I’m drawing your attention to is the two column layout broken down into individual panels or widgets. Not shown at the bottom of the page is a footer menu identical in style to the main menu.

It’s a busy page. The reason for this layout is usability for users with low vision. That may sound counter-intuitive. Again, we have a broad range of patron technical capabilities. A sizeable number of those who use screen-readers to visit our site are not experts at using them. We have some who only really know how to get to specific content by knowing how many times to press tab and down arrow. A large magazine format for the home page means that pertinent information can be read in one pass without navigating around the site. And to make that work, we spend a great deal of effort in optimizing the page format for screen-readers to ensure that the page reads well, and that the two columns do not cause confusion.

The two-column format is not ideal for accessibility as it makes users of screen magnifiers have to scroll back and forth around the page. However, we do ensure that no panel wraps between columns, so that patrons never neand to scroll up to continue reading block of text.

We also design for cognitive load in other ways.

Screenshot of Browse by category on CELA
Browse by category on CELA

One of the ways we handle cognitive load is, as described earlier, through qa browse by category feature which we offer as an alternative to the more complex advanced search. A fragment of the current browse by category page is shown above. Again we use two columns, this time one for fiction, and one for non-fiction. Within each of these we have a simple two level tree. The tree does not collapse; we show all entrie; this is not ideal as there is potentially a large two or three level  tree to display and the design is likely to be revisited soon.

A previous version from CNIB’s own digital library was collapsible, which was our preferred solution,  but there were issues over how well screen readers handled expanding and collapsing. However, this was several versions of our supported screen-reader software ago, and we plan new tests. This will be the subject of a future blog post.

Whichever version of search is used, patrons will be served up a set of search results, as shown below.

Screenshot of example CELA search results
Example CELA search results
This picture shows the search results from choosing the Science Fiction category. The search results are on the left of the image, the filters and options are in the second column on the right.

Patrons can print the result or email themselves the results to consider offline. There are also a selection of filters shown, for example to choose media format. Many of our books are in multiple formats. The example in the picture is a book called Crosstalk that is shown as available for use on DAISY players and apps, and as a DAISY zip file for download to a PC or mobile phone. There are apps available for the iPhone that will automatically pick up and play DAISY ZIP files when you download them.

CELA supports many formats, and only the six most popular formats are shown in the picture.

From an accessibility perspective, this is another very busy page. What I would like to see would be search results combined for formats so that the details for Crosstalk would show only once but this is not currently possible with the platform the library system is built on. It’s a platform call VSmart and it is a bought-in integrated library system that has been customized to our needs. The profiling system that automatically selects books based on patron preferences resides within VSmart, and that is also the jumping off-point for our DAISY CD burning on demand service. The actual burning software runs on a separate server, burning copies of books delivered by VSmart.

It will also be the jumping off point when we go to braille print-on-demand. We currently serve electronic braille online and physical braille as a regular library circulation item. The goal is to replace the circulation with print on demand. This will reduce the wait patrons experience for popular books and improve quality – no more damaged volumes arriving at your home (braille only has a life-expectancy of perhaps 6 or 7 reads before the dots are smoothed out).

If and when this change to braille on demand will happen is still open, but it will improve accessibility when it does: the delays in the braille format will be ironed out and receiving braille will be as fast as audio CD. Actually, this is one of those areas of accessibility that perhaps doesn’t get the attention it deserves: alternative formats should not mean significant differences in timely delivery of content.

There is much more that I could talk about on the main site (and this is just the main CELA site) but hopefully it gives you a feeling for focus of the site, and an idea of some of the accessibility issues it has to resolve. Future posts will discuss sections of the main site, and the registration sites in detail.

Leave a Reply

Your email address will not be published. Required fields are marked *
http://accessiblecoder.ca/2016/11/18/a-quick-tour-of-the-cela-website-and-its-support-for-accessibility/
accessiblecoder.ca
crawl=CC-MAIN-2019-39
37274
application/http; msgtype=response
sha1:HZASF2UZZOKRWD54Z7Z3LUCUKOG22SMV
<urn:uuid:e56f9dbe-619c-4300-925d-6403149958bb>
2019-09-16T10:48:46Z
67.212.91.252
text/html
sha1:YN3PHCB2LIBZOUGWKQTGBIXBMO4TKEXD
<urn:uuid:6758a7ab-9156-4771-a0f8-ca7e30899d1f>
http://accessiblecoder.ca/2016/11/18/a-quick-tour-of-the-cela-website-and-its-support-for-accessibility/
response
<urn:uuid:4fd43c90-3be7-403d-ba73-e8b6ec2e14c6>
isPartOf: CC-MAIN-2019-39
publisher: Common Crawl
description: Wide crawl of the web for September 2019
operator: Common Crawl Admin (info@commoncrawl.org)
hostname: ip-10-67-67-8.ec2.internal
software: Apache Nutch 1.15 (modified, https://github.com/commoncrawl/nutch/)
robots: checked via crawler-commons 1.1-SNAPSHOT (https://github.com/crawler-commons/crawler-commons)
format: WARC File Format 1.1
conformsTo: http://iipc.github.io/warc-specifications/specifications/warc-format/warc-1.1/