Illustration einer Frau mit Brille und grauen Haaren in einem Rollstuhl, die mit einem Laptop arbeitet | PESCHKE Wien
Accessible design: Best practices for web and digital products 

Accessibility is not just for physical products and people with wheelchairs: Our lives strongly depend on digital products such as apps, websites and various interfaces. To ensure they can be used by people with visual, hearing and other impairments too, we need digital accessibility. This benefits us all: If the usability of a digital product is optimised for people with special needs, it is simultaneously optimised for everyone.

This article will cover what exactly digital accessibility is, how to achieve it and why it is essential for business owners:

From exclusion to inclusion

From exclusion to separation to integration to inclusion: Only the latter state is suitable for true accessibility, which can only be achieved by equal and active participation of everyone in society.

  1. Exclusion: Means that anyone who deviates from the ‘norm’ is marginalised and denied equal participation. Example: A child with a disability is directly or indirectly denied access to education in any form.
  2. Segregation: Describes a slightly less extreme form of exclusion. Although those affected can participate in certain areas of life, they are still excluded from most of them. Example: A child with a disability is provided education, but in a separate environment for children with disabilities – thereby isolated from students without disabilities.
  3. Integration: Means being part of society and belonging to a group – but it requires the person who deviates from the ‘norm’ to adapt. Example: A child with a disability is taught in the same classroom as children without disabilities, but the lessons do not take the needs of the disabled child into account. They only receive support, if that.
  4. Inclusion: Full inclusion of everyone requires an adaptation of the environment to all people and their needs. Each individual is therefore an equal part of society and can participate as much as everyone else. Example: Classrooms are accessible for children in wheelchairs and autistic children can join lessons via video transmission to avoid being socially overwhelmed.

More about disability and inclusion here »

Accessibility for inclusion

Inclusive design for all situations

Accessibility barriers of a product can be manifold. They can affect sight, touch, hearing and speech. Barriers can furthermore be permanent, temporary or situational. These different types of barriers all need to be overcome with appropriate designs.

This highlights why accessible design is important for all of us: Not only people with permanent disabilities depend on it. Throughout life, each and every one of us will find themselves in situations where we struggle to use digital products. For example, around 8% of the adult population in Germany have an accident every year » that requires medical attention. Depending on the type of injury, e.g. a broken arm, operating a smartphone or laptop may be more difficult. The same applies to parents who have to carry children on their arm, people with temporary eye conditions and so on.

Legal requirements for digital accessibility

Accessibility is essential for the lives of disabled people in every respect. Accordingly, in Austria, the federal government is obliged under the Web Accessibility Act » to make government websites and apps accessible in order to provide unrestricted access for all users.

But the private sector also has an obligation under the Federal Disability Equality Act » to enable people with special needs to participate equally in society.

From June 2025, the European Accessibility Act » will also come into force, obliging public transport providers, banks and various state institutions to ensure accessibility. The same applies to private companies that offer digital products and services within the EU (eBooks, banking, telephone services, etc.) and have a certain number of employees or annual turnover. The only exceptions are NGOs, schools, public broadcasters, micro-enterprises, etc. Inclusive concepts and principles will become standard with the EU-wide law and non-compliance will be fined. It is therefore a good idea to start with inclusive designs now, as it is a recognised fact that two years is a short amount of time for systemic change ».

A little experiment

Many providers of digital products are not yet aware of exactly what needs to be considered for accessible design. Try calling up your favourite shopping website or similar and try to navigate it without a mouse and purely by using the keyboard. Not so easy, is it? Fortunately, there are many accessibility solutions just waiting to be implemented.

Digital accessibility: How does it work?

Barriers are often thought of as the physical kind, such as a non-existent lift or a defective escalator, which present an unsurmountable obstacle for wheelchair users, parents with pushchairs or the elderly.

However, accessibility is an equally important aspect of digital products, as accessibility can be hindered by various circumstances. Operating an app without hands or eyesight is anything but easy in most cases. But even minor limitations such as colour vision deficiencies can make it difficult to use digital products if the colour contrast between the background and the text is too low. It’s a bit like trying to work on a laptop outside in bright sunshine: You can hardly see anything on the screen.

Luckily, there are plenty of methods and tools that can be used to ensure that aspects such as colours, font sizes, contrasts and structure are suitable for all users. At which point an app or website counts as accessible and to what extent it needs to be optimised is defined by the WCAG standard – an established guideline for digital accessibility.

 

The WCAG standard for accessibility

The Web Content Accessibility Guidelines (WCAG) are a web standard that aims to ensure the accessibility and usability of websites, non-web documents and software for people with disabilities. In many countries around the world, these guidelines even form the basis for legal requirements » for accessible design.

The WCAG are based on four principles:

  1. Perceivable: Information and other components of the user interface must be presented in a way that all users can perceive them.
  2. Operable: The components of the user interface, including the navigation, must be operable.
  3. Understandable: Information and operation of the user interface must be understandable.
  4. Robust: The content of the user interface must be robust enough so they can be interpreted by the majority of users (including assistive technologies).

In addition to these general principles, there are 13 guidelines and 78 success criteria. The latter offer concrete instructions for accessible implementation. These instructions can be read in detail here ».

There are different versions and levels of the WCAG, of which only WCAG 2.1 with level AA is the legal requirement. Of course, digital product providers can choose to optimise to higher levels, but there is no obligation to do so.

To avoid getting lost in details, we summarised the most important aspects and principles of digital accessibility in this article while focussing mainly on visual design aspects. It is important to note, however, that around 80% of digital accessibility depends on accessible programming, which our development partners reliably take care of. The technical aspects of accessible implementation build the foundation that visual design aspects add onto.

 

 

The role of colours

Blindness is not the only obstacle when it comes to using displays – colour blindness and colour vision deficiencies can also stand in the way of interpreting digital content. Almost 10% of the population is affected by colour vision deficiencies »; in Austria, that is almost 900,000 people. However, total colour blindness affects ‘only’ 1 in 100,000 people ». The following colour vision deficiencies are much more common: red-green deficiency (around 8% of all men and 0.5% of all women in Austria and Germany are affected), red-green blindness and blue deficiency.

How limiting colours can be is highlighted by the following diagrams: The first comparison shows unsuitable colours in original view, as well as representations of the same diagram as people with different types of colour blindness would see them. The second comparison shows the same principle, but with suitable colours. It quickly becomes clear how difficult it can be to differentiate and correctly interpret information if you perceive colours differently from the majority of the population, and how this can be avoided by choosing suitable colours.

By the way, there are numerous colour palettes and guidlines online for choosing suitable colour combinations, such as this one ».

Colour comparison
Unsuitable colour combinations
View with green blindness
Close
View with green blindness
View with red blindness
Close
View with red blindness
View with blue blindness
Close
View with blue blindness
View with colour blindness
Close
View with colour blindness
Colour comparison
Suitable colour combinations
View with green blindness
Close
View with green blindness
View with red blindness
Close
View with red blindness
View with blue blindness
Close
View with blue blindness
View with colour blindness
Close
View with colour blindness
Suitable colour choice for colour blindness
Additional labelling etc. is needed for colour-blind people for clear differentiation
Additional labelling etc. is needed for colour-blind people for clear differentiation

Contrast: Harmonising font size, colours and backgrounds

Not only the right colours are important, but also how the background colour and font colour match, how large the font is, whether texts are placed on strongly coloured images, etc. The essence is that contrasts must be strong enough so that everyone can easily read the text.

The ratios required for adequate contrast can be found in the WCAGs:

  • For large fonts, WCAG 2.0 specifies a contrast of at least 3:1 at level AA and a contrast of at least 4.5:1 at level AAA.
  • For normal-sized fonts, WCAG 2.0 specifies a contrast of at least 4.5:1 at level AA and a contrast of at least 7:1 at level AAA.
  • For graphic objects and elements of a user interface, WCAG 2.1 specifies a contrast of at least 3:1 at level AA.
Contrast comparison for accessible design

Avoiding colours altogether: Patterns and shapes

You don’t have to rely purely on contrasts and colours. The combination with patterns and shapes » is ideal for visualising content even more clearly. Bar charts can be filled with circles, squares, lines and other symbols (the width of the bars must be slightly larger than usual though to make the patterns recognisable) – see example charts below. Patterns can of course be enhanced with colours too.

Redundant encoding to cover it all

As colours, shapes, symbols and contrasts all help to absorb information, they can be combined. This so-called ‘redundant encoding’ is often used on operator displays, where warnings in particular are not signalled purely by colours (i.e. red and yellow), but by combining them with symbols and shapes – including outlines – in order to stand out better against various backgrounds.

There is no room for interpretation when it comes to interfaces and data of critical infrastructures as human lives, the environment and/or significant sums of money are at stake.

Redundant encoding for accessible web design

Accessible to the point: Writing and language

Next to colours, size and contrast, the actual font and how a text is written are also relevant for accessibility.

Font type

Serif fonts (where letters have small “feet”, such as Times New Roman) look elegant and classic, but can be difficult to read. The same applies to narrow fonts, small letters, ornate/decorative fonts, etc. Simple, contemporary fonts (with a large enough font size) are the best choice.

Language & wording

How you express yourself greatly impacts comprehensibility. Scientific articles, technical blog posts and the like may require a certain vocabulary. General advertising texts or information on government websites, however, must be easy to understand. In case they’re not, an additional simplified version must be available.

Short paragraphs and avoiding nested sentences, technical jargon and expressions from foreign languages: All of this already helps improve comprehensibility.

Structure, navigation & screen reader functionality

A clear structure and simple navigation are important for all users so they can successfully use a website or app. Visually impaired people or those who cannot use a mouse or their hands to navigate, however, need assistive technologies such as screen readers to get to where they want to (e.g. a subpage, which they need to access via the menu) or to complete a desired action (such as closing a pop-up).

Tabs, or defined sections with correct titles, as well as correctly coded headings (H1, H2 etc.) are a prerequisite for being able to ‘cross-read’ pages or to have them read out loud correctly; more on accessible page layouts here ». Most people can scroll through a page, recognise headings and sections as such, and open a desired subpage or click a button; with assistive technologies, this is only possible if all sections are correctly structured and titled on a technical level. Otherwise, the entire page content may have to be read by a screen reader (possibly incorrectly) before you finally get to the footer of the page or are able to tell whether the content of the page is even relevant to your search request.

The same applies to formats such as PDFs and Word documents. For example, headings need to be formatted correctly by using Words’ heading styles that automatically mark them as H1, H2 etc. If the headline text is simply changed to bold and the font size increased, screen readers cannot recognize these lines as headings. As a result, they are read out incorrectly and make navigating through the text harder as it is now impossible to jump from one section to the next (as the screen reader would not know where one sections ends and the next one starts).

Media and forms can have barriers too

Media such as images and videos pose further technical challenges that need to be considered for accessibility. The same applies to forms, pop-ups and other elements that require a user to enter information.

To summarise the most important points: Don’t forget to add alt tags for images, add subtitles to videos and add clearly understandable error messages to input fields in contact forms or similar.

Alt tags

While screen readers can read text out loud, images remain hidden for people with visual impairments. This can be solved by adding alt tags to images. Alt tags are alternative texts or image descriptions that are stored in the code as an alt attribute in the format <img src=”image_name_XYZ.jpg” alt=”Image description XYZ” width=”XYZ” height=”XYZ”> to briefly describe the content of the image in text form.

The rule for alt tags is: Only add as much text as necessary to sufficiently describe the content. Preferably in a short sentence, without pointing out that it is an image – this is clear without a declaration.

To describe a photo of a raspberry muffin, neither “raspberry muffin” nor “image of a soft raspberry muffin with icing sugar lying on a red patterned plate; sunflowers in a vase are visible in the background” is a good alt tag. “Soft raspberry muffin with icing sugar” does the job just fine.

Symbol images, decorative icons and logos do not need descriptive text; an empty alt tag (alt=””) is sufficient and is recognised by screen readers, which then automatically skip it.

Error messages & sections

For forms and similar elements that require input, it is important to be able to enter content regardless of any visual or tactile impairments by using assistive technologies. There are some prerequisites for this, such as:

Process steps

It has to be easy to proceed from one input field to the next. Among other things, this requires labelled input fields and a clear technical structure. It is helpful to structure processes such as payment processes by dividing them into logical steps (e.g. first enter the delivery address, then your payment information etc.). This reduces the likelihood of errors and increases clarity. This benefits all users, by the way; nobody wants to plough through never-ending input fields.

Error messages

If incorrect information is provided (“@” is missing in the e-mail address etc.) or if mandatory inputs are missing altogether, this needs to be pointed out right away – by means of clearly understandable text instructions directly where the error has occurred, including an explanation of what needs to be corrected. A simple red frame around the input field is not enough – neither screen readers nor colour-blind people can see it.

Pointing out errors right away is a must. Why? Imagine entering a lot of information, finally being ready to send the form and now being told that an input is missing or wrong. You’ll feel very frustrated having to go back through every single input field to reach the one you need to edit – which is what you have to do when you rely on assistive technology.

 

So much information, and yet the topic is far from exhausted! But let’s end with the most important question for you:

 

Why should accessible design matter to you?

01
Fairness, digital participation & better usability for all

With accessible design, you contribute to giving more people the chance to live an independent life with full access to various digital content. This helps other people and, in the long term, yourself: Eyesight, fine motor skills, hearing, etc. deteriorate with age. On top of that, injuries can happen at any time. Simplifying and optimising your products also improves the user experience » and usability » for all users. The more digital access you and other people have, the more freedom and autonomy we can all enjoy.

02
Successibility: Financial benefits through greater reach & target group

More than just showing altruism and helping with prevention, barrier-free design provides access to your products for a new target group – and a considerable one at that. An example: Of Austria’s ~ 9 million inhabitants, around 1.4 million live with disabilities. Around 3.4% of the total population is affected by blindness or visual deficiencies (see Blindenverband »). Enabling these people to access and use your online shop, booking site or similar will increase your target group and boost your sales. More about successibility here »

03
Legally on the safe side

As mentioned in the beginning, the legal situation is a strong driver for accessibility in the world of digital design. Following the law and avoiding penalties clearly pays off for everyone – especially since the European Accessibility Act already takes effect in 2025.

Let’s go!

Fully accessible design for digital products and services is without a doubt the future; the sooner you start, the better. Early adopters will benefit from a positive reputation and increased profits in addition to being role models, while improving the lives of countless people.

Do you also want to make your digital products accessible or would you like to develop a brand-new product and make sure you meet accessibility criteria? Contact us for a non-binding initial consultation – we look forward to hearing from you and your project idea:

Let's turn your vision into reality!

    Make an appointment right away?

    You’d prefer to contact us directly? Of course! Here’s how to reach us:

    You’d prefer to contact us directly? Of course! Here’s how to reach us:

    Mail: contact@peschke.at

    Tel: +43 1 47 07 922

    Make an appointment right away?

    Sure! Directly book a non-binding initial consultation to share your vision and ideas with us – free of charge, of course. We look forward to meeting you!

    Book appointment Request appointment
    Many thanks for your message!
    Your message has successfully arrived in our inbox. We are thrilled about your interest and will contact you shortly to discuss your project ideas.
    Back to top Arrow