Taking Henshaws over the FIN-ish line 🏁

Even though we’re a small creative agency in the heart of West Yorkshire, we’re big on taking on projects that will help people all across the country. Pushing our boundaries, trying out new techniques and taking on clients that bring new challenges are all things we’re passionate about here at Fishtank, so when we were approached by sight loss charity Henshaws who were looking for a new bespoke-build website alongside a brand evolution, we were ready to jump straight in.

As a charity that supports individuals who are living with sight loss as well as their families and carers, it was clear from the start that everything we did for Henshaws needed to translate the crucial support they offer in-person, across to the digital landscape and within their brand evolution. We were absolutely thrilled about the opportunities that this project presented and felt so creatively charged by Henshaws’ goals to digitally develop and make their website so much more accessible to their service users.

From the very beginning, we recognised that meeting Henshaws’ needs was a monumental task. Crafting an exceptional website that catered to all their service users’ needs, alongside a brand overhaul to propel their charity even further, was a challenge we welcomed with open arms. Our team was determined to push the boundaries of accessibility to ensure that Henshaws’ website and brand would be nothing short of perfect for the people they are dedicated to helping every single day.

From brand workshops with the team to experiencing VIAR training at Henshaws HQ, getting started with Henshaws was insightful and eye-opening for everyone in the Tank. They immediately made us feel like an extension of their family, and that made us that bit more determined to deliver on (and beyond) their brief.

We started things off in true Fishtank style; with lots and lots of research. We jumped into a social audit to see where online opportunities were and then focused on creating a tone of voice to use on Henshaws’ social media channels, website and visual identity. Our research gave us an amazing starting point which would allow us to bring all of Henshaws’ online presence together, but it wasn’t quite 100% accessible… Yet.

Everyone in our team, and we mean everyone: designers, developers, digital marketers, account managers – and even Claire! – we knew we all had a crucial part to play in taking Henshaws to the next level. With everyone eager to learn more about accessibility and how digital compliance with it – or a lack thereof – affects people with different disabilities, together with the Henshaws team we devised a strategy around service users’ feedback and internal expertise. From learning about search engine digital accessibility (did you ever actually fully realise the importance of alt. descriptions?) to exploring which design functionalities are required to make content digestible, we’ve loved every second of our minds opening and getting to discover so much more than what we knew was possible. The biggest thrill of it all was playing a part in opening doors for the visually impaired community online.

With that being said, let’s dive into all the ways our team adapted to this challenge and ensured Henshaws’ new brand and website were accessible to their amazing service users:

Best practices and inclusivity in digital marketing

As digital marketers, we have always been prevalent in the fast-paced digital world, and accessibility is no different. Search engines such as Google, Bing and Yahoo are continuously updating their algorithms and whilst we had the fundamentals of how to create a positive impact on Henshaws’ digital presence, without the specific training, management or professional integration, it didn’t mean we would achieve a perfect level of accessibility and the platform may even have additional opportunities to become more user friendly after the launch.

With that in mind, let’s dive straight into some of the ways that digital marketers can make their work more accessible…

Content 

We all recognise the value of content; it plays an invaluable role in ensuring that a client’s digital presence is accessible. There are a couple of ways we knew we could achieve accessibility-friendly content for Henshaws, so we worked hard to ensure that these fundamentals were always considered during content creation:

• Utilising plain language, that doesn’t overcomplicate the user experience – avoiding complex text like metaphors, idioms and figures of speech.
• Using easy-to-read fonts – this is probably one of the most important things to consider when planning the build of a website, as fancy fonts can be extremely difficult to read for those with sight loss. Here are some amazing accessibility-friendly fonts for you to check out.
• Button content labelling – this is essential to guide users and search engines to describe the content and CTA’s quickly and easily. 
• Alignment – most people think content is all about the words and sentences we carefully curate but actually, the way it is displayed on the page also makes an impact on its accessibility. Keep text aligned to the left where possible (or to the right for right-to-left languages like Arabic).

Media Integration

We also kept in mind that engaging users through the use of media such as audibles, e-books, videos etc. not only prolongs the user journey but also makes for an engaging digital experience that reaffirms brand purpose. Here are some best practices we put in place to ensure Henshaws’ media integration remained accessible – after all, everyone should get to enjoy alternative content:

• Alt-text –  this was probably the most important thing we had to consider when inputting media onto Henshaws’ website, as alt attributes help members of the sight loss community understand what’s on any images and videos featured on the site.
• Subtitles – this is especially useful on videos, as it allows anyone who cannot hear a video’s sound to still understand what is happening and being said throughout.
• Contrast – this may seem obvious, but you’d be shocked at how many images/videos/website designs feature contrasting colours and patterns. Keeping designs as simple as possible with an appropriate colour pallet that allows everything to be visible easily means that all of the website’s users can enjoy what is being published for them. You can check the contrast of your own website with this handy tool – you’re welcome.

We could go on forever about inclusivity and why it’s so important for websites to be accessible, but hopefully, this gives you a greater understanding of why prioritising website accessibility is crucial.

Making design accessible 

As designers, when it came to defining the areas of focus within Henshaws’ digital products, there were around 15 areas we needed to pay close attention to. Collectively, these ensured that digital products were set up or managed in a way that best performs for accessibility. We don’t want to pile too much information on you all at once, so below are the main areas that we focused on when designing Henshaws’ site:

Media

• Autoplay: ensuring media won’t play automatically and can be paused
• Markup: using appropriate markup for all media controls

Content

• Plain language: avoiding complex text like metaphors, idioms and figures of speech
• Button content: ensuring buttons and labels are all different and describe content well

Imagery

• Elements: applying alt attributes to all image elements
• Text: ensuring text is included in alt descriptions, and providing text alternatives for charts, maps and other complex imagery

Headings

• Elements: using heading elements to introduce contents, and writing them in a logical sequence
• H1: restricting H1 elements to one per page/view
• Levels: avoiding cutting out any heading levels

Appearance

• Content: checking that it displays in specialised bruising modes and that different pieces of content are in good proximity to each other
• Layout: keeping the layout simple and consistent, and not relying solely on colour to convey information
• Text: using text to prevent instructions from being audio or visual only, and increasing its size to 200% where possible or ensuring the user is able to increase the text size on their screen without hindering the layout of the website

All of the above helped us to ensure Henshaws’ website was accessible to everyone, regardless of their level of sight. Being inclusive is paramount in this day and age, as The World Health Organization estimates that 33% of the global population has a hearing or sight impairment. There are some useful guides online that dive deeper into accessibility in digital products (like this one), so why don’t you take a look?

WordPress accessibility

As Developers, we loved learning more about accessibility when we began the build for Henshaws, but we did face some challenges when it came to ensuring important elements such as navigation, carousels and accordions were all accessible.

We quickly realised that WordPress navigation isn’t as accessible as it could be, especially when you add submenus into the mix. Because of this, we custom-built the front-end code for the navigation – and while this took a little longer, it gave us more control and made it easier to add additional functionality for keyboard navigation, which resulted in a better user experience for screen reader users.

Carousels are also well known for not being all that accessible, so we have limited their use throughout the site. That said, they can still be useful, especially for content like testimonials. Some of the things we learned when building accessible carousels are:

• Displaying just one slide at a time makes it a lot easier for the user to know what position they are currently at in the carousel.
• Multiple ways to navigate the carousel are a huge help for accessibility, like pagination and next/previous arrows. It’s essential that these are correctly labelled and the selectable area for these elements is large enough to easily be clicked.
• For screen reader users it’s beneficial to re-apply focus to the newly selected slide when interacting with the carousel navigation – that way they know the content has now changed.

Accordions are another great way to condense content, and we felt they could be utilised successfully throughout the Henshaws’ site, so it was important that these were as accessible as possible. To achieve this, we made sure that each item in the accordion could be easily expanded (whether by keyboard or click interactions), ensuring it’s clearly visible to all users whether an item in the accordion is expanded or not.

We also made use of  HTML 5 markup where possible, as not only does this make the code more semantic, but naturally makes it more accessible because its role is now more defined and carries more meaning, which is super important for screen reader users.

Overall, building this website was a huge learning experience and we have gained so much knowledge – and understanding, and compassion – that we will be taking into all other website builds moving forward.

A website and brand that works for everyone

Working with this crucial, selfless charity has opened so many minds at Fishtank – in so many ways – and taught us invaluable lessons in being inclusive online. Our whole team is now much more aware of implementing accessible content even in in our social posts, as we want everyone to be able to engage with us and understand the work we’re doing. 

After almost a year of learning about all things accessibility within website building, graphic design and social media management… We’re ecstatic to have finally GONE LIVE with a website that not only looks bold and beautiful but is also accessible and enjoyable for everyone who uses it. Henshaws’ message and what they offer people is so important, so we made it our mission to make their website as user-friendly as possible so they don’t alienate anyone who needs their help. As they have so many areas to their charity, like their Specialist College and the Arts and Crafts Centre, we knew this was going to be a mammoth task… But it has been so worth it! Every area of their charity now shines brightly with its own sub-brand identity throughout the website and the navigation is clean and simple (not to mention it has a light and dark mode!). 

Although we have said the words ‘we’ in this blog numerous times and it definitely has been all hands on deck – this project has been wonderfully managed by our Senior Digital Account Manager, Jacy Davis (formerly known to most of you as Jacy Yates). There was no Tank member more suited to this project than her. With a long history of working within charities, a bucket-load of empathy for every living thing, and personal values that match the brand ethos, Jacy has managed this project with the utmost priority and care throughout. (You can ask Helen at Henshaws if you don’t believe us).

Anyway, we really could go on forever – we’ve learnt so much and have so much to share, which you can see more of on the Henshaws Case Study page. For now, check out Henshaws’ brand new (accessible) shiny website, we hope you love it as much as we do: https://www.henshaws.org.uk/