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.
Accessible design and web development action
- Wireframe and accessible colour palette creation
- Website design work
- Web development – integrating bespoke site elements and third party software
- Built against Web Content Accessibility Guidelines (WCAG) 2.1 standards, level AA
- Delivery of Content Editor Training and internal stakeholder training
- Project management and accessibility consultancy
- Website accessibility statement support
- Manual usability and accessibility testing
- Hosting and website maintenance package
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.
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.
Building responsive and inclusive online platforms
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.
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
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.
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.
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.
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.
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.
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.
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
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.
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.
