How to Make Your Website Accessible

The internet has long become a central access point for information, services, and communication. Yet, while browsing the web is second nature for many of us, people with disabilities often encounter invisible barriers: missing alt texts for images, unclear navigation structures, or forms that cannot be used without a mouse.

Accessible websites can be used by everyone, regardless of physical or technical limitations. This is not just about ethical responsibility or improving the user experience—it also involves concrete legal requirements. The Accessibility Strengthening Act (BFSG), which comes into effect in June 2025, obligates private companies to make their digital offerings accessible.

In this article, we’ll guide you step by step on how to make your website accessible. For more in-depth information about the legal framework, we recommend our article on digital accessibility.

---

Practical Steps for an Accessible Website

Designing an accessible website may seem complex at first glance, but when broken down into individual steps, it becomes clear: many measures benefit not only users but also your search engine optimization. Below, we’ll show you how to implement each important measure.

Alt Texts for Images – Creating Accessibility Through Words

Images are an essential part of any website—they make content more engaging and easier to understand. But what happens if an image isn’t visible to someone? That’s where alt texts come into play. They describe what’s shown in an image. For example, screen readers read alt texts aloud; if there’s no alt text, the image is simply skipped. The same applies to slow internet connections: if the image doesn’t load, the alt text is displayed instead. Additionally, alt texts are a powerful tool to make your website more attractive to search engines, as bots operate text-based and cannot see your images.

A good alt text is clear, precise, and descriptive. It should convey the essence of an image without adding unnecessary details. It should also be no more than 125 characters long—some popular screen readers cut off at this point. We recommend keeping it between 70-100 characters. Here are some tips on how to craft effective alt texts, with concrete examples:

• Describe the content of the image: The alt text should accurately describe what is in the image, making it understandable without visual support.
  • Good Alt Text: “A white coffee cup sits on a rustic wooden table.”
  • Poor Alt Text: “Cup.” (too short)
  • Poor Alt Text: “Image of a coffee cup on a table.” (unnecessary mention of “image of”)
• Keep it concise: One to two short sentences are enough to describe the content of an image.
  • Good Alt Text: “Five people collaborating at a table in a modern office.”
  • Poor Alt Text: “A group of people who might be in an office or some other room, probably working, but it could also be a meeting.” (too long and uncertain)
• Focus on the essentials: What is the main message of the image? Exclude irrelevant details.
  • Good Alt Text: “A red car drives on a winding mountain road.”
  • Poor Alt Text: “A car, a mountain road, trees, sky, and a sun on the horizon.” (too many unnecessary details)
• Avoid keyword stuffing: Alt texts are not meant to be overloaded with keywords. They should sound helpful and natural.
  • Good Alt Text: “A couple hiking through a green landscape with mountains in the background.”
  • Poor Alt Text: “Travel couple hiking nature mountains background vacation hiking tour.” (unnatural and spammy)

Optimizing Color Contrast – Making Content Visible for Everyone

Color contrasts are a key component of accessibility and a central aspect of WCAG Level AA. Contrasts ensure that text and graphic elements can be perceived even by people with visual impairments or color blindness. At the same time, a well-thought-out color scheme enhances readability and creates a positive user experience—both of which also benefit your SEO.

WCAG Level AA specifies clear minimum requirements:

• The contrast between text and background should be at least 4.5:1.
• For larger text (18 pt or 14 pt bold), a ratio of 3:1 is sufficient.
• Decorative or purely aesthetic elements are exempt from this rule.

How Are Contrast Ratios Measured?

Contrast ratios such as 4.5:1 or 3:1 describe the difference in brightness between two colors—for example, between text and background. The higher the ratio, the more the text stands out from the background, which is particularly important for people with visual impairments.

The brightness of each color is calculated based on its luminance (perceived brightness), which is derived from the RGB color mix (red, green, blue). The ratio between the two colors is then compared. Fortunately, there are practical online tools and browser extensions that can handle this for us. More on that later.

Contrast Ratios of Common Colors:

• Black (#000000) on White (#FFFFFF):
  Maximum possible contrast ratio: 21:1
• Dark Gray (#333333) on White (#FFFFFF):
  Contrast ratio: 12.6:1 – ideal for text on a light background.
• Light Gray (#AAAAAA) on White (#FFFFFF):
  Contrast ratio: 2.3:1 – too low for body text and difficult to read.
• Blue (#0000FF) on White (#FFFFFF):
  Contrast ratio: 8.6:1 – a good, readable contrast.
• Yellow (#FFFF00) on White (#FFFFFF):
  Contrast ratio: 1.1:1 – far too low! Yellow text on a white background is almost unreadable.
• Red (#FF0000) on Black (#000000):
  Contrast ratio: 5.3:1 – sufficient for text, but beware: red can be difficult to distinguish for people with color blindness.

How to Achieve Optimal Color Contrasts for Your Accessible Website

• Test Your Contrasts: Use tools like the Color Contrast Checker from WebAIM or browser extensions to check the contrasts on your website.
• Choose High-Contrast Colors:
  • Light text (e.g., white) should be placed on a dark background (e.g., dark blue or black) – and vice versa.
  • Avoid color combinations like red-green or blue-purple, which can be difficult for color-blind users to distinguish.
• Use High-Contrast Buttons: Buttons or interactive elements should stand out clearly from the background to ensure they are easily visible.

Headings and Structure – Clear Navigation for Humans and Machines

A clear and logical structure is a cornerstone of accessible websites. It helps people with cognitive impairments or screen reader users navigate content more quickly. At the same time, a clear structure makes the page and its content easier for search engines to understand.

Here are the key steps to effectively structure your website:

• Use HTML Heading Tags Correctly:
  • Each page should have exactly one H1 heading, representing the main title.
  • Use H2 to H6 to organize subheadings in hierarchical order.
  • Do not skip levels: Move from H1 to H2, then to H3—not directly from H1 to H4.
  • Keep headings concise and clear.
• Use Lists and Paragraphs:
  • Break long text blocks into manageable sections.
  • Use bullet points or numbered lists to structure content.
• Offer Jump Links:
  • Allow users to jump directly to relevant content on the page, e.g., through a table of contents or “Back to Top” links.

Keyboard Accessibility – Full Control Without a Mouse

Not all users navigate websites with a mouse. Many—such as people with motor impairments or screen reader users—rely on keyboard navigation. Ensuring that your website is fully operable via keyboard provides these users with unrestricted access. Additionally, there may be situations where a touchpad doesn’t work or a mouse is broken. In these cases, keyboard navigation can offer significant advantages.

• Test Your Website with a Keyboard:
  • Navigate through your site using only the keyboard. Check if all functions are accessible and can be operated logically.
• Ensure All Interactive Elements Are Accessible via the Tab Key:
  • This includes menus, links, buttons, forms, and other interactive content.
  • The order in which elements are navigated using the Tab key should be logical and predictable.
  • Apart from text links in body text, buttons and clickable links must be at least 24 pixels high and wide.
• Use Focus Indicators:
  • Elements selected via keyboard should be clearly highlighted—e.g., with a colored border.
  • You can achieve this with CSS by using the :focus selector.
• Check Pop-ups and Modals:
  • Ensure users can open and close pop-ups and dialog windows using only the keyboard.

Making Forms Accessible – Simple and Inclusive for Everyone

Forms are an essential part of many websites—whether for contact requests, registrations, or online orders. However, forms can quickly become a barrier if they are not accessible. An accessible form ensures that all users can complete it, regardless of their abilities or limitations.

Key Steps to Create Accessible Forms:

• Use Descriptive Labels:
  • Every input field should have an associated label that explains what is expected of the user.
  • Example: Instead of just writing “Name,” use “First and Last Name.”
  • Technically, you can implement labels using the <label> HTML tag.
• Use Placeholders Wisely:
  • Placeholder text (e.g., “Max Mustermann”) can provide additional guidance but should never replace labels.
• Add Error Messages:
  • Clearly indicate when a field has been filled out incorrectly and explain what needs to be corrected.
  • Example: “Please enter a valid email address” is better than just “Error.”
• Ensure Sufficiently Large Click Areas:
  • Buttons and checkboxes should be large enough to be easily clickable—even with a keyboard or touchscreen.
• Check Tab Order:
  • When navigating with the Tab key, fields should be traversed in a logical order.

Making Videos and Multimedia Accessible – Ensuring Content is Available to Everyone

Videos and multimedia content are a key part of modern websites. They make content more dynamic, illustrative, and engaging. However, without accessibility, these media can be out of reach for many users. By implementing the right measures, you can ensure that everyone benefits from your content—regardless of their limitations.

Subtitles and transcripts are not only useful for people with impairments but also for situations like being in a noisy environment, where someone can watch a video but not hear it. Additionally, providing extra text (e.g., transcripts) gives search engines more context to better understand your multimedia content.

Here are some simple measures to make your videos and multimedia accessible:

• Add Subtitles:
  • Include synchronized subtitles in your videos that accurately reflect the spoken text.
  • Use tools like YouTube Studio or professional software to create and edit subtitles.
• Provide Transcripts:
  • A transcript contains the full spoken content of a video or podcast in text form.
  • It should be easy to find and understand, e.g., displayed below the video or offered as a separate download.
• Include Audio Descriptions:
  • An audio description narrates visual elements such as actions, settings, or text displayed in the video.
  • It is added as an additional audio track.
• Use Accessible Video Players:
  • Ensure that your video player is fully operable via keyboard.
  • Choose a player with clearly visible control elements.

Accessible Texts – Clarity and Correct Language for Everyone

Texts are the foundation of any website – and accessible texts ensure that everyone can understand them, both humans and machines. This includes not only using clear and simple language but also correctly declaring the language for search engines and screen readers. This is especially crucial for screen readers—otherwise, a German text might suddenly be read aloud in English.

• Define the Primary Language of the Page:
  • Use the lang attribute in the <html> tag to set the language of the page.
• Mark Multilingual Sections:
  • Apply the lang attribute to individual text sections or quotes in another language. This ensures that quotes, for example, are pronounced correctly (by screen readers).
  • Example:

<p>A quote reads: <span lang="de">"Die einzige Grenze unserer Verwirklichung von morgen sind unsere Zweifel von heute."</span></p>

Accessible Texts Feature Clear and Inclusive Language. Here are some key tips:

• Use short sentences: Long and complex sentence structures make reading and understanding more difficult.
• Choose simple terms: Avoid technical jargon and complicated words. If technical terms are necessary, provide an explanation.
• Structure content logically: Divide texts into paragraphs with clear headings (see above). Use lists to present information clearly.
• Address readers directly: Use “du” or “Sie” to create a clear and personal tone.

Time Management on Websites – Stress-Free Usage for Everyone

Time limits and time-based functions can be challenging for many users. Some booking platforms deliberately create a sense of urgency, with messages like “Your spot is reserved for 15 minutes” to push users into making quick decisions. However, for people with disabilities, such tactics can become barriers. Accessible websites address this by minimizing time pressure and offering options for adjustments.

Here’s how to make time limits accessible and stress-free:

• Allow extensions for time limits: Users should be able to extend a time limit with a single click.
• Provide advance notice of time limits: Clearly indicate how much time users have for a task.
• Avoid unnecessary time limits: Especially for non-critical actions like surveys or orders, time limits are often unnecessary.
• Give warnings before expiration: Notify users in advance when a time limit is about to expire. This allows them to complete their task or extend the time.

No Automatic Content – Giving Back Control

Automatic content, such as videos that play on their own, blinking animations, or automatically refreshing pages, can be frustrating for many users. For individuals with epilepsy, blinking or flashing can lead to sensory overload or even seizures. Here are some best practices to make automatic content accessible:

• Avoid Auto-Playing Videos and Animations:
  • Users should be able to activate content themselves rather than having it start automatically.
  • If a video does play automatically, it should be muted and offer visible control options.
• Provide Control Options:
  • Allow users to pause, stop, or completely disable automatic functions.
  • Example: A slider with changing images should have stop, pause, and next buttons.
• Minimize Blinking Content:
  • Avoid blinking or flashing elements that change faster than three times per second—this aligns with WCAG guidelines and reduces the risk of seizures.
• Do Not Automatically Refresh Pages:
  • If page content must refresh automatically (e.g., live tickers), ensure users can adjust this setting themselves.

Is Your Website Accessible? Tools and Best Practices

An accessible website is the key to an inclusive digital presence – but how can you ensure that all requirements are truly met? Conducting an initial check of your website is essential to identify weaknesses and make your content more accessible. In this section, we’ll show you how to test your website’s accessibility, which tools can assist you, and how to proceed step by step.

Automated Testing Tools

1. WAVE – Web Accessibility Evaluation Tool
   • Analyzes web pages for accessibility issues and highlights them directly on the page.
   • Excellent for identifying problems with alt text, contrast errors, and missing labels.
2. axe Accessibility Checker
   • Browser extension (e.g., for Chrome or Firefox)
   • Provides detailed reports on WCAG violations and suggestions for improvements.
3. Google Lighthouse
   • Integrated into Chrome and checks accessibility along with performance and SEO.
   • Rates the website with an accessibility score.

Specialized Tools for Specific Checks

1. Contrast Checker von WebAIM
   • Checks color contrasts and ensures they meet WCAG standards.
2. Color Oracle
   • Simulates color blindness to ensure your content is visible to everyone.
3. Accessible Color Picker
   • Generates color-safe palettes that comply with WCAG standards.
4. VoiceOver (Mac) und NVDA (Windows)
   • Screen readers that allow you to test how accessible your content is for visually impaired users.

How Accessible Websites Improve Your SEO

Accessible websites not only provide better access for people with disabilities but also offer direct and indirect benefits for search engine optimization (SEO). Here are the key ways accessibility can enhance your SEO performance:

• Improved User Experience (UX): An accessible website is easier to navigate, offers better readability, and provides an enhanced user experience. This increases dwell time and reduces bounce rates—both critical factors for search engine rankings.
• Optimization for Screen Readers: Proper use of alternative text (alt tags) for images benefits screen reader users and helps search engines better understand content, improving image rankings in search results.
• Structured and Understandable Content: Correct use of heading tags (H1, H2, H3, etc.) and semantic HTML makes content easier to understand for both users and search engine crawlers, improving indexing. The same applies to proper language declarations and simply written sentences, which Google and other search engines can interpret more effectively.
• Mobile Optimization: Accessibility promotes responsive design, ensuring the website works seamlessly on mobile devices as well as desktops. This is crucial, as Google prioritizes mobile-first indexing.
• Faster Load Times: Accessible websites often use optimized code and reduce unnecessary elements, which improves loading speeds—a vital ranking factor.
• Keyword Integration in Text and Alt Tags: Accessible design often requires precise, descriptive text that naturally incorporates keywords. This increases keyword relevance and visibility.
• Enhanced Navigation: Clear menus and navigation aids, such as “Skip to Content” links, benefit all users and allow search engine bots to crawl content more effectively.
• Accessible Multimedia Content: Videos and audio files with subtitles, transcripts, and descriptive titles offer additional indexable text for search engines. These can include relevant keywords to boost discoverability.
• Legal Compliance and Trust: An accessible website meets legal requirements (e.g., WCAG 2.1 standards), building trust with users and search engines. Websites with high trustworthiness tend to rank better.
• Broader Audience Reach: By making your website accessible to all users, you reach a larger audience. This leads to increased traffic, social shares, and backlinks, which strengthen your domain authority.

Investing in accessibility means not only fostering inclusion but also achieving sustainable improvements in your SEO strategy.

Accessible Websites as the Standard

A barrier-free website is much more than just a technical standard – it is a sign of respect, professionalism, and foresight. By implementing clear structures, easily readable texts, sufficient contrasts, and properly assigned alternative texts for images, you not only create access for people with disabilities but also enhance the user experience for all visitors to your site. Don’t forget keyboard navigation, subtitles for videos, and a clean, logical page hierarchy. Accessibility also offers tangible benefits: a user-friendly, accessible website is positively evaluated by search engines like Google, which can significantly enhance your search engine optimization.

Fortunately, you don’t have to start from scratch: tools like the WAVE Web Accessibility Evaluation Tool, Google Lighthouse Audit, or the Accessibility Checker from Siteimprove help you identify weaknesses on your website and address them effectively. Additionally, professional digital marketing strategies can support you in making your website not only accessible but also efficient and future-proof.

Web accessibility is not a one-time project but a continuous process. With every step in the right direction, you open your website to more people while simultaneously strengthening your brand and digital presence. Start now and make the internet a little more accessible!