blog single

to blog archive

How to make your website accessible for the visually impaired: Tips & Tools

13

heinrich

contributing image with wheelchair and crossed-out eye symbol

Would you like to make your website more accessible for visually impaired users? In this article, you will learn how to make your website accessible for visually impaired users, why accessibility is important and what specific measures you can take. From optimizing color contrasts to implementing alt text, we'll show you how to improve your website for all users.

The most important facts at a glance

  • Accessibility on the internet improves the user experience, optimizes search engine rankings and reaches a broader target group. Around 30 % of people in Germany require accessible internet measures.

  • Technical measures such as the optimization of color contrasts, the implementation of alt texts for images and the use of scalable text sizes contribute significantly to accessibility for visually impaired users.

  • Compliance with legal regulations, such as the European Accessibility Act and the Web Content Accessibility Guidelines (WCAG), is crucial for creating an inclusive digital space, especially in light of the requirements that will apply from mid-2025.

The importance of accessibility on the Internet

Internet accessibility means that websites and mobile applications are designed in such a way that they can be used without restriction by all people, especially people with disabilities. This includes not only visually impaired users, but also older people, non-native speakers and people with concentration difficulties. Websites should be accessible to all users, regardless of personal limitations or technical abilities. Everyone should have the same opportunity to use websites.

Creating an accessible website has many advantages:

  • Improving the user experience

  • Improvement of search engine optimization

  • Reach a larger target group

  • Time and cost savings by considering accessibility from the very beginning of the design and development process

It is more advantageous to consider accessibility from the very beginning of the design and development process, as this saves time and costs compared to subsequent adaptations.

Around 30 % of people in Germany require accessible internet measures in order to make full use of online services. This underlines the importance of accessibility in the digital space. If people with impairments and limitations are taken into account at all stages of development, obstacles can be avoided from the outset. This contributes to an inclusive environment. The Internet has great potential as an audiovisual and interactive medium. People with disabilities can particularly benefit from this.

Challenges for the visually impaired on the Internet

Visually impaired users encounter numerous obstacles on the Internet. One common problem is poor color contrast, which makes it difficult to read text. Light colors on light backgrounds are often illegible and pose a major challenge. Displays with small fonts and low-contrast symbols further exacerbate the problem.

Another obstacle is insufficient alternative text for images that cannot be read by screen readers. Incorrectly completed forms, which often only indicate errors with colored markings, are also difficult for visually impaired users to recognize. These problems show how important it is to design websites in such a way that they are accessible to all users.

Technical measures to improve accessibility

There are various technical measures that can improve accessibility for the visually impaired. One of the most important is to check and optimize the color contrasts. High color contrasts between text and background are necessary to ensure readability for all users. Too low a contrast ratio is the most common problem in accessibility tests.

Other measures include the implementation of alt texts for images and scalable text sizes. Alt texts are essential for blind users as they convey the meaning and purpose of graphics. Scalable text sizes ensure that texts remain legible for all users, regardless of the screen size used.

Alt texts for images

Alt texts are irreplaceable for blind people in order to recognize the appearance and context of a website. They convey the content of images in the context of the website and help screen reader users to better understand the content. It is important that the content or function of the image is described for screen reader users.

Effective alt texts should briefly and precisely reflect the content of the image, without unnecessary details. For example, an alt text for an image of a dog could read: "A brown dog playing in the park". This gives blind users a clear idea of the image and the context on the website.

Optimize color contrasts

High color contrasts facilitate readability and accommodate a large number of people with impaired vision. It is important that the color contrasts on the website are sufficient. This makes it easier for visually impaired people to read the content. For WCAG Level AA, the color contrast between text and background should be at least 4.5:1.

For large text (18 point and above), a contrast ratio of 3:1 is sufficient for AA compliance. By using tools such as the WebAIM Contrast Checker, you can ensure that your website complies with the required contrast ratios.

Scalable text sizes

Scalable text sizes are an essential part of accessibility for visually impaired users. One way to implement this is to use relative units of measurement such as 'em' or 'rem' instead of fixed units such as 'px'. An example of using CSS for scalable text size: 'body { font-size: 100%; }' and 'h1 { font-size: 2em; }'.

It is important to test the website on different devices to ensure that the text sizes actually vary and remain legible. This ensures that all users, regardless of their device, have a good readability of the texts.

User-friendly navigation and structure

User-friendly navigation and structure are crucial for the accessibility of a website. The correct use of HTML elements is of great importance here. A clear and logical structure not only helps visually impaired users to find their way around better, but also improves the overall user experience.

Keyboard navigation is particularly important for users with motor impairments. All functions of the website should be operable with the keyboard to ensure that no one is dependent on a mouse. This includes navigation between links, buttons and form fields.

Enable keyboard navigation

Keyboard navigation is essential for accessibility as it ensures that users are not dependent on the mouse. All functions of a website must be accessible via the keyboard to support users with motor impairments. A keyboard-compatible website must allow users to navigate between links, buttons and form fields using the keyboard.

The keyboard focus shows the current area on a page by highlighting the active element. This helps users who have difficulty using the mouse to find their way around the website and use all the functions.

Correct use of HTML elements

A lack of semantic coding in HTML can lead to assistive technologies not processing content correctly. A fundamental requirement for accessibility is the use of valid and semantically correct markup. HTML elements should have clearly defined names, roles and values according to the specifications.

The correct use of HTML elements helps to make the structure and content of a website accessible for screen readers and other assistive technologies. Elements such as

,

heinrich taitl

my name is heinrich taitl. as an expert in accessible digital marketing with over 35 years of self-employment, i have first-hand knowledge of the challenges and needs of companies. i always look at the overall situation of a company and use pragmatic solutions to achieve the agreed goals of our small and medium-sized customers.

more on the topic accessibility

contribution picture with wheelchair and cube symbols to symbolize 10 principles

10 basic principles for accessible web design: How to reach all users!

Accessibility is fundamental to inclusive web design. This guide takes you through the "10 basic principles ...
contribution graphic with wheelchair and paragraph symbols

Accessibility on the web: The most important laws and regulations at a glance

Digital accessibility is regulated by law and affects all website operators. This article is about ...
graphic with wheelchair and question mark why accessibility is important.

What is accessible web design and why is it important? - An essential guide for all web designers.

What is accessible web design and why is it important? Accessible web design is essential to make the ...
accessible websites from digital now marketing

accessible websites for SMEs in austria

the topic of accessibility on the web/internet is still a book with ...
This is what an accessibility audit looks like for us

accessibility audit process

in brief: below we provide a structured overview of the process of an accessibility audit with ...