Skip to main content

20-20a Westminster Buildings, Theatre Square, Nottingham, NG1 6LG(0115) 888 2828

Accessible web development for The Employer’s Network for Equality & Inclusion (enei)

the enei homepage displayed on a desktop monitor and their logo is hovering above

Case study brief: Accessible website development for enei’s inclusive employers

The Employers Network for Equality & Inclusion (enei) is the UK’s leading employer network. The not-for-profit organisation helps employers build and maintain diverse teams and inclusive cultures through membership, training, and consultancy services.

Enei came to HeX in need of a new accessible website and creation of a unique member’s area, giving access to a range of exclusive content. The build was needed to support their organisation’s growth and to provide an exceptional customer experience for their network and prospective customers.

Building HeX’s first accessible forum made this case study unique

Though HeX is no stranger to an array of bespoke development work, one aspect of this project was unique for the team. Enei required a forum building for the network member’s area of their site. 

The forum gives members the ability to share best practices, provide peer-to-peer support, and enable open discussions amongst their entire employer network.

The added challenge was ensuring that this forum was accessible for everyone, no matter what device or assistive technology they use.

an orange hexagon with the accessibility symbol inside

Accessible design and web development action

enei case study overview

Please note: all content in this video can be found below within the web page text.

The iterative stages of website design work through wireframing and branding  

Our specialist graphic designer turned these plans into a series of wireframe designs. Wireframes are simplistic line drawings that display the layout of site elements across web pages. 

4 stages of the wireframe process, starting with a simplistic line drawing - working up to the chosen design work

HeX experts reviewed enei’s current website and created a site map with a clear user flow. Devising a plan for the site to encompass strong taxonomy, clear call-to-action elements, and simplistic navigation. 

He began this process without implementing visual designs or styling. This gave a clear understanding of the website’s structure and the journey the user will take through navigational elements. 

Throughout the process our designer created multiple design prototypes. This gave enei a choice of page layouts and the opportunity to give input into the site’s user interface. The HeX team worked closely with enei to gain feedback and enable a fast moving agile build process.

Enei are planning a rebrand of their organisation’s branding design in 2024/25. Their previous branding incorporated all the main primary colours, giving our designer plenty of options to work with. To simplify migration for their upcoming brand, our designer stripped the site back, using neutral colours and taking key colours from their existing colour palette. 

Our designer provided enei with an array of accessible design options for the team to agree upon. Adding these colour palette options to the wireframe designs. By bringing the prototype design work to life, we presented enei with a vivid demonstration of their site’s new visual identity. The chosen colour palette, being a striking orange and navy blue, were then used on site wide designs and implemented into their main logo. Taking them from this outdated website design to a simplistic, yet sleek and modern look and feel.  

a comparison between enei's old website which is displayed on a tablet, and there new modern sleek and attractive website

Building responsive and inclusive online platforms

a white mobile phone displaying the enei home page

Enei wanted their site to be built on a modern content management system (CMS) to enable their team to easily manage content pages. HeX has vast experience in using WordPress and has developed a bespoke theme using Gutenberg blocks. This CMS overhauls the classic back-end editor and allows content editors to see site elements in a more visual and intuitive way. Also providing greater flexibility with the style of the website and its available features. 

Every website that HeX develops has a responsive design, built with inclusivity in mind. We ensure that all of our sites are scalable, to fit on varied screen resolutions, and accessible with assistive technology.     

We built enei’s website against Web Content Accessibility Guidelines (WCAG) 2.1 to conformance level AA. This ensures that the website meets accessibility requirements, allowing disabled users the ability to access the website with ease. 

Quote symbol

HeX came highly recommended. The care, attention, and love for accessibility and inclusive design shone through, so we desperately wanted to work with them and it was wonderful.

Sandi Wassmer: enei CEO

Quote symbol

Clear taxonomy and call-to-action boxes streamlining the user journey

Clear categorisation and strong taxonomy is key for a successful, user-friendly, website. 

Our easy-to-use navigation created a clear and identifiable route to relevant information. Along with a simplistic navigation bar, clear call-to-action boxes across the site. These boxes stand out to the user to efficiently guide them to their desired content. 

screenshots of the members forum, dropdown navigation and skip-to links

Each web page contains a page summary block, detailing what content is within that section.  Summary boxes aid with navigational flow and enhances a website’s Search Engine Optimisation (SEO)

Enabling instant access to relevant resources through page categorisation

Our team tagged all web pages with a unique categorisation structure. This was in place to enable members to search for resources in enei’s extensive content library. As this area of the site contained a variety of resources, including text-based pages, PDF documentation, infographics, toolkits, imagery and video media files.

a laptop showing the resources area of the enei website

Users needed to be able to quickly locate their required resources. Due to our categorisation system, the robust search facility allowed users to search by single or multiple tags and keywords. 

Adjacent to this useful search feature, our team embedded the facility to filter resources by type, subject, and life cycle stage. This enabled users to be able to fluently drill down through a wide host of topics.  

Embedding dynamic forms that integrate with third-party software  

We placed interactive, accessible, forms across the site. These eye-catching blocks entice enei’s audience to sign-up for newsletters and give the ability to easily contact the team. 

The dynamic forms integrate with third-party software, with callback features linking to Salesforce, within Mailchimp.  

a screenshot of the built-in sign-up forms

Accessibility features to enhance the user experience

HeX are advocates for digital inclusion and are experts in the field of accessibility. We build all of our sites with the user in mind, enabling access no matter what assistive technology they use. 

Within the site’s top navigation a high contrast accessibility feature has been embedded. When selected, this turns the site into a ‘dark mode’, which inverts the website’s colour contrasts. This feature is popular among people with low vision or photosensitivity, making the interface easier to use and improving readability.

screenshots comparing the high-contrast mode when it's toggled on and off

Within this same navigation, a clear accessibility symbol is displayed. This directs the user to enei’s accessibility statement, that our experts created. An accessibility statement is an important element for a site, as they allow disabled users to understand what areas of a site aren’t accessible. Not only that, it demonstrates to users that enei care about accessibility and are committed to providing an inclusive platform for all to interact with. 

The challenge of creating an accessible community forum

Our team loves a challenge, so we were eager to get to work on creating HeX’s first accessible forum. 

After researching and scoping a variety of message boards, our Accessibility Director formed a plan of action for this unique development project. 

We created the forum within a restricted area of the enei website. This grants access to only current subscribed network members. The member’s forum gives the ability to share best practices, provide peer-to-peer support, and enables open discussions amongst the entire employer network. Encouraging cross-network collaboration and engagement.

Our team set up a series of member profiles and unique user groups, with various access rights. This empowered enei to easily manage and monitor the forum’s activities. Along with providing reporting facilities for users of the forum.  

Users have the ability to search for topics which matter to them, entering into open discussions on that subject. The forum enables its audience to tag other users in discussions, subscribe to topics and posts, and receive notifications of live interactions.

a desktop monitor showing the member's forum

As the site used plug-ins, it created a range of accessibility obstacles for our expert developers to overcome. This included:

  • Icons without focusable elements. These were replaced with accessible buttons, featuring aria labels. 
  • Inaccessible form elements. After adding form labels to form inputs and marking them up correctly these are now accessible. 
  • Our developer team implemented accessible forum breadcrumbs and page pagination.
  • We were challenged with ensuring that the forum also was accessible in ‘dark mode’, ensuring that colour contrasts ratios were correct on both versions of the site. 
  • Plugins were powered by javascript, which caused an accessibility barrier on HTML elements. This impeded on screen reader and keyboard only users being able to use these features. HeX’s bespoke coding has remedied these errors.   

After rigorous front-end testing we are pleased to say that enei’s forum is now fully-functional and accessible for all to engage with. 

User testing to assess the website’s usability and accessibility 

During each stage of development work, HeX experts undertake a series of testing procedures. The entire team rallies together evaluating all the site’s features. This assesses the user experience and site flow, whilst meticulously searching for any bugs or enhancements.

Everyone likes to use sites in different ways. That’s why our thorough website testing covers all areas of the user experience. Through iterative development stages, we ask those who will be using the site to also user-test areas and provide feedback. As a member of the enei team is visually impaired, we had an instant and invaluable site assessment throughout the project.  

The team at Shaw Trust Accessibility Services, who we work in partnership with, then manually tests the site. Accessibility Services has a team of disabled assessors who search for accessibility issues. The team’s testing methods use assistive technology, including screen readers, keyboard-only, voice commands and more. This gains real-life insights from those with disabilities, who assess the user-journey and feedback on the accessibility of the user-interface and design.  

Ensuring that when the site goes live, it is a seamless experience and is accessible for all to use. 

Upskilling the enei team with accessibility training packages 

With every web development project we provide those who maintain the upkeep of the website with hands-on training.

We provided internal stakeholders with a live run through of their new site, showcasing its features. 

The site’s content editors received in-depth training. This looked at the back-end of the website, talking the team through how to use the categorisation facility. Providing guidance on utilising block elements, to allow them to easily make alterations and display content effectively.

As the website has an array of PDF documentation, we felt it was important to show the team how to create accessible documentation. We provided accessibility awareness training and how to create accessible Word and PDF documents. This looked into topics such as:

  • The readability and language used
  • Heading level structures
  • Text alignment, spacing, and font types
  • The use of alternative text
  • The need for descriptive hyperlinks
  • Structuring a PDF’s reading order
  • What information to display when adding a document to a web page

Providing additional support on accessible infographics. Giving advice on colour contrast ratios, so that their team could amend their current infographics and make them accessible for all to read.

Our robust training package gave enei the confidence to consistently create and maintain accessible additions to the web estate upon project completion.

The impact and result of creating an accessible network for employers 

We are proud to have achieved a mobile responsive and accessible site for enei. 

5 people from different races are all piling their hands on top of each other in a circle to do a upwards high five. This is above an office desk with a laptop and reports under them.

Enei’s new website is inclusive for their network as a whole. As it conforms to the WCAG 2.1, it is accessible for a range of devices and assistive technology users.

A contrast button has been embedded to assist those with low vision or photosensitivity. Enhancing the user experience for all members and prospective customers. 

Throughout each iterative step of the process, our experts provided project consultancy. HeX worked closely with enei, engaging in frequent online meetings, to guide their team through each design and development stage. These meetings addressed any questions or feedback at an early stage. An online reporting method was also established for user testing purposes, enabling a fast and efficient service turnaround. 

The site’s direct signposting, summary boxes, and clear call-to-action blocks has created a clearly-defined user journey. Allowing site members to easily flow through the site and swiftly locate key information. 

Due to our intuitive search features, network members have instant access to enei’s vast content library. Members are able to filter down through guides, events, case studies, resources, and more – specific to their needs. 

Current network members now have access to an online community. Providing them with the opportunity to start conversations, share resources, and discuss their experiences. This has given the entire network an invaluable chance to share best practices and engage with their community. All of which is accessible, has a clear hierarchical structure, and provides the chance to subscribe to topics of interest. In return, improving network collaboration, engagement, and communication. 

Training has left site editors feeling empowered to be able to manage and implement accessible content. Along with the knowledge to structure and design documentation and infographics in an accessible way.  

HeX continues to support enei by hosting their website and providing ongoing maintenance. This ensures that the site remains secure and up-to-date. Allowing our team to implement any new functionality features that may emerge over time.

This is only phase one of enei’s accessibility journey. We look forward to working with the team again soon on phase two. 

More case studies about accessible web development

Palace Theatre Newark website and logo

Palace Theatre

The Palace Theatre identified that their previous website was difficult for their community to use. This led them to requiring a redesign of their site to be in-keeping with the friendly and helpful service they provide. 

NSDC homepage, displayed on a desktop monitor

Newark & Sherwood District Council

Impressed by our expertise, Newark & Sherwood District Council procured our services to perform a complete overhaul of their main website to meet government accessibility standards. 

enei testimonial

When we were looking to build this website we had very few agencies in the frame. HeX came highly recommended and the care, attention, and love for accessibility and inclusive design shone through. So we desperately wanted to work with them and it was wonderful. It’s been a lovely experience from start to finish, it’s been really fun to work together and there’s been so much creativity and innovation and nothing has ever been a problem. If we’ve had a challenge HeX has always risen to it and solved it. It’s been such a pleasant experience. 

Sandi Wassmer, CEO, enei