Websites are rarely ever a static thing; You can add new content, move articles around and create new pages to meet your needs. Recently, some of our longer term partners have become more interested in making their websites accessible, catering for the needs of their audience.
The Institute of Mental Health (IMH) is a partnership between Nottinghamshire Healthcare NHS Foundation Trust and the University of Nottingham, leading research into mental health in the UK designed to improve diagnosis, treatment, and care.
We built the Institute’s original website over 15 years ago, and we’ve since worked together to redesign their website to reflect their current needs and identity.
When the IMH came to us again last year, they were looking to make their site fully accessible, in line with the <accessibility regulations for Public Sector organisations> introduced in late 2018 and the <Web Content Accessibility Guidelines (WCAG)>. After a full-site accessibility audit, the list of proposed changes were arranged into the groups described below.
Colour Contrast & Font Size
One of the more noticeable accessibility issues on the IMH website was the body text, which was quite small and had low colour contrast - to improve contrast:
- Light-ish grey text has been darkened
- The small font has been increased in size
- Background colours can stay the same thanks to our other changes
The IMH site featured a light blue colour on the previous version of the website that represented a big part of the site identity. In most cases this was only accessible when using large, bold text. We found sections that already used large text in order to use the blue for text, backgrounds, underlines or borders. Where we had regular or lighter text, it was replaced with a darker teal for better colour contrast.
Structural and Software Improvements
We also had to build the site to work with visitors who use screen-readers or navigate the site with a keyboard.
Some key features include:
- The ability to jump straight to the page content
- Skipping over sub-menu items when navigating large menus (Much faster!)
- Opening these sub-menus when they want to see the items inside
- Descriptive links - its text should describe where it goes
- Using appropriate heading levels - bigger text is more important, but should be less frequent
Some software upgrades we’ve mode to improve accessibility across the board:
- Upgraded Content Management System
- A new and improved accordion (open-and-close) menu
- A smarter dropdown mobile menu - hidden stuff is also hidden for screen-readers
Alt Text
Alternative text is an image attribute that describes the contents of an image. This allows people with visual impairments to understand the contents of an image. This is something that both developer and administrator can add.
For larger sites, making sure all images have alt text is a potentially lengthy but very important process; Our newly upgraded Content Management System means that every image can have alt text added. Any old software that didn’t allow this has been replaced, in some cases with our own custom software.
The Result
The experience of using the IMH website has been greatly improved, with increased colour contrast and font sizes to make the site more readable - one bonus of making accessibility improvements is that it makes the experience better for everyone, whether or not they have any impairments.
Structural changes and content tweaks like adding alt text and descriptive links mean the site caters to more visitors than ever, making the process of navigating smoother and more robust.
Need a hand?
If you’re looking for help making your website more accessible, then get in touch and lets have a chat about how we can help! Ring us on 0115 914 5839 or drop us an email at