Accessible Links & Buttons – Checklist: Maximize Your Website Accessibility
Starting June 28, 2025, the Accessibility Strengthening Act (BFSG) will become mandatory. It requires all companies to design their digital offerings accessibly. This includes designing links and buttons on your website so that they are accessible to all users, including people with disabilities. By implementing the Web Content Accessibility Guidelines (WCAG) 2.1, you can ensure your website's accessibility.
🔎 Why Accessible Links & Buttons are Essential for Your Website
Accessible navigation elements like links and buttons enable all users – including those with visual impairments, motor limitations, or cognitive disabilities – to use your website equally.
Your Advantages:
- Legal certainty through compliance with BFSG: Companies that do not design their links and buttons accessibly risk fines and legal warnings.
- Expansion of the target audience: Accessible websites reach people with various disabilities, thereby expanding your customer base.
- Better visibility on Google: Google favors websites that comply with WCAG 2.1 guidelines. This means accessible websites gain better visibility in search engines.
- Optimized User Experience (UX)
✅ Checklist: How to Design Accessible Links & Buttons
1. Accessible Links: Understandable, Visible & Clear
Accessible links should be understandable, easily recognizable, and functional. This allows users to identify and use them without difficulty.
✔ Descriptive link text: Avoid generic phrases like "click here" or "more". Instead, the link text should clearly describe the purpose, e.g., "Read more about the benefits of accessible websites for your company".
✔ Visual emphasis: Links should be highlighted not only by color change but also by underlining, preceding symbols, or bold print to clearly distinguish them from normal text.
✔ Clearly indicate the link target: If a link opens a new page or a document, this should be made clear. For linked documents, it is mandatory to indicate that it is a document.
📌 Example of accessible links:
- ❌ Poor: "Click here to learn more"
- ✅ Good: "Read more about the benefits of accessible websites for your company"
2. Accessible Buttons: User Guidance through Clear Design
An accessible button must be clearly visible, easy to click, and accessible to ensure effective interaction.
✔ Clear, action-oriented text: Buttons should always indicate a clear action, e.g., "Register now" instead of "Submit".
✔ Alternative texts for controls: The function of the element should be clearly named (e.g., "Search") and the designation kept as short as possible.
✔ Sufficient contrast: Ensure the button text has sufficient contrast against the background (at least 4.5:1).
✔ Large, clickable area: Buttons should offer a sufficiently large area to be easily operated with a mouse, keyboard, as well as touchscreen devices.
✔ Visual feedback: Ensure the button provides visual feedback when focused or pressed (e.g., through color change or animations).
📌 Example of accessible buttons:
- ❌ Poor: A button in the same color as the background without text
- ✅ Good: A button with clear labeling like "Go to registration now" and good color contrast to the background
❗ Links and Buttons Not Accessible? Act Now with navable!
Checklist: Accessible Links & Buttons
-
Clear Visual Distinction: ✅ Links & buttons must clearly stand out from the rest of the text.
-
Additional Visual Cues: ✅ Do not use color alone for identification.
-
Unique Link Texts: ✅ Formulate link texts precisely and contextually.
-
Focus Indicators: ✅ Clearly highlight the currently focused element.
-
Sufficient Size & Spacing: ✅ Ensure enough space between clickable elements.
Stay Updated
Get accessibility tips and updates.
Our Top Posts:
- •BFSG: Which Companies Are Affected? Complete Guide 2025
- •BFSG Checklist 2025: WCAG 2.1 for Accessible Websites – Optimization & Implementation
- •BFSG 2025: Avoid Fines up to €100,000 - Compliance Guide
- •Free Accessibility Testing Directly in VS Code with axe DevTools
- •Accessible Navigation & Structure according to BFSG | Checklist & Solutions for Accessible Websites
- •Accessible Colors & Contrasts: WCAG 2.1 Checklist for the Accessibility Strengthening Act (BFSG) 2025
- •Accessible Text Design according to BFSG – Best Practices for Accessible Readability & Better Google Ranking
- •BFSG 2025: Make Your Website Accessible with navable Layover Tool & BFSG Audit
