Skip to content

add WCAG 2.1 Level A accessibility #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
realityinspector merged 1 commit into from
Mar 10, 2026
Merged

add WCAG 2.1 Level A accessibility #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 58 additions & 18 deletions templates/marketing/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,28 +261,66 @@
color: var(--tp-gold);
font-weight: 600;
}

/* ── WCAG 2.1 Level A ── */
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: var(--tp-gold);
color: var(--tp-bg);
padding: 0.5rem 1rem;
z-index: 10000;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
}

.skip-link:focus {
top: 0;
}

:focus-visible {
outline: 2px solid var(--tp-gold);
outline-offset: 2px;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>

{% block extra_css %}{% endblock %}
</head>
<body>
<!-- WCAG 2.4.1: Skip navigation -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Labs Banner -->
<div class="labs-banner">
<div class="labs-banner" role="status" aria-label="Alpha status notice">
TIMEPOINT LABS &middot; ALPHA DEMO &middot; NOT A LIVE PRODUCT &middot;
<a href="https://docs.timepointai.com/products/proteus" target="_blank">Read the docs</a>
<a href="https://docs.timepointai.com/products/proteus" target="_blank" rel="noopener noreferrer">Read the docs<span class="sr-only"> (opens in new tab)</span></a>
</div>

<div class="main-content">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg">
<nav class="navbar navbar-expand-lg" aria-label="Main navigation">
<div class="container">
<a class="navbar-brand" href="{{ url_for('marketing.index') }}">
<img src="{{ url_for('static', filename='images/timepoint-glyph.svg') }}" alt="Timepoint" width="32" height="32">
<img src="{{ url_for('static', filename='images/timepoint-glyph.svg') }}" alt="" width="32" height="32" aria-hidden="true">
<span class="brand-wordmark">TIMEPOINT</span>
<span class="brand-divider">/</span>
<span class="brand-divider" aria-hidden="true">/</span>
<span class="brand-product">Proteus</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
Expand All @@ -300,11 +338,11 @@
<a class="nav-link" href="{{ url_for('marketing.whitepaper') }}">Whitepaper</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.timepointai.com/products/proteus" target="_blank">Docs</a>
<a class="nav-link" href="https://docs.timepointai.com/products/proteus" target="_blank" rel="noopener noreferrer">Docs<span class="sr-only"> (opens in new tab)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('marketing.demo') }}">
<i class="fas fa-play-circle me-1"></i> Demo
<i class="fas fa-play-circle me-1" aria-hidden="true"></i> Demo
</a>
</li>
</ul>
Expand All @@ -318,34 +356,36 @@
{% for category, message in messages %}
<div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close notification"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}

<!-- Main Content -->
<main id="main-content">
{% block content %}{% endblock %}
</main>

<!-- Footer -->
<footer class="footer">
<footer class="footer" aria-label="Site footer">
<div class="container text-center">
<div class="mb-3">
<img src="{{ url_for('static', filename='images/timepoint-full-alpha.svg') }}" alt="Timepoint Alpha" height="28">
<img src="{{ url_for('static', filename='images/timepoint-full-alpha.svg') }}" alt="Timepoint AI — Alpha" height="28">
</div>
<p class="mb-2" style="color: var(--text-muted); font-size: 0.85rem;">
Proteus is a <a href="https://docs.timepointai.com/" target="_blank" class="text-decoration-none" style="color: var(--tp-gold);">Timepoint AI</a> Labs project.
Proteus is a <a href="https://docs.timepointai.com/" target="_blank" rel="noopener noreferrer" class="text-decoration-none" style="color: var(--tp-gold);">Timepoint AI<span class="sr-only"> (opens in new tab)</span></a> Labs project.
Open source under MIT.
</p>
<div class="d-flex gap-4 justify-content-center mb-3" style="font-size: 0.85rem;">
<a href="https://github.com/timepointai/proteus" target="_blank" class="text-decoration-none" style="color: var(--text-muted);">
<i class="fab fa-github me-1"></i> GitHub
<a href="https://github.com/timepointai/proteus" target="_blank" rel="noopener noreferrer" class="text-decoration-none" style="color: var(--text-muted);">
<i class="fab fa-github me-1" aria-hidden="true"></i> GitHub<span class="sr-only"> (opens in new tab)</span>
</a>
<a href="https://docs.timepointai.com/" target="_blank" class="text-decoration-none" style="color: var(--text-muted);">
<i class="fas fa-book me-1"></i> Docs
<a href="https://docs.timepointai.com/" target="_blank" rel="noopener noreferrer" class="text-decoration-none" style="color: var(--text-muted);">
<i class="fas fa-book me-1" aria-hidden="true"></i> Docs<span class="sr-only"> (opens in new tab)</span>
</a>
<a href="https://x.com/timaborasu" target="_blank" class="text-decoration-none" style="color: var(--text-muted);">
<i class="fab fa-x-twitter me-1"></i> @timaborasu
<a href="https://x.com/timaborasu" target="_blank" rel="noopener noreferrer" class="text-decoration-none" style="color: var(--text-muted);">
<i class="fab fa-x-twitter me-1" aria-hidden="true"></i> @timaborasu<span class="sr-only"> on X (opens in new tab)</span>
</a>
</div>
<p class="small" style="color: rgba(138, 132, 116, 0.5);">
Expand Down
40 changes: 20 additions & 20 deletions templates/marketing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,8 +322,8 @@ <h1 class="hero-title">
<a href="{{ url_for('marketing.demo') }}" class="btn btn-outline-light btn-lg">
TRY THE DEMO
</a>
<a href="https://github.com/timepointai/proteus" target="_blank" class="btn btn-outline-light btn-lg">
<i class="fab fa-github me-1"></i> VIEW SOURCE
<a href="https://github.com/timepointai/proteus" target="_blank" rel="noopener noreferrer" class="btn btn-outline-light btn-lg">
<i class="fab fa-github me-1" aria-hidden="true"></i> VIEW SOURCE<span class="sr-only"> on GitHub (opens in new tab)</span>
</a>
</div>
</div>
Expand Down Expand Up @@ -503,7 +503,7 @@ <h2 class="display-6 mb-3" style="font-weight: 300; letter-spacing: 1px;">
THE <span class="gradient-text">TIMEPOINT</span> ECOSYSTEM
</h2>
<p style="color: var(--text-muted); margin-bottom: 2.5rem; max-width: 680px;">
Proteus is one piece of <a href="https://docs.timepointai.com/" target="_blank" style="color: var(--tp-gold);">Timepoint AI</a>'s
Proteus is one piece of <a href="https://docs.timepointai.com/" target="_blank" rel="noopener noreferrer" style="color: var(--tp-gold);">Timepoint AI<span class="sr-only"> (opens in new tab)</span></a>'s
open-source infrastructure for temporal reasoning.
It validates predictions against reality &mdash; the scoring layer for Timepoint's rendered futures.
</p>
Expand Down Expand Up @@ -576,24 +576,24 @@ <h2 class="display-6 mb-3" style="font-weight: 300; letter-spacing: 1px;">
<div class="col-md-6 status-col">
<h5 style="color: #00c850;">Built</h5>
<ul class="status-list">
<li><span class="status-check">&#10003;</span> Full market lifecycle: create, predict, resolve, claim</li>
<li><span class="status-check">&#10003;</span> On-chain Levenshtein distance (PredictionMarketV2)</li>
<li><span class="status-check">&#10003;</span> 259+ passing tests (109 contract, 135 unit, 15 integration)</li>
<li><span class="status-check">&#10003;</span> Deployed on BASE Sepolia testnet</li>
<li><span class="status-check">&#10003;</span> Flask web app + admin resolution dashboard</li>
<li><span class="status-check">&#10003;</span> JWT wallet auth (MetaMask) + email OTP</li>
<li><span class="status-check">&#10003;</span> Open source (MIT) at <a href="https://github.com/timepointai/proteus" target="_blank" style="color: var(--tp-gold);">GitHub</a></li>
<li><span class="status-check" aria-hidden="true">&#10003;</span> Full market lifecycle: create, predict, resolve, claim</li>
<li><span class="status-check" aria-hidden="true">&#10003;</span> On-chain Levenshtein distance (PredictionMarketV2)</li>
<li><span class="status-check" aria-hidden="true">&#10003;</span> 259+ passing tests (109 contract, 135 unit, 15 integration)</li>
<li><span class="status-check" aria-hidden="true">&#10003;</span> Deployed on BASE Sepolia testnet</li>
<li><span class="status-check" aria-hidden="true">&#10003;</span> Flask web app + admin resolution dashboard</li>
<li><span class="status-check" aria-hidden="true">&#10003;</span> JWT wallet auth (MetaMask) + email OTP</li>
<li><span class="status-check" aria-hidden="true">&#10003;</span> Open source (MIT) at <a href="https://github.com/timepointai/proteus" target="_blank" rel="noopener noreferrer" style="color: var(--tp-gold);">GitHub<span class="sr-only"> (opens in new tab)</span></a></li>
</ul>
</div>
<div class="col-md-6 status-col">
<h5 style="color: #666;">Not Done Yet</h5>
<ul class="status-list">
<li><span class="status-pending">&ndash;</span> External security audit</li>
<li><span class="status-pending">&ndash;</span> Production wallet integration</li>
<li><span class="status-pending">&ndash;</span> Decentralized oracle resolution</li>
<li><span class="status-pending">&ndash;</span> Mainnet deployment</li>
<li><span class="status-pending">&ndash;</span> Production monitoring</li>
<li><span class="status-pending">&ndash;</span> TDF integration / SNAG-Bench scoring</li>
<li><span class="status-pending" aria-hidden="true">&ndash;</span> External security audit</li>
<li><span class="status-pending" aria-hidden="true">&ndash;</span> Production wallet integration</li>
<li><span class="status-pending" aria-hidden="true">&ndash;</span> Decentralized oracle resolution</li>
<li><span class="status-pending" aria-hidden="true">&ndash;</span> Mainnet deployment</li>
<li><span class="status-pending" aria-hidden="true">&ndash;</span> Production monitoring</li>
<li><span class="status-pending" aria-hidden="true">&ndash;</span> TDF integration / SNAG-Bench scoring</li>
</ul>
<p style="color: #555; font-size: 0.85rem; margin-top: 1.5rem;">
These are the things that would need to exist before this becomes a real product. We're not there yet.
Expand Down Expand Up @@ -624,11 +624,11 @@ <h3 style="font-weight: 300; margin-bottom: 1rem;">
<a href="{{ url_for('marketing.demo') }}" class="btn btn-primary">
TRY THE DEMO
</a>
<a href="https://github.com/timepointai/proteus" target="_blank" class="btn btn-outline-light">
<i class="fab fa-github me-1"></i> CONTRIBUTE
<a href="https://github.com/timepointai/proteus" target="_blank" rel="noopener noreferrer" class="btn btn-outline-light">
<i class="fab fa-github me-1" aria-hidden="true"></i> CONTRIBUTE<span class="sr-only"> on GitHub (opens in new tab)</span>
</a>
<a href="https://docs.timepointai.com/products/proteus" target="_blank" class="btn btn-outline-light">
<i class="fas fa-book me-1"></i> READ THE DOCS
<a href="https://docs.timepointai.com/products/proteus" target="_blank" rel="noopener noreferrer" class="btn btn-outline-light">
<i class="fas fa-book me-1" aria-hidden="true"></i> READ THE DOCS<span class="sr-only"> (opens in new tab)</span>
</a>
</div>
<p style="color: #555; font-size: 0.75rem; margin-bottom: 0;">
Expand Down
Loading