What to consider when designing an accessible website

Recently a client of ours at CPSN (Cerebral Palsy Support Network) offered us some great advice and resources on designing for accessibility. Some things we knew and were already doing, but we learnt a lot of additional accessibility features to make our website and designs more accessible. 

Here are the key takeaways

Fonts:

• Use bold sparingly for emphasis.
• Avoid italic and underline for better readability.
• Stick to left-aligned or centred text.
• Use a minimum of size 12-14. Resource here.
• Avoid all caps.
• Use sans serif font.

Language & Visuals:

• Use simple language. Avoid jargon and complex words. Resource here.
• Include visuals to help explain your message. For example, symbols next to text on buttons.

Colour:

• Don't rely only on colour: Add symbols or text for clarity.
• Ensure good contrast between text and background. We like to use Colour Contrast Checker to check the contrast between different colour combinations against WCAG (Web Content Accessibility Guidelines) standards.

Layout & Structure

• Consistent Structure: Maintain a consistent layout across pages, making it easier for users to anticipate navigation patterns.
• Avoid Time Limits: Avoid automatic page changes or time limits, as some users may need extra time to read or interact.
• Linear Flow: Layouts should be logical, making it easy for a tab-friendly sequence.
• Minimise Clutter: Focus on key elements and consistent design language.
• Group Related Content: Visually group related content together using boxes or background colour, making it easier for users to navigate and understand the page structure.
• Collapsible Sections: For long pages, offer collapsible sections so users can tab through key headers without navigating through all content. Make sure these sections are easy to open and close using the keyboard.
• Avoid Complex Animations: Keep interaction patterns straightforward to accommodate various physical abilities.
• Dropdown Alternatives: Consider offering alternatives to complex dropdowns, such as radio buttons, to make choices more accessible.

What we found interesting

Remove the Accessibility Plugin

Advice from our clients and friends at CPSN which surprised us: 

"Probably the #1 I think we need to get rid of is the accessible plugin - not immediately as something is better than nothing but there is just overwhelming evidence that they do more harm than good. In my personal experience with it, I clicked it and immediately got taken to an advertisement."  - Amy, CPSN

Example doing it well - Neve 

Amy Marks from CPSN and a Creative Disability Advocate shared an example of someone doing it well - Neve is a safe and accessible space for feminine-identifying and non-binary people. It is for people with disability to explore shared experiences. It’s a great example of accessibility for intersectional and diverse cohorts with easy-read & plain version options of the website.