Technical basics for website accessibility

Web accessibility is vital for ensuring that online information and digital services are as accessible to people with disabilities as they are to anyone else. Just as buildings should be designed with features like wheelchair ramps and clear signage to accommodate diverse needs, websites should be built to be usable by all, regardless of individual abilities. 

In this article, we’ll cover the technical basics of accessible web design and show how making your website more inclusive promotes digital equality and increase your reach to a larger target group.    

What is an ‘accessible website’?  

An accessible website is one that is designed in such a way that all people, regardless of their physical or cognitive abilities, can use it easily. This means it can be used by individuals with visual, hearing, or motor impairments, or other disabilities. 

An inclusive website should be:  

Accessible: Its content and functions should be accessible to all users, including those using aids like screen readers or special input devices.  

Usable: The website should be easy and intuitive to use, without technical or design barriers hindering access. 

Technical basics of accessibility  

Let’s look at practical ways that you can ensure the key elements of your website are accessible to all users. 

Semantic HTML  

Semantic HTML means using the right HTML tags for the content in question so that it is clear to both human readers and assistive technologies such as screen readers. The aim is to clearly identify the context and meaning of the content. For example, headlines (<h1>, <h2>, etc.) should be used to structure the content and convey a clear structure. This helps both users and search engines to understand the content. 

Listen

Lists (<ul>, <ol>) are also important to present several points in a clear and understandable way. If lists are improperly structured, it can lead to confusion, especially for users who rely on screen readers.  

Links should also always be provided with a clear text that describes where the link leads, instead of simply using “click here”. This practice greatly improves the user experience and accessibility. 

Use of ARIA 

ARIA (Accessible Rich Internet Applications) is a collection of attributes applied to HTML elements to improve the accessibility of dynamic content. For example, you can use the aria-label attribute to provide a clear label for interactive elements such as buttons (e.g. CTAs) and links that are not explained by the visible text. With aria-live, you can make dynamic changes on the page, such as updates to messages or forms, accessible to screen readers. 

In addition, the aria-role attribute allows you to define specific roles for elements, e.g. role="button" for a <div> that works like a button. This tells assistive technologies how to interact with the element, which ensures precise navigation and interaction.  

Correct structuring of form elements 

Forms are a central feature of many websites, but they are also a common barrier for people with disabilities. To make forms accessible, it’s important that each field on the form includes a clear, corresponding label.  

For instance, the <label> tag’s for attribute should match the id of the corresponding input field. This connection helps users navigate and identify fields in the form using a keyboard or screen reader. 

Another important point is error handling. If a user makes a mistake while filling out a form, the error message should be clear and state exactly what needs to be corrected. Error messages should be presented in a logical order so that they are easy to follow, including for users using keyboard navigation. 

Accessible media on your website 

Media content, especially videos and audio files, must also be accessible. For videos, subtitles should always be available to provide access for users with hearing impairments. Transcripts are especially helpful for audio content because they provide all spoken text in written form. 

For visual content such as videos or images that communicate important information, it’s important to offer audio descriptions that describe the visual elements. For example, an audio description in a video could explain what is happening in the background or what visual information is currently being shown. 

Responsive design and accessibility  

Responsive website design ensures that a site is optimally displayed on different devices, whether desktops, tablets, or smartphones. Responsive design is important from an aesthetic perspective as well as being central to accessibility.  

With the one.com Website Builder, you can quickly and easily create a website that is responsive and mobile-optimised – without any programming knowledge. 

Mobile design and barrier-free design in harmony  

All content and features of a website should be accessible to mobile users with and without restrictions. 

This includes, for example, the optimisation of touchscreen elements. Buttons and links should be large enough and sufficiently spaced apart to enable easy operation. This is especially important for users with motor impairments.  

In addition, navigation must be as accessible on mobile devices as it is on desktops. All interactive elements should also remain accessible to keyboard users or screen readers. 

Another important aspect is making sure your content adapts dynamically to different screen sizes and user settings. For example, on mobile devices or when users increase text size for better readability, the content should resize without breaking the layout or becoming unreadable. Allowing flexible font scaling ensures that users with visual impairments can adjust text size without sacrificing readability or usability. 

Content scaling and customisation 

Responsive design also means that content is scalable. Flexible layouts and setting widths by percentage instead of fixed pixel sizes help the website adapt smoothly to screen size. 

Image sizes should be optimised so that they load quickly on mobile devices without affecting the user experience. You can easily compress your images with tools like Imagify, which effectively shrink visuals while retaining high quality. 

Alt text for images should also remain accessible in mobile view so that users with visual impairments can grasp the content via screen readers.  

Additionally, it is important that interactive elements such as forms and menus remain accessible on small screens. This is where so-called “hamburger menus” or drop-down menus come in handy, which are easy to use without taking up the entire screen. 

Colours and contrasts  

The colour scheme on a website is a crucial aspect of accessibility. The right choice of colours is particularly important to ensure that the content is easy to read for all users, including people with visual impairments. 

A sufficient contrast between text and background is important for readability. If the contrast is too low, the text becomes difficult to read, especially for those with visual impairments or colour perception difficulties.  

High contrast makes it easy for all users to recognise the text quickly and easily, even in low-light conditions or on mobile devices. 

According to WCAG (Web Content Accessibility Guidelines), the contrast between text and background should be at least 4.5:1 so that it is sufficiently visible to most users. For large text areas or headings (font size of 18 points or 14 points & bold), a minimum value of 3:1 applies.  

Tools for checking colour contrasts  

To ensure that your website meets the recommended contrast requirements, you can use various online tools that check the contrast between text and background. Some of the most popular include:  

• With WebAIM’s Contrast Checker , you can easily measure the contrast between colours and see if your website meets WCAG requirements. 
• TPGi’s Contrast Checker tests the colour contrasts – so you can make sure that they are accessible on your website. 
• Colour Contrast Analyser provides you with a detailed analysis of the contrast between text and background colours. 

Consider colour blindness: practical tips  

About 8 percent of men and 0.5 percent of women suffer from colour blindness. There are different forms of colour blindness which cause difficulty distinguishing certain colours, with red-green colour blindness being the most common. The prevalence of colour blindness is why it’s important to choose colours that are easily distinguishable for all users. 

Practical tips for choosing a colour:  

1. Avoid using only colours for differentiation: For example, if you set a button or warning to be distinguished only by a certain colour, this can cause issues for colourblind users. Combine colours with text, icons, or underlines to make the meaning clear. 

2. Go for contrasting colour combinations: Choose colour combinations that are recognisable even to people with colour blindness. Avoid red and green combinations and instead opt for blue and yellow or blue and orange to offer better contrasts. 

3. Use tools to simulate colour blindness: Tools like Color Oracle allow you to test your website from the perspective of a colourblind user. This helps you to identify and correct problematic colour combinations at an early stage. 

4. Avoid unnecessarily colourful backgrounds: On websites with lots of colours and patterns, it can become difficult to read text. Go for simple, unobtrusive colour backgrounds that don’t overlay the text. 

Keyboard accessibility

Another key part of accessibility is keyboard accessibility. It allows users to navigate a website completely without a mouse, which is especially important for people with motor impairments and blind or visually impaired people who use screen readers. 

Why users can’t always use a mouse 

Many users prefer or need the keyboard as an input method, whether for practical reasons or due to motor impairments. That’s why it’s essential that all interactive elements such as links, buttons and forms are accessible with the keyboard.  

Every website should be designed in such a way that it can be fully navigated through the tab key. The elements must be arranged in a logical order that intuitively guides the user through the content.  

In addition, visual focus indicators should be present to indicate which element is currently active. This structure is also of central importance for screen readers, as they ensure clear orientation and navigation.  

Focus management and tabular navigation 

Focus management refers to controlling the visibility and order of the site focus (the area currently being worked on by a user). Good control of focus provides users with a clear orientation, especially when navigating with the keyboard. If the focus jumps to the next interactive area when the ‘tab’ key is pressed, the focus should always land in a meaningful place and direct the user’s attention to the next logical step. 

Tabular navigation is a frequently used method for navigating through structured content such as tables or forms. You can also use tabular navigation for your website with the one.com Website Builder. 

When using tables, you should make sure that the tab order is meaningful and clearly structured. This allows users to use the keyboard to jump through the rows and columns of a table without losing the overview.  

The same applies to forms, where the tab key allows the user to jump from field to field without having to use the mouse. 

Avoid keyboard navigation blockages 

Pop-ups, modal boxes, and drop-down menus can block keyboard navigation and confuse users. The focus must be directed directly to the pop-up when opening and remain within the dialog until the user closes it with the keyboard, e.g. via the escape key. All interactive elements should be fully accessible with the keyboard to ensure barrier-free use. 

Error prevention and handling  

Good error prevention and handling are vital for an accessible user experience. Errors can quickly lead to frustration, including on sites where users fill out forms or use interactive elements. An accessible website ensures that users with and without disabilities quickly understand what they did wrong and how to fix the error. 

Clear error messages and their placement  

Error messages should be clear, concise, and, above all, clearly visible. A good error message immediately gives the user information about what the problem is and how to fix it – For example, ‘e-mail address missing’ instead of simply ‘input error’.

Error messages should also be placed in a way that they won’t be overlooked by the user. Ideally, they should appear right next to the faulty input field or close by so that the user can quickly fix the error without having to search the page. 

Error messages should also specifically name the error. A message such as “Please enter a valid email address” is clearer than “Error” or “Invalid entry” because the user quickly understands what needs to be changed. 

Real-time validation of forms and understandable hints  

Real-time form validation helps users avoid errors before submitting the form. When typing, the user should know immediately whether an entry is correct or needs to be corrected.  

For example, a text field for an email address could automatically check that the address you entered is the correct format and display an error message if it’s not valid. 

Error messages need to be understandable for all users. Audible feedback for screen reader users, as well as visual cues for all other users, helps ensure that error validation is fully accessible.  

User-friendly error handling for screen readers and keyboard users 

Error handling for screen reader users must be given special consideration. Screen readers read the content of the page aloud and it is important that error messages and notices are presented in a clear and structured way for these users.  

For a screen reader to correctly recognise and read the error messages, they should be marked as live regions. This ensures that the error message is read out immediately without the user having to click on the input field.  

For keyboard users, it’s equally important that errors are easy to find and fix. When an error occurs, the focus should automatically move to the faulty field, so that the user can immediately see where to fix the error. Tab navigation should be set to focus on the first error field after a form is submitted for efficient troubleshooting. 

Another important aspect is to avoid blockages that prevent navigation. If an error occurs, the user shouldn’t be prevented from correcting the error by first having to close a pop-up or click on a button. 

Test your website for accessibility  

Ensuring the accessibility of a website is a continuous process that requires regular testing. Only through thorough checks and audits can you ensure that your website is truly accessible to all users, regardless of limitations. 

Accessibility checker tools  

There are a variety of tools and techniques available to help you check your website’s accessibility. Screen readers are an indispensable testing tool to ensure that the content of your page is read correctly to blind or visually impaired users.  

Some of the most popular screen readers include NVDA, JAWS, and VoiceOver (for macOS and iOS). Use this to ensure that the navigation structure and content are understandable and interpreted correctly by a screen reader. 

Manual testing and user testing with people with disabilities 

While automated tools are helpful, they can never capture all accessibility issues related to how people with disabilities actually use the website, so manual testing is essential. This includes testing keyboard navigation, checking error messages, and testing interactive elements such as forms and buttons. 

User testing with real people with disabilities is the most effective way to ensure that your website is fully accessible. People with different disabilities – such as visual impairments, motor impairments or cognitive impairments – can provide valuable feedback on how they interact with the website and what obstacles they experience when navigating or using the website. These tests help identify vulnerabilities that are not detected by automated tools. 

Regular audits and the importance of feedback  

The accessibility of a website is not a one-time test. Rather, it should be checked regularly. Regular audits are necessary to ensure that the website remains accessible with future updates and changes. An audit should be conducted at least once a year, but ideally after each major change to the website to ensure that no new barriers are created. 

Feedback from users is also crucial. For example, offer a feedback option for your users so that you receive valuable information on how the website is used from the perspective of people with disabilities. 

Related resources  

For a deeper examination of technical accessibility, there are numerous valuable tools, guides and communities that can support you in the implementation:  

Useful tools: 

• Axe Accessibility Checker is a widely used tool for automated accessibility testing that identifies common errors and offers suggested solutions.  

• Google’s open-source tool, Lighthouse,  is used to check website accessibility, performance, and SEO. It provides detailed reports and suggestions for improvement.  

• WAVE Web Accessibility Tool is another web page accessibility analysis tool that shows visual cues for errors.  

Guides and documentation: 

• The Web Content Accessibility Guidelines (WCAG) summarise the most important principles and techniques for accessible web design.  

• The MDN Web Docs are a comprehensive collection of resources and tutorials on HTML, ARIA, CSS, and more, with a special focus on accessibility.  

• The WebAIM organisation provides valuable guidance, tutorials, and resources on web accessibility.  

Communities and forums: 

• A11Y Project is a community of web developers, designers, and accessibility experts dedicated to the topic of A11Y (Accessibility) and regularly offers new content and discussions.  

• Stack Overflow’s developer community offers many helpful answers to accessibility questions. Just search for “accessibility” there.  

• The accessibility community on Twitter uses the hashtag #a11y (short for Accessibility) to share discussions and resources.

With these resources, you can deepen your knowledge of technical accessibility and ensure that your website meets the best standards.  

Accessibility for your website 

The technical implementation of accessibility for your website is essential to ensure an inclusive web experience for all users. With the right tools, a clear structure, and continuous review, you can ensure that your website is accessible to people with different needs. Besides being a legal requirement in many places, accessibility is an important measure to improve the user experience and reach a wider target group.