My neuro-inclusive website bridges accessibility and aesthetics
In designing my new website, my primary goal was to put focus on the content in a way that works for everyone, whether neurodivergent or neurotypical. Drawing inspiration from the principles of neuro-inclusion, I think I’ve achieved that goal.
Every aspect of my website’s design reflects a thoughtful approach about challenges that can be faced by neurodivergents. With a soothing color palette, easy-to-read fonts, and static content presentation, the site is accessible for everyone. But it’s not just about accessibility: it’s also about creating a visually captivating experience that resonates with neurotypical users.
By striving to strike the right balance between diversity and consistency, I believe that my website offers superior usability and aesthetic appeal to all. That is the power of neurodiversity-inspired best practice. Please click through to take a look, and let me know if you have feedback to better meet my goal!
Three key take aways
- In designing my new website, one of my primary requirements was to ensure that the focus was on the content, which was presented in a way that was equally appealing and accessible for everyone. I have addressed this requirement by using the principles of neuro-inclusion.
- Considering the needs of a few types of neurodivergence: autists tend to be literal; dyslexics can read text more easily when it follows certain guidelines; and those with ADHD have to work harder to focus, tending to be easily distracted. The website caters to these challenges by offering content in a calming color palette, in an easy-to-read font that is overlaid on a pale background and never over images. All content is directly relevant to the title of the webpage, and nothing moves unless the visitor makes it. All multi-step points or processes are displayed in an at-a-glance overview.
- The website is not only designed for neurodivergent visitors. I also want it to be appealing and informative to neurotypical visitors, who value interest created by different fonts, images, and photographs. I have made a judgment call about the right balance between diversity and consistency. I believe that these best practices, inspired by neurodivergence inclusion, has resulted in a beautiful website offering superior usability for everyone, neurodivergent or neurotypical, and that is my mission.
— — — — — — — —
I am proud to have launched my website this week.
One of my key requirements for my website is that it is inclusive, and accessible to everyone. I don’t want any visitors to have to make a lot of effort to engage with my content; I want them to start to benefit from my expertise from the outset. I have achieved this by employing best practice inspired by neuro-inclusion: neurodivergent visitors, such as those who are autistic, dyslexic, or have ADHD, should be able to browse with as much pleasure as neurotypical visitors and, as usual, the principles improve the browsing experience for everyone.
Merina Burda of Burda Consulting is the brains behind converting my wishes into the beautiful design. Over the last few weeks, I have experienced that Merina’s skills and experience are complementary to mine, and together we have created a website that we believe is welcoming, and offers information that is easy to digest, for neurodivergent people as well as neurotypical.
We researched a lot of sources, and I have shared the two that we found most useful at the end of this article. We have translated their advice into this website, and I’ll describe how its design makes it neuro-inclusive.
Calm color palette
Many neurodivergent people have sensory sensitivities; autists, for example, often find highly contrasting colors confrontational. We have selected soft, muted tones that we believe are calming and enable energy to be directed primarily to the content instead of to maintaining focus.
The color palette is very similar to the color scheme in my family home, which was a source of inspiration for Merina. We moved to this home to provide a lower-trigger environment for our autistic son, when it became clear that Amsterdam was nothing more for him than sensory overload. We have reflected the natural colors of the garden inside our house, since they are calming and we wanted continuity and peace, not contrast. It is intentional that the color palette of the website is natural since our experience is that this is an environment where our family can engage more productively and happily with each other.
Easy-to-read text
We learnt that dyslexics find it easiest to read dark text on a light, but not white, background; the trendy light text on a dark background seems much more challenging and so we avoided that. The text is not strongly contrasting, which is easier for neurodivergent eyes (and, I think, all eyes) to read.
We have also avoided placing text on top of photographs or images, which is a struggle for dyslexics, and we believe also offers additional distractions for those with ADHD, making it more difficult for them to focus on the content. Alt text naturally accompanies all images.
Merina selected these beautiful fonts because they are sans cerif, include space between letters, and because there is a clear distinction between similar letters.
We have aimed to ensure that the amount of text on the website does not overwhelm by organizing it in easier-to-read blocks, with clear separation between sections. We have broken up the text within each section into short paragraphs and bullets. There’s intentionally a lot of space around the content to reinforce a feeling of calm that the color palette creates.
It is also important, perhaps especially for neurotypical visitors, that there is interest and variation in the pages, although we know that this tends to be a challenge for autists and can prove a distraction for those with ADHD. We have considered the balance between these contrasting needs carefully and have introduced some variation by including different font sizes, icons, and a few photographs. I hope that we have judged the balance correctly.
Explicit, clear content
I have written previously about the importance of communicating plainly and literally, ensuring that information is not implied or open to interpretation, and avoiding figurative language, to be inclusive of autists who tend to struggle otherwise; you can find that article here. I have done my best to create content that meets these goals, and I welcome feedback on improvements if visitors see and share those opportunities.
We have designed the website to be clean, uncluttered, and free of distractions. This is especially important to autists, who can find many stimuli to be distressing and a precursor to sensory overload, as well as to those with ADHD whose brains tend to prefer instant rewards and so have to work harder to maintain focus.
Hopefully, no visitor, neurodivergent or neurotypical, needs to fight their preferences to make their brains digest the information they are interested in.
Informative, manually controlled navigation
The names of the pages predict the content that is to be found there, and everything on each page is relevant to its title. We have not included any interesting nuggets or cool facts and figures that are not strictly relevant to the title. This close link between title and content recognizes the tendency of autists to be literal, so that they can easily find the information they are looking for, and to help those with ADHD to maintain their focus on the central theme of the page.
We have eliminated automated movement within pages, ensures that information is easier to digest for those who may struggle with sensory integration.
- The header bar stays put as visitors scroll down a page, so that there is a constant anchor.
- Each page has been made as short as possible by only including strictly relevant content, reducing the need for scrolling.
- We have not included any moving images, sliding panels, or automatically advancing carousels; all movement on my website is under your control as the visitor.
Finally, where multiple facts or steps are being communicated, we have worked hard to present these as an overview that can be digested at-a-glance.
- We have used adjacent blocks instead of a list. Within the confines of a responsive website, we have done our best to ensure that the number of lines of text align across the blocks so that the visual effect is as calm and non-distracting as possible.
· We have provided anticipatory guidance in multi-step processes, to reduce surprises and build familiarity with the sequence of events that will happen.
The ‘law of neuro-inclusion benefitting all’ holds
Merina and I have used best practises from neurodivergence inclusion to make my new website neuro-inclusive. We have been conscious when designing the color palette, text, content and navigation of elements that can make it easier for neurodivergent visitors to digest the information.
In doing so, I invite you to visit a website that offers a beautiful and clear interface, logical organization, and superior usability, placing the focus on the content before everything else. I believe that this approach benefits everyone who visits my website, whether neurodivergent or neurotypical, and that is ny mission.
The ‘law of neuro-inclusion benefitting all’ is just that: best practise from neurodivergence inclusion is the shortest, most direct route to transform your culture so that all of your employees willingly engage their skills and experience to deliver your vision.
Please let me know if you see opportunities to improve the inclusivity of my website for both neurodivergent and neurotypical visitors. You can:
References
We found this article very helpful as overall guidance: ‘Web design for neurodiversity’ from the adchitects blog.
This article was especially useful for insights about color palettes and fonts: ‘Designing for Neurodivergent Audiences’, by William Careri (2022), published in Nightingale (Journal of the Data Visualization Society).
