Give every fastext destination a distinct mark; add skip-link, fix aria-label
All checks were successful
Deploy / deploy (push) Successful in 23s
All checks were successful
Deploy / deploy (push) Successful in 23s
Colours: "if the intent is to have them all different colors than lets have them all different colors." The locked eight only give five safe as full text (blue fails contrast, black's invisible on black), so the other three get their own treatments instead of sharing plain ink: Watch gets blue as a swatch-only accent (the button cap's colour, not the label), Activity gets an ordered-dither swatch (the other legal way to mark something without a ninth colour), and Settings alone keeps plain ink deliberately, as the one page with no live status of its own. Accessibility (items 1 and 3 from the design review, item 2 skipped per request — the header's download figure stays live and unmuted): - Added a skip-link, off-screen until focused, jumping past the 8-item top nav straight to each page's #main-content. - Renamed the nav's aria-label from "Fastext" (meaningless without the visual teletext context) to "Page navigation".
This commit is contained in:
parent
15936027de
commit
5dd49c505c
4 changed files with 79 additions and 28 deletions
|
|
@ -17,6 +17,12 @@
|
|||
</head>
|
||||
<body data-timezone="{{ timezone }}" data-url-base="{{ request.script_root }}"
|
||||
data-pages='{{ nav_items | tojson }}'>
|
||||
{#- Skip-link: every page but the index now opens with a full nav
|
||||
block before any real content — a keyboard or screen-reader visitor
|
||||
would otherwise tab through all eight destinations on every single
|
||||
visit. Off-screen until focused, then it's the first thing tabbing
|
||||
into the page reaches. -#}
|
||||
<a class="skip-link" href="#main-content">Skip to content</a>
|
||||
<!--
|
||||
THESIS: Media Centre is a broadcast information service, not a dashboard. It
|
||||
refuses the bordered-card grid every self-hosted dashboard ships, this one
|
||||
|
|
@ -56,7 +62,7 @@ provenance.
|
|||
index's own body already is the full nav. Everywhere else it leads,
|
||||
right under the header, since it's the only nav those pages carry. -#}
|
||||
{% set fastext_nav %}
|
||||
<nav class="fastext{{ '' if page == 'home' else ' fastext-top' }}" aria-label="Fastext">
|
||||
<nav class="fastext{{ '' if page == 'home' else ' fastext-top' }}" aria-label="Page navigation">
|
||||
{% for cls, key, num, label, href in fastext %}
|
||||
{% if num == here[1] %}
|
||||
<span class="fastext-here" aria-current="page"><span>{{ num }} {{ label }}</span></span>
|
||||
|
|
@ -71,7 +77,7 @@ provenance.
|
|||
|
||||
{% if page != 'home' %}{{ fastext_nav }}{% endif %}
|
||||
|
||||
<main class="tt-page">
|
||||
<main class="tt-page" id="main-content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue