NBDC Ltd Case Study
No Boundaries Disability Consultancy Ltd (NBDC) approached us with a clear challenge: to design and develop a website that not only showcased their services but also embodied their core mission of promoting accessibility. As a consultancy dedicated to helping businesses comply with accessibility standards and support individuals with disabilities in the workplace, NBDC wanted their website to be a prime example of accessibility in action. Their goal was twofold: to help businesses improve their accessibility and appeal to a broader disabled audience, while also supporting individuals who feel their workplace could do more to accommodate their needs.
With these objectives in mind, we undertook the task of creating a website that would set the standard for accessibility. Understanding the importance of this for their brand and the people they serve, we prioritised making the site as inclusive and user-friendly as possible. The result is a website that aligns with NBDC’s mission, providing an accessible and welcoming online experience for all users, particularly those with disabilities. This case study outlines the key accessibility features incorporated into the site and demonstrates how these elements contribute to creating an inclusive web presence.
Enhancing Visual Accessibility
The website needed to cater to users with diverse visual needs, including those with colour blindness, dyslexia, and low vision. Achieving this required a careful balance between design aesthetics and accessibility standards. It was important to ensure the website was not only visually appealing but also usable for people who rely on specific visual cues to navigate effectively.
Our Solutions:
High Colour Contrast
We ensured the website met WCAG 2.1 guidelines for colour contrast, aiming for a contrast ratio of at least 4.5:1 for text and 3:1 for larger text against the background. We used tools like WebAIM’s Contrast Checker to verify that the text remains legible for all users, including those with colour blindness or low vision.
Inclusive Fonts and Muted Backgrounds
For users with dyslexia, we selected the fonts Lexend and Inclusive Sans, both specifically chosen for their dyslexia-friendly design. These fonts have been shown to improve letter recognition by making a clear distinction between letters like “d” and “b.” For users experiencing visual stress, the website’s background colour was set to a muted cream tone to reduce glare and improve readability.
Text Resizing
For users with low vision, including older adults, we used ‘rem’ units for font sizes, which allows text to be resized without disrupting the layout or functionality. This flexible design ensures that users could adjust the text size to their preferred reading size.
Optimising Navigation and Interaction
It was essential to design the website so it was fully navigable without a mouse, as many users rely on keyboard navigation, screen readers, or other assistive technologies. We also needed to ensure that the site was intuitive for users who depend on these tools to navigate efficiently and independently.
Our Solutions:
Screen Reader Compatibility
To ensure that the website was usable by individuals relying on screen readers, we implemented ARIA (Accessible Rich Internet Applications) labels and used semantic HTML elements. This ensured that all interactive elements, such as buttons and forms, were properly labelled and could be read aloud by screen readers. We also added elements that were ‘sr-only’ which hid them visually but were visible to screen readers when extra relevant content was needed. We also ensured that irrelevant content was hidden from screen readers using aria-hidden=“true”, so users wouldn’t be overwhelmed with unnecessary information. With proper ARIA labelling and a structured layout, the website provides a seamless navigation experience for users who depend on these technologies.
Keyboard Accessibility
We made the entire website fully navigable via the keyboard by adding visible focus indicators. When a user tabbed through links and buttons, a blue outline would appear around the focused item. This made it easier for users with motor impairments or those who do not use a mouse to interact with the site. We also ensured that the tab order was logical, guiding users through content in a clear, sequential manner.
Descriptive Links
To enhance navigation for screen reader users, we avoided vague link texts like “click here” and instead used descriptive link text such as “Learn more about accessibility services.” This made it clear to screen reader users where the link would take them and improved the overall user experience.
Reducing Sensory Overload
The website needed to avoid distracting or overwhelming users who may experience discomfort or sensory overload from motion or animations. This includes users with vestibular disorders or neurodivergent conditions like ADHD and autism who are sensitive to moving content. It was essential to provide options for these users to limit or disable unnecessary animations on the site.
Our Solution:
Reduced Motion Support
To ensure the website was accessible to users with motion sensitivities, we implemented the ‘prefers-reduced-motion’ media query. This detects whether a user has enabled a system setting to reduce motion on their device. When the setting is active, we disabled animations and transitions, providing a more static experience for these users, thereby reducing potential discomfort or disorientation.
Accessible Forms and Security
Forms were an essential component of the website, and it was crucial to ensure that they were fully accessible to all users, including those with cognitive or visual disabilities. Additionally, security was a key concern, and we needed a solution that was both user-friendly and secure, without using CAPTCHAs that are often inaccessible to people with disabilities.
Our Solutions:
Accessible Forms
We designed the website’s forms to be user-friendly and accessible to all users, including those with visual or cognitive impairments. The forms are mobile-responsive and use appropriate input types (e.g., email, tel, date) for easier interaction on various devices. Each form element is clearly labelled, with visible labels and ARIA attributes to ensure that screen readers can correctly associate labels with their corresponding input fields.
Honeypot for Bot Protection
Instead of using CAPTCHAs, which can be difficult for users with disabilities to complete, we implemented a honeypot technique. This involves adding an invisible field to forms that only bots can see and fill out, while human users remain unaffected. This approach prevented bots from submitting spam while ensuring a smooth, accessible experience for all users.
Enhancing Media Accessibility
To ensure that all users could engage with visual content, we focused on making the website’s images and multimedia accessible. This required implementing alternative text for images and ensuring that videos or audio content was also accessible to users with disabilities.
Our Solution:
Alternative Text for Images
We made sure that all non-decorative images included descriptive alternative text (alt attributes), which provided a concise description of the image’s content or function. For images that are purely decorative and do not add meaningful content to the page (such as icons or design elements), we used alt="". This ensures that these images are ignored by screen readers, preventing unnecessary interruptions for visually impaired users.
This approach benefits screen reader users by providing them with meaningful descriptions of images, allowing them to understand the content that sighted users can see. It also aids users with cognitive disabilities, who may find it easier to understand content when it is clearly described.
Summary
When No Boundaries Disability Consultancy Ltd approached us, they sought a website that would serve as a model for accessibility, showcasing their commitment to creating inclusive and accessible environments. By implementing a range of accessibility features, we delivered a website that not only meets legal accessibility standards but also reflects the core values of NBDC.
Through this project, we demonstrated that accessible web design is not only about meeting technical guidelines but also about creating a user experience that is inclusive and welcoming to all individuals, regardless of ability. The website stands as a testament to the importance of accessibility and serves as a valuable resource for businesses and individuals alike.
Visit the No Boundaries Disability Consultancy Ltd website and explore and experience these inclusive design elements firsthand.
