Grab a cuppa, get comfy and have a nosy around :)

Back

Understanding Accessibility

understandingaccessibility.com

Share

Understanding Accessibility is a new online resource, created by Alaïs de Saint Louvent, lead designer for Studio Lutalica. Developed by Lattimore + Friends, with Creative Direction from Studio Lutalica, Understanding Accessibility promises to tackle the usability gap in Web Design, by presenting fundamental accessibility guidance in a clear and engaging way.

Webpage with a pink gradient background featuring bold text: Understanding Accessibility. Above, a menu bar offers options: Colours, Typefaces, Media, Layout, Development, and About. Below the text reads: A tool for web designers.
Credits

Branding, UX + UI Design: Alaïs de Saint Louvent

Development: Lattimore + Friends

Illustrations: Emily Peat

Web Design

Naturally, we sought to make this website as widely accessible as we could to practice what it preaches. We carefully implemented general accessibility practices, ensuring a user-friendly interface and clear communication.

We put ourselves in the shoes of the people we expect to use this website, and created the layout and navigation, accordingly. The site is divided and subdivided clearly by design area and WCAG focus area.

Accessible webpage with a pink backdrop showcasing two large, black and white cartoon eyes at the centre. A horizontal menu bar at the top offers options such as Colours, Typeface, and Media. Below the eyes, text states: Oh no! You seem to be lost....

A web page titled Imposters with a short paragraph about typefaces on the left. On the right, examples of similar-looking letters and numbers are shown from the fonts Castledown, Hermeneus One, and Heebo, including uppercase I and numeral 1.

Webpage titled Mobile featuring two smartphone outlines side by side on a pink background. The text highlights the significance of designing websites for different mobile screen sizes, with navigation tips and accessibility considerations.

Illustration of a website against a pink background featuring the text Why is accessibility so important?. The layout includes sections on accessibility. On the right, theres a colourful grid showcasing four pairs of stylised eyes.

Webpage design section labelled Learning Disabilities with abstract shapes. Below are navigation buttons: Learning Disabilities, Visual Impairments, AAA Accessible, Compliances, and Not Accessible. All set against a light grey background.

Image of a webpage titled Quick Tips displaying various sections on typography advice. The sections cover using proper headings, avoiding small font sizes, opting for readable fonts, ensuring optimal characters per line, testing font choices, and adapting design treatments.

Two mobile screen designs, both with pink backgrounds and a black Menu button, titled Understanding Accessibility. The screens feature text discussing the importance of accessibility in web design, highlighting aspects like colour choice, typography, and animations.

Accessible webpage with a pink backdrop showcasing two large, black and white cartoon eyes at the centre. A horizontal menu bar at the top offers options such as Colours, Typeface, and Media. Below the eyes, text states: Oh no! You seem to be lost....

A web page titled Imposters with a short paragraph about typefaces on the left. On the right, examples of similar-looking letters and numbers are shown from the fonts Castledown, Hermeneus One, and Heebo, including uppercase I and numeral 1.

Webpage titled Mobile featuring two smartphone outlines side by side on a pink background. The text highlights the significance of designing websites for different mobile screen sizes, with navigation tips and accessibility considerations.

Illustration of a website against a pink background featuring the text Why is accessibility so important?. The layout includes sections on accessibility. On the right, theres a colourful grid showcasing four pairs of stylised eyes.

Webpage design section labelled Learning Disabilities with abstract shapes. Below are navigation buttons: Learning Disabilities, Visual Impairments, AAA Accessible, Compliances, and Not Accessible. All set against a light grey background.

Image of a webpage titled Quick Tips displaying various sections on typography advice. The sections cover using proper headings, avoiding small font sizes, opting for readable fonts, ensuring optimal characters per line, testing font choices, and adapting design treatments.

Two mobile screen designs, both with pink backgrounds and a black Menu button, titled Understanding Accessibility. The screens feature text discussing the importance of accessibility in web design, highlighting aspects like colour choice, typography, and animations.

Two mobile screens show a menu and text. The menu includes options: Colours, Typefaces, Media, Layout, Development, and About. The text underscores the significance of accessibility in web design, focussing on colour, typography, and user experience.
Three mobile screens displayed on a pink background. The first screen features UI resources, including colours, typography, and layout options. The second screen highlights AA Accessibility using coloured letters against a black background. The third screen demonstrates accessible hover states with an example and cursor icon.

Our commitment to accessibility extends seamlessly to mobile and tablet design. The website maintains its user-friendly interface and accessible features across all screen sizes. We focused on creating a responsive design that allows users to engage effortlessly with the content on various devices, ensuring a consistent and accessible experience for all users.

Mobile Design

Our mobile design applies distinct, but crucial accessibility principles for different screen-sizes, ensuring a smooth and inclusive experience for all users.

By prioritising responsive design, we aimed to provide an engaging and accessible interface, delivering a strong user experience across different mobile devices.

Graphic titled Why is accessibility so important? features cartoon eyes within four coloured squares. Text below states, When designing websites, increased experience highlights the importance of accessibility in design.

Illustration of a pink computer screen set against a green background. The text above reads Responsive Web Design and Desktop Design. Below, theres a paragraph discussing designing for a 1440 screen to ensure accessibility and responsiveness.

A mobile screen showing AA Accessibility information with bold yellow and orange A letters on a blue background. The screen outlines colour contrast standards for user interface design, highlighting minimum ratios of 4.5:1 for text and 3:1 for non-text elements.

Graphic displaying an array of soft-coloured circles on a navy background. Text underneath reads: Learning Disabilities: Autism, certain forms of ADHD, dyslexia... Soft colours are non-triggering and reduce distraction. If colour is used to convey meaning, ensure to provide textual information.

Illustration of a yellow pixelated cursor pointing at a button, highlighting the need for defining accessible hover states for clickable elements.

Graphic titled Why is accessibility so important? features cartoon eyes within four coloured squares. Text below states, When designing websites, increased experience highlights the importance of accessibility in design.

Illustration of a pink computer screen set against a green background. The text above reads Responsive Web Design and Desktop Design. Below, theres a paragraph discussing designing for a 1440 screen to ensure accessibility and responsiveness.

A mobile screen showing AA Accessibility information with bold yellow and orange A letters on a blue background. The screen outlines colour contrast standards for user interface design, highlighting minimum ratios of 4.5:1 for text and 3:1 for non-text elements.

Graphic displaying an array of soft-coloured circles on a navy background. Text underneath reads: Learning Disabilities: Autism, certain forms of ADHD, dyslexia... Soft colours are non-triggering and reduce distraction. If colour is used to convey meaning, ensure to provide textual information.

Illustration of a yellow pixelated cursor pointing at a button, highlighting the need for defining accessible hover states for clickable elements.

Accessible Branding

Typography and colour palette design display. Three font styles labelled as headlines, secondary headlines, and body copy, all in Castledown variations. Six coloured circles on the right: pink, black, purple, green, blue, and navy.

The visual identity of this website is meant to be as accessible as can be. The font, Castledown, by Colophon Foundry, is considered to be one of the most accessible typefaces on screen. A lot of research went into the colour palette to find combinations that weren’t problematic for users with various conditions, including such as ADHD, Autism and colour blindness. Finally, the logo evokes an eye, spotlighting the user rather than the creator.

I’m really thankful for the support and encouragement that Studio Lutalica and Lattimore + Friends have given me throughout the project.

– Alaïs de Saint Louvent, Creator of Understanding Accessibility & Design Lead at Studio Lutalica

Related Projects

lvndr white logo on a red and purple gradient background
LVNDR Health

Innovating healthcare access for LGBTQ+ communities with personalised digital solutions.

A purple background features pages from the Womankind Worldwide website
Womankind Worldwide

Advancing women's rights globally through impactful advocacy and partnerships.