Young Folks

Accessible Design Explained

Designing for absolutely everybody: accessible design explained

Accessible design is a necessity in creating spaces, tools, and online content that everyone can use. It’s not simply a fleeting trend or a nice thing to include at the bottom of your website — it should be one of the guiding principles for anyone designing digital content.

The terms ‘accessible design’ and ‘inclusive design’ are often used interchangeably, but they are different. By definition, accessible design means creating digital products, tools, and services that can be used by people with diverse abilities without the need for adaptation or specialised design. Inclusive design focuses on human diversity and aims to design without separation between different groups and backgrounds. Both of them share a common goal: to ensure products and services can be used by as many people as possible.

At its core, accessible design is great design. So, it’s something we should all strive for. 

Understanding accessibility

Accessibility in design seeks to eliminate barriers that prevent people from fully engaging with digital content. This includes considerations for physical, cognitive, and sensory disabilities. Most design isn’t made inaccessible intentionally — we often don’t consider disabilities and needs we don’t know about. Being proactive in creating accessible design ensures less obstacles for people with disabilities when they navigate the web and a simple user experience for everyone.

So much of the web content we consume is still inaccessible for a large group of people. For example, on a WebAIMsurvey of the top one million websites, over 56% had Web Content Accessibility Guidelines (WCAG) conformance issues. The same study found 26% of photos on homepages were lacking alt text. 

To understand barriers in accessible design, we need to know the needs we’re designing for. Understanding common obstacles many users face helps us look at design from a more inclusive lens.

Some common inaccessible design elements include:

  • Font sizes that are too small or inflexible: Text that can’t be enlarged can be illegible for people with vision impairments.
  • Images with no alt text: People with low vision use screen readers to navigate websites and digital interfaces. They can’t access visual content that doesn’t have alt text attached.
  • Insufficient colour contrast: Text colours without sufficient contrast to the background colour can be hard for users to read. 
  • Inaccessible interactive elements: Hover elements and drop-down boxes are challenging to use for people with motor issues or those using only keyboard navigation.
  • Auto-play and pop-ups: Auto-play of audio and video is distracting for many users, and pop-up windows are hard to navigate and control with screen readers.
  • Confusing forms without labels: Form fields without clear instruction on what to fill them with are challenging to complete correctly. 

Designing for different needs

We need to consider accessibility throughout the whole design process to ensure we’re designing products that don’t frustrate and alienate people, but are easy and inclusive to use. Considering your design from different angles will affect its accessibility. 

Here are some of the angles you should consider.

Colour

As a rule of thumb, avoid using colour as the only means to convey information. For example, only using red to indicate an error field in a form can be confusing for people with vision problems. Use icons and text to supplement colours in your design and ensure a sufficient colour contrast (4.5:1 ratio) between text and background. You should also avoid excessive use of oversaturated or high contrast colours to create a comfortable experience for all users, especially people with attention deficit disorders.

Typeface

Always check you’re using fonts that are responsive to size change, as many people use custom CSS instead of default design to read text. People with dyslexia can find it challenging to read cursive, decorative, and handwritten style fonts, or text where letter and line spacings are too small.

Images

Images that aren’t purely decorative but convey a meaning should have alt text and captions attached to them. Alt text should be one or two sentences long and simple but descriptive of the elements that matter in the photo. Use captions to explain the wider context or meaning of the photo and alt text to describe what’s represented in the image.

Layout

Much like fonts, your page layout should be flexible and adaptable to different devices and screens. It should be zoomable with no horizontal scroll bars, and any interactive elements in the layout should be easily identifiable. If the page contains autoplay elements like videos and audio, you should provide easily accessible controls for them. 

Readability

When looking at written content on your page or design, consider the language, structure, and content. Use headings and subheadings to break large blocks of text and paragraphs to discuss separate ideas in your text. Where appropriate, include lists to provide an easier reading experience. Avoid using lengthy and complicated sentences and paragraphs. Ensure internal links are easily identifiable through styling them a certain way, like underlining them.  

The good news is that there are already many tools and innovative technologies available in making digital content more easily accessible. Voice user interfaces (VUI) can help people produce text, do web searches, or prompt commands. Siri and Alexa are well-known examples of this. 

Often, people who are blind or have low vision use screen readers like JAWS or VoiceOver that use voice synthesiser technologies to read the contents of a web page out loud. Because of this, it’s important to check whether the layout of your content makes sense when it’s read out loud. 

Many handheld devices also offer tactile feedback to provide a smoother user experience. Physical sensations like vibrations can provide cues on actions taken, like following a link or sending a message.

The case for accessibility

In Australia, the Disability Discrimination Act 1992 (DDA) is a law that makes it illegal to discriminate against anyone with disabilities in employment, education, and publicly available goods and services. This applies to web content, also. The WCAG 2.1 provides an internationally recognised benchmark of standards that Australian websites should meet. 

The case for accessibility doesn’t end with meeting compliance regulations — brands and designers should see it as an opportunity to reach a wider audience and provide a user experience that fosters loyalty and creates a positive brand experience for all.

A study by Storyblok revealed 60% of users abandon a website without purchases due to poor experiences such as unadaptable design. Accessible and user-friendly design overlap each other, together creating better digital experiences for all users regardless of their abilities, skills, background, or age, or whether they’re living with a disability or experiencing temporary or situational disabilities.

If we want to design truly accessible digital interfaces and products, we need to view accessibility not as a privilege, but a right. We still live in a world where inclusivity and accessibility aren’t always advocated for in public spaces or workplaces. Championing them in digital design is a step towards a more equal and inclusive digital world, where everyone can feel supported and able to participate in enjoying digital content without barriers.

Written by

Surej is experienced in digital media, content creation, publishing and illustration. Surej has previously worked with NAPWHA (the National Association of People Living With HIV in Australia) to design the rollout of their self testing kit, amongst other organisations in the purpose-driven space.

Our Melbourne and Mornington Peninsula studios are open 9am – 5pm Monday to Friday. If you’re a brand in the business of doing good, we’d love to hear from you.

MARKETING SERVICES
Contact us

GENERAL ENQUIRIES
hello@youngfolks.com.au

0492 883 664

MORNINGTON PENINSULA
Studio 3
13-15 Thompson St
Frankston
VIC 3199

MELBOURNE
10-20 Gwynne St
Cremorne
VIC 3121

SOCIAL MEDIA