3 Simple Tips for Accessible Website Design
Matthew Fellion | 28 Oct 2024What makes a website truly beautiful? Is it the sleek design, the vibrant colours, or perhaps the seamless user experience? Matthew Fellion, an accessibility and usability consultant at AbilityNet, says “true beauty in web design lies in accessibility".
Matthew specialises in accessibility audits, training, and reviews of content in multiple languages. Matthew has a background in British literature.
As one of AbilityNet's accessibility consultants, I delivered a talk at AbilityNet's TechShare Pro 2023 about accessible web design. With TechShare Pro 2024 coming up on 13-14 November 2024, I’m sharing a quick summary of my top three tips. For a deeper dive, you can watch the full session below. But first, let’s start with a brief discussion about art.
The Evolution of Beauty Standards and Its Impact on Web Design
The history of art shows that standards of beauty are not fixed. Different characteristics have been valued at various times for several reasons. For instance, Gothic literature and romantic painting often appreciate things that are broken, obscure, dark, terrifying, sublime, and vast: qualities that might be desirable in a medieval ruin like Melrose Abbey, but not in a travel booking website.
This perspective helps in understanding the choices made when designing for the web. If it is possible to find a broken building beautiful because it is broken, it is also possible to find an accessible website beautiful because it is accessible. Principles of accessibility - Perceivable, Operable, Understandable, and Robust - can be seen not just as standards to meet but as aesthetic values to appreciate and strive for. What would it mean to think about accessibility not just as an add-on but as an intrinsic part of what makes a website well designed?
Tip one: Structure Content with Headings
Like the poem or tree in Joyce Kilmer’s lines “I think that I shall never see a poem as lovely as a tree,” a lovely web page should have a structure, and headings are crucial for communicating that structure. Headings help users navigate a page visually by showing how the parts of the page relate to each other. They are also important when navigating with assistive technology, as users can build an understanding of the page by reviewing the list of headings and navigating between them.
Tools like the Headings Map extension can be used to review the headings and ensure the structure is meaningful. Typically, there will be a Level 1 heading that tells users what the page is about, often matching the page title, followed by Level 2 headings for major sections, Level 3 headings for subsections, and so on. This gives the parts of the page a logical relationship.
Tip two: Enhance Visibility with Colour Contrast
Accessibility is not about avoiding colour. Not everyone perceives colour the same way, so it is important to ensure colour is not the only way to convey information. However, colour is a great way to supplement and enhance meaning, as well as contribute to the site’s look. When designing the colour palette for a site, contrast should be kept in mind, which refers to the relative brightness of different pieces of content, such as text on its background.
It can be tempting to go for subtle colour designs where foregrounds and backgrounds both have middling brightness, but this can make the content hard to read. Bold choices are encouraged: light foregrounds with dark backgrounds or dark foregrounds with light backgrounds. Tools like Colour Safe can help identify which colours will work together. When a background colour is entered, the tool generates a selection of foreground colours with good contrast, allowing a palette of colours that go well together to be built and deployed across the design.
Tip three: Label Elements Explicitly
Just as it is tempting to be subtle with colour, it is also tempting to be minimalist when labelling components. For example, buttons might be labelled with discreet icons instead of text, but does that magnifying glass mean search or zoom? With input fields, placeholder text might be used that disappears when users start typing, but what if that is the moment the user needs to be reminded what they are being asked to input?
Design boldly and explicitly. Use icons, but also text labels so that the meanings reinforce each other. Let components be proud of what they are and what they do, whether that is edit, submit, or print. Label input fields with text labels that stay put where users can refer to them as they type.
These three simple tips for accessible website design highlight that accessible websites can and should be aesthetically pleasing. But let us leave the darkness and obscurity in the Gothic ruins.
Learn about accessible web design
Implement these practices to make your website design more accessible to everyone. For more detailed guidance, check out our following resources:
- For individual learning: Accessibility for designers training course
- For you and your team: Organise accessible document team training
- For your organisation: Get a thorough web accessibility audit
Speak to our accessibility experts
This blog is a transcription of AbilityNet’s TechShare Pro conference 2023 selection of bite-sized 'Lightning Talks' from accessibility experts, highlighting top tips and advice on accessibility topics. Watch the video recording below.
Join us for TechShare Pro 2024 online for two days of sharing and learning about accessibility, disability inclusion and much more...