Deep linking accessibility is rarely discussed, but it affects millions of users. When a screen reader user taps a deep link from an email, they need the app to announce where they landed and what actions are available. When a user with motor impairments opens a deep link landing page, the "Open in App" button needs to be large enough to tap accurately. When a user with cognitive disabilities follows a deep link, the transition from web to app should not be confusing.<\/p>\n\n\n\n
This guide covers how to make your deep linking flows accessible. For banner design that converts, see app banner design best practices<\/a>. For first-time user experience, see designing the first-time user experience<\/a>.<\/p>\n\n\n\n Deep link landing pages must use semantic HTML for screen readers:<\/p>\n\n\n\n Deep link landing pages should meet WCAG 2.1 AA<\/a> standards:<\/p>\n\n\n\n Many deep link pages auto-redirect to the app store or the app. This is problematic for accessibility:<\/p>\n\n\n\n Apple's native Smart App Banner is accessible by default. It appears at the top of the page, is announced by VoiceOver, and can be dismissed with standard gestures.<\/p>\n\n\n\n Custom banners must be manually made accessible:<\/p>\n\n\n\n Key accessibility requirements for custom banners:<\/p>\n\n\n\n When a deep link opens the app to a specific screen, set the accessibility focus correctly:<\/p>\n\n\n\n When a deep link fails (content not found, access denied, expired), the error must be accessible:<\/p>\n\n\n\n Deep link text (in emails, messages, notifications) should be descriptive:<\/p>\n\n\n\n Screen readers often list all links on a page. "Click here" repeated five times is unusable.<\/p>\n\n\n\n QR codes are visual and inaccessible to blind and low-vision users. Always provide an alternative:<\/p>\n\n\n\n Deep link transitions (web to app, screen animations) should respect the user's reduced motion preference:<\/p>\n\n\n\n Tolinku<\/a> generates web fallback pages and smart banners<\/a> that follow accessibility best practices. Smart banners include proper ARIA labels, dismissible controls, and sufficient contrast ratios. Configure your deep links in the Tolinku dashboard<\/a>.<\/p>\n\n\n\nWeb Fallback Page Accessibility<\/h2>\n\n\n\n
Semantic HTML<\/h3>\n\n\n\n
<!-- Accessible deep link landing page -->\n<main role="main" aria-label="App content">\n <h1>Product Name<\/h1>\n <p>Description of the product the user was trying to view.<\/p>\n\n <nav aria-label="App actions">\n <a href="https:\/\/links.yourapp.com\/products\/shoes"\n role="button"\n aria-label="Open Product Name in YourApp"\n class="cta-button">\n Open in App\n <\/a>\n\n <a href="https:\/\/apps.apple.com\/app\/yourapp\/id123"\n aria-label="Download YourApp from the App Store">\n Download on the App Store\n <\/a>\n\n <a href="https:\/\/play.google.com\/store\/apps\/details?id=com.yourapp"\n aria-label="Get YourApp on Google Play">\n Get it on Google Play\n <\/a>\n <\/nav>\n<\/main>\n<\/code><\/pre>\n\n\n\nWCAG Compliance<\/h3>\n\n\n\n
\n\n
\n Criterion<\/th>\n Requirement<\/th>\n Deep Link Application<\/th>\n<\/tr>\n<\/thead>\n \n 1.1.1 Non-text content<\/td>\n Alt text for images<\/td>\n App icons, screenshots need alt text<\/td>\n<\/tr>\n \n 1.4.3 Contrast<\/td>\n 4.5:1 minimum<\/td>\n CTA buttons must have sufficient contrast<\/td>\n<\/tr>\n \n 2.4.4 Link purpose<\/td>\n Clear from context<\/td>\n "Open in App" not just "Open"<\/td>\n<\/tr>\n \n 2.5.5 Target size<\/td>\n 44×44 CSS pixels minimum<\/td>\n All touch targets on mobile<\/td>\n<\/tr>\n \n 3.2.5 Change on request<\/td>\n No unexpected context changes<\/td>\n Auto-redirect must be user-initiated<\/td>\n<\/tr>\n<\/tbody><\/table><\/figure>\n\n\n\n Auto-Redirect Accessibility<\/h3>\n\n\n\n
\/\/ BAD: immediate redirect with no user control\nwindow.location.href = appStoreUrl;\n\n\/\/ GOOD: give users control\nfunction handleDeepLink() {\n \/\/ Show the content page first\n showContent();\n\n \/\/ Offer a clear, accessible button for the redirect\n const button = document.getElementById('openInApp');\n button.focus(); \/\/ Move focus to the CTA\n\n \/\/ Announce to screen readers\n const liveRegion = document.getElementById('status');\n liveRegion.textContent = 'You can open this content in the app or continue viewing on the web.';\n}\n<\/code><\/pre>\n\n\n\n<div id="status" role="status" aria-live="polite"><\/div>\n\n<button id="openInApp"\n aria-label="Open this product in the YourApp mobile application">\n Open in App\n<\/button>\n\n<p>Or continue viewing below<\/p>\n<\/code><\/pre>\n\n\n\nSmart Banner Accessibility<\/h2>\n\n\n\n
Native Smart Banners<\/h3>\n\n\n\n
Custom Smart Banners<\/h3>\n\n\n\n
<div role="complementary"\n aria-label="App promotion banner"\n class="smart-banner"\n id="smartBanner">\n <img src="\/icon.png" alt="YourApp icon" width="40" height="40">\n <div>\n <strong>YourApp<\/strong>\n <span>Free on the App Store<\/span>\n <\/div>\n <a href="https:\/\/links.yourapp.com\/current-page"\n role="button"\n aria-label="Open this page in the YourApp mobile app">\n Open\n <\/a>\n <button aria-label="Dismiss app promotion banner"\n onclick="dismissBanner()">\n <span aria-hidden="true">×<\/span>\n <\/button>\n<\/div>\n<\/code><\/pre>\n\n\n\n\n
In-App Accessibility After Deep Link<\/h2>\n\n\n\n
Focus Management<\/h3>\n\n\n\n
\/\/ iOS: Set VoiceOver focus after deep link navigation\noverride func viewDidAppear(_ animated: Bool) {\n super.viewDidAppear(animated)\n\n if isDeepLinkNavigation {\n \/\/ Announce the destination\n UIAccessibility.post(\n notification: .screenChanged,\n argument: "Viewing \\(product.name). \\(product.price)"\n )\n\n \/\/ Focus on the main content\n DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {\n UIAccessibility.post(notification: .layoutChanged, argument: self.titleLabel)\n }\n }\n}\n<\/code><\/pre>\n\n\n\n\/\/ Android: Set TalkBack focus after deep link navigation\noverride fun onResume() {\n super.onResume()\n\n if (isFromDeepLink) {\n \/\/ Announce the destination\n titleView.announceForAccessibility(\n "Viewing ${product.name}. Price: ${product.price}"\n )\n\n \/\/ Focus on the main content\n titleView.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED)\n }\n}\n<\/code><\/pre>\n\n\n\nError State Accessibility<\/h3>\n\n\n\n
func showDeepLinkError(_ error: DeepLinkError) {\n let message: String\n switch error {\n case .notFound:\n message = "The content you're looking for is no longer available."\n case .accessDenied:\n message = "You don't have permission to view this content."\n case .expired:\n message = "This link has expired."\n }\n\n \/\/ Display visually\n errorLabel.text = message\n\n \/\/ Announce to screen readers\n UIAccessibility.post(notification: .announcement, argument: message)\n\n \/\/ Provide an accessible action to recover\n let homeButton = UIButton()\n homeButton.setTitle("Go to Home", for: .normal)\n homeButton.accessibilityLabel = "Go to the app home screen"\n homeButton.accessibilityHint = "The content from your link was not available"\n}\n<\/code><\/pre>\n\n\n\nInclusive Link Design<\/h2>\n\n\n\n
Link Text<\/h3>\n\n\n\n
BAD: "Click here: https:\/\/yourapp.com\/dl\/abc123"\nBAD: "Open link"\nGOOD: "View your order details"\nGOOD: "Join the team project"\n<\/code><\/pre>\n\n\n\nQR Code Accessibility<\/h3>\n\n\n\n
<div class="qr-section">\n <img src="\/qr-code.png"\n alt="QR code linking to yourapp.com\/menu\/summer-2026"\n width="200" height="200">\n <p>Scan the QR code or visit:\n <a href="https:\/\/yourapp.com\/menu\/summer-2026">yourapp.com\/menu\/summer-2026<\/a>\n <\/p>\n<\/div>\n<\/code><\/pre>\n\n\n\nReduced Motion<\/h3>\n\n\n\n
func animateDeepLinkTransition() {\n if UIAccessibility.isReduceMotionEnabled {\n \/\/ Skip animation, show content immediately\n contentView.alpha = 1\n } else {\n UIView.animate(withDuration: 0.3) {\n self.contentView.alpha = 1\n }\n }\n}\n<\/code><\/pre>\n\n\n\n\/* Web fallback page: respect prefers-reduced-motion *\/\n@media (prefers-reduced-motion: reduce) {\n .deep-link-transition {\n animation: none;\n transition: none;\n }\n}\n<\/code><\/pre>\n\n\n\nTesting Deep Link Accessibility<\/h2>\n\n\n\n
Manual Testing Checklist<\/h3>\n\n\n\n
\n
Automated Testing<\/h3>\n\n\n\n
\/\/ Use axe-core to test web fallback pages\nconst axe = require('axe-core');\n\ndescribe('Deep link landing page accessibility', () => {\n it('has no critical violations', async () => {\n const results = await axe.run(document);\n const critical = results.violations.filter(v => v.impact === 'critical');\n expect(critical).toHaveLength(0);\n });\n});\n<\/code><\/pre>\n\n\n\nTolinku and Accessibility<\/h2>\n\n\n\n