Files
rustyip/templates/base.html
T
NetworkCats 991fd289a2 fix: improve accessibility to meet WCAG 2.2 AA/AAA standards
- Remove disruptive alert() on error pages, rely on role="alert" banner
- Add skip navigation link for keyboard users (WCAG 2.4.1)
- Fix heading hierarchy on error page (sr-only status text in h1)
- Add "opens in a new tab" screen reader hint on external links
- Wrap language selector in form with noscript submit button (WCAG 3.2.2)
- Add aria-label to copy-to-clipboard buttons and footer landmarks
- Use h2 for alt-IP section to maintain single h1 per page
- Add persistent underline on links for non-color identification (WCAG 1.4.1)
- Fix footer attribution contrast ratio to ~5.5:1 (WCAG 1.4.3)
- Add aria-busy/role=status loading announcements for skeleton state
- Add translations for new accessibility strings across all 14 locales
- Update integration tests to assert role="alert" instead of alert()
2026-03-22 18:21:29 +08:00

37 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html lang="{{ lang_tag }}" dir="{{ html_dir }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{{ site_domain }}{% endblock %}</title>
{% block head_meta %}{% endblock %}
<link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" href="/static/icons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/static/icons/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
{% block head_preconnect %}{% endblock %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600&display=swap">
{% block head_stylesheets %}{% endblock %}
<link rel="stylesheet" href="/static/style.css?v={{ css_version }}">
{% block head_extra %}{% endblock %}
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
{% block content %}{% endblock %}
</main>
{% block footer %}{% endblock %}
{% block scripts %}{% endblock %}
<noscript>
<input type="checkbox" id="noscript-dismiss" class="noscript-dismiss-checkbox" aria-hidden="true">
<div class="noscript-banner" role="note">
<p>JavaScript is disabled. Some features may not be available.</p>
<label for="noscript-dismiss" class="noscript-close" aria-label="Dismiss">&times;</label>
</div>
</noscript>
</body>
</html>