Our commitment to web accessibility
HearFirst website is committed to inclusive design standards and honors human diversity.
Therefore, steps have been taken to ensure this service has been made as accessible as possible and delivers a positive user experience for all types of users. This rightfully includes those who have a disability.
To meet accessibility requirements, this service has been designed and developed by following the methods as defined by the Web Content Accessibility Guidelines (WCAG 2.1) and the principles of human-centric design.
Key accessibility considerations
User research studies
As part of the UX research plan, users were surveyed to gain a deeper understanding of their experiences when interacting with the previous digital service. This analytical data gave insights into their pain points and expectations. The current digital offering was largely centered around addressing and expanding on any needs identified by this body of work.
User personas
During the UX research phase of the project user personas were created based on the pre-existing website audience and individuals and organisations who have pre-existing knowledge of the brand. This method ensured that design teams, developers, and all key stakeholders had a greater understanding of the types of users who would be likely to use this service and highlight potential challenges users may experience when visiting the website. In doing so, this laid the foundations for having empathy for our users and placed their experience at the forefront of the digital product.
Layout and content hierarchy
The layout of the pages have been structured in a way that ensures information is discernible at a glance. This method helps users obtain as much information as quickly as possible.
As a result, having a clear structure of importance, combined with clear navigation, means that users can act with autonomy as they navigate easily around the website.
In addition, the page layout is responsive and therefore adapts itself as the viewport changes dimensions to give the user the optimal experience possible.
Colour palette
The HearFirst brand follows a set of principles relating to its colour palette. This ensures that there are sufficient levels of contrast between elements to optimise legibility and visual affordance. These considerations help those who have a visual impairment but also help improve the experience for all users.
Font stack and scaling
The HearFirst brand uses the Readex Pro font stack. Readex Pro was designed by Thomas Jockin and Nadine Chahine. Their goal was to produce a font that would be easier for everyone, reduce visual stress, and also help improve the reading performance of those who have dyslexia as well as other reading challenges. You can find out more about Readex Pro on Google Fonts
Key considerations were taken in regards to the size of the fonts across a range of different screen sizes. For example;
Fonts were large enough to allow people to comfortably read. The line length ensures comfortable reading longer passages of text.
Headings communicate a well-structured hierarchy which ensures that header styles differ from the additional text, such as paragraphs, in a way that demonstrates consistency. This technique helps users to scan the information for the content they require.
Line height was determined to improve readability to help the eye know where to return to when a line breaks and again to improve the scannability of the text.
Images
All images have been given descriptive captions that have been written in clear and plain language. Furthermore, the use of text over images has been avoided to ensure that any text remains legible and any icons have been used in a way to provide a visual point of reference.
Website efficiency
HearFirst has a positive PageSpeed score on both Mobile and Desktop making it fast and reliable to load in a range of internet usage scenarios.
A safe connection
The HearFirst website operates on an entrusted server and with a dedicated SSL certificate. By enabling an encrypted connection users of the site can be better protected when dealing with the sensitive data transmitted from and to the website.
Forms
Forms have been made as simple as possible and only ask for the essential data required for the user to complete the task. The form elements are arranged in a way that maintains the visual momentum and are labeled accordingly as well a give clear indications to any required fields. Additionally, the are highly visible and specific error states as well as success states attached which provide visual feedback on the status of submissions.
Testing
Cross browser testing has been performed in a range of modern and well supported browsers for Windows, Mac, iOS and Android. For more information please read:https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices
Browser debugging via modern web browsers have tools that make it easier to find accessibility problems in the Document Object Model (DOM). For example, the Accessibility Inspector for Mozilla Firefox and the accessibility features in Chrome DevTools. These tools have been implemented to reduce bugs that could contribute to accessibility issues.
Screen readers
Additionally, the product works with the most commonly used assistive technologies - including screen readers and magnifiers as well as speech recognition software.
On-going feedback and suggestions
We welcome any feedback and suggestions which will help us make your experience of using our website more accessible. Please contact us via our webform to let us know how we can help you or alternatively if you have any questions about this website you can email info@hearfirst.org.uk