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
Heading structure and table of contents
A clear heading structure improves the comprehensibility and accessibility of content for all users. Headings should be hierarchically and logically structured to enable quick navigation. A table of contents at the top of long pages can help to improve accessibility for users with visual impairments.
By using clear and logical headings, users can better grasp the content and quickly find the information relevant to them. This not only improves accessibility, but also the overall user experience.
Tools and resources for checking accessibility
There are many useful tools and resources for checking and improving accessibility. These help website operators to make their sites more accessible and identify existing barriers. Tools such as WAVE from WebAIM or axe DevTools offer comprehensive analysis functions and detailed reports.
By using these tools, you can ensure that your website complies with current standards and is accessible to all users. They not only offer an analysis, but also specific recommendations for improving accessibility.
Test Screen Reader
Assistive technologies such as screen readers and magnification systems help people with disabilities to use web content. Screen readers enable users to consume website content through voice output or Braille displays. The free screen reader NVDA for Windows can be used to test the accessibility of PDFs.
NVDA can be installed as a portable version, which does not require a complete installation on the system. To adapt NVDA to individual test requirements, the highlighting of the passages read aloud can be activated.
Use the contrast checker
You can check the contrast values of the colors of a website with the help of contrast checker tools, such as WebAIM. The contrast values of the colors of a website can be checked with special tools such as the WebAIM contrast checker.
The program Colour Contrast Analyser is free and can be downloaded for Windows and Mac. The Colour Contrast Analyzer helps to check the contrast ratio of text and background on websites.
Other helpful tools
Automated tools are essential to identify and fix technical barriers on websites. WAVE and axe DevTools are useful tools for checking the accessibility of websites for screen readers. The Axe tool from Deque Systems offers a browser extension for automated accessibility checks.
Lighthouse from Google integrates accessibility tests into web performance analysis. Tenon.io is a paid service that creates detailed reports on accessibility problems on websites.
Practical examples of accessible websites
Some successful examples of how an accessible website should be designed can serve as inspiration. The scope.org.uk site from Scope, a disability equality organization, is a role model for accessibility, especially in keyboard navigation and visual design.
The BBC website offers many small accessibility improvements, including hidden text for screen readers and fluid page layout for different zoom levels. These examples show that it is possible to design accessible websites that are both functional and aesthetically pleasing.
Legal requirements and guidelines
Understanding the legal requirements and guidelines for accessibility is crucial for legal compliance and creating an inclusive digital space. From mid-2025, the Barrierefreiheitsstärkungsgesetz (BFSG) will require websites that offer electronic services to be accessible. Exceptions apply to micro-enterprises with fewer than ten employees and an annual turnover or annual balance sheet total of no more than 2 million euros.
At European level, the European Accessibility Act (EAA) stipulates that all websites in the EU must be accessible by 2025. Website operators should adapt their digital offerings to the EU standards in good time in order to create an inclusive digital environment. Compliance with these regulations is not only a legal requirement, but also an important step towards digital inclusion.
Web Content Accessibility Guidelines (WCAG)
The Web Content Accessibility Guidelines (WCAG) of the World Wide Web Consortium (W3C) provide clear and practicable guidelines for the design of accessible web content, also known as "web accessibility". The WCAG 2.2 of 2023 defines detailed guidelines for designing accessible online content on three levels of accessibility. These guidelines are based on four principles:
Perceptibility
Usability
Comprehensibility
Robustness
These principles form the framework for the creation of accessible websites.
According to WCAG 2.0, the minimum contrast ratio is 3:1 for large text and 4.5:1 for normal text. Compliance with these guidelines ensures that your website remains accessible to a wide user base and meets current standards.
European laws and regulations
The European Accessibility Act (EAA) is a European Union law that aims to ensure that certain products and services are accessible to people with disabilities. The EAA transposes Directive (EU) 2019/882 of the European Parliament on accessibility requirements for products and services into German law.
Website operators should adapt their website to EU standards in good time, create an inclusive digital environment, check and adapt the accessibility of the website and comply with legal requirements. These measures not only contribute to legal compliance, but also to improving the user experience for everyone.
National laws and standards
In Germany, the Disability Equality Act (BGG) and the Barrier-free Information Technology Ordinance (BITV) regulate accessibility on the Internet. The BITV 2.0 is based on the Disability Equality Act (BGG) and regulates the barrier-free design of websites of public bodies in Germany.
The European standard EN 301 549 defines the requirements for digital accessibility, which are also applied in the BITV 2.0 for public bodies in Germany. These provisions ensure that digital services are accessible to all people and contribute to the creation of an inclusive society.
Tips for continuously improving accessibility
The accessibility of a website should be checked regularly, as content and functions can change constantly. Regular WCAG audits are important to ensure that new content on a website remains accessible. User feedback, especially from people with disabilities, is valuable for practical accessibility improvements.
A clear and detailed report on barriers found and recommendations for remediation is crucial for continuous improvement. These measures not only help to ensure accessibility, but also to improve the user experience for everyone.
Training and sensitization of the team
Regular training and awareness-raising for the team helps to raise awareness of accessibility. It is important that employees in an organization are aware of the importance of accessibility and receive regular training as this promotes a shared understanding and commitment to inclusive web design practices.
The training courses include:
Simulations and exercises in which disabilities and barriers are illustrated using concrete examples
Participants have the opportunity to try out assistive technologies on smartphones or computers for themselves
After the training, participants receive presentations and a handout to review and consolidate the content covered.
Summary
Accessibility on the internet is not only a legal obligation, but also an ethical imperative. By implementing alt text, optimized color contrasts and scalable text sizes, you can ensure that your website is accessible to all users. A clear structure and user-friendly navigation improve the user experience and promote inclusion.
In summary, continuous improvement in accessibility can be achieved through regular audits, user feedback and team training. By implementing these measures, you are helping to make the internet a more inclusive place for everyone.
Frequently asked questions
Why is accessibility on the Internet important?
Internet accessibility is important to enable everyone to use digital content regardless of their limitations and to promote inclusion. It contributes to equality.
What are the most common obstacles for visually impaired users on the Internet?
The most common barriers for visually impaired users on the Internet are poor color contrasts, insufficient alternative text and small font sizes. It is therefore important to overcome these barriers in order to improve accessibility.
How can alt texts improve accessibility?
Alt texts improve accessibility by describing the content of images for screen reader users and thus conveying the context of the website. This makes it easier for users with visual impairments to use the website.
Which tools can be used to check accessibility?
You can use tools such as WAVE from WebAIM, axe DevTools and the Color Contrast Analyzer to check and improve accessibility.
What are the legal requirements for accessibility in the EU?
All websites in the EU must be accessible by 2025 in accordance with the European Accessibility Act (EAA).
