One of the major concerns for universities such as the School of Oriental and African Studies (SOAS), is the accessibility of their web site. There are legal, moral and business reasons for making sure sites follow the DDA guidelines as closely as possible. SOAS’s team realised this and as such made it one of the main priorities when we moved their NetCommunity site to a new design and structure.

You can find out more about our unique accessibility tool.

Setting the Scene

SOAS LogoThe new SOAS designs were provided by the central SOAS web team to be applied universally to all School sites. This implied that even though the Alumni site was running on NetCommunity hosted by the supplier Blackbaud, it still needed to follow the new design. There are other areas we could discuss at this point such as how we worked together to restructure the site or how we managed to adapt NetCommunity to work with the new designs. However the subject of this case study is accessibility and as such we will concentrate on this.

The new design, as most modern designs do these days, separates the layout the page from the content. By this we mean that given correctly structured content the designs will interpret them automatically to lay them out correctly on the screen. The SOAS alumni team were no longer required to worry about how their content would appear on the proviso that they structure it correctly.

This is not to say that the team cannot source interesting pictures or add columns to their content should they wish. It is more that they do not need to say how much space should appear around a picture or what colour to make the titles – these layout decisions were made by the website designers.

How we worked

Taking the original site content and our new site structure each page was moved across to a fresh site still on the same NetCommunity platform. The content had all mark-up; fonts, images, headings, etc. removed and then a fresh structure and images put back in place.

During this content move we made sure:

  • All images were provided with alternative text to describe their content
  • All headings started at level 1 for the page name and then moved down levels h2, h3 as appropriate. Thus the page had a heading structure through which you can navigate its content.
  • No font colours, tables or empty paragraphs were added – these are all ways of laying out the page which, as we have said before, is not our responsibility.
  • We used bold and italics to emphasis particular text if needed and DIVs to provide two column layouts.
  • Site Navigation was made possible through nested lists that degrade gracefully should the user not have JavaScript enabled (unlike the standard NetCommunity navigation)
  • etc. etc.

There were more steps but all of them were accomplished without using any customisations beyond those available in the core NetCommunity product itself.

Maintenance and our unique tool

Accessibility Checker ScreenshotObserving all the various rules for content when editing pages or adding new ones is, as I am sure you can appreciate, difficult. Even experienced web designers sometimes forget a tick box here or a comment there. This is where our unique tool comes to the fore.

We have developed a tool which sits on top of your site pages when you are logged in as a site administrator. You can click on it’s ‘quick check’ button at any time and it will go through the currently displayed page and identify common accessibility issues. It also warns you of other issues, for instance images that are larger than they need be and recommends resizing them.

There are other accessibility checkers available as I am sure you are aware but none to our knowledge allow you to check the currently displayed page. Given that your website designers have hopefully ensured the actual site structure is compliant, your checking the content itself will ensure the entire page is compliant.

The tool has proven invaluable in the development of this site and its subsequent maintenance.