commit 1d81efc1fd3aa3a71b4ef09076251559fcfb5702
parent af44e1a923cb7fba39098912a5c822909701f871
Author: Alexander Cobleigh <cblgh@cblgh.org>
Date: Wed, 12 Jan 2022 18:18:01 +0100
Thomasorus main (#13)
* Added header to group the home link and nav. Added aria label to link for screen readers
* Titles need to start with h1 and flow logically to h2, h3, etc...
* Inputs need labels to be voiced correctly, placeholders are not enough and they disappear when input is active. Added an aria-described on the password input to describe the requirements. Hardcoded styles are temporary.
* Changed some styles for the header and navigations. Same design, just more logical CSS.
* Grouped threads in main to allow screen readers users to jump directly to it. Moved the new thread to aside, as it's semantically aside from the list thread.
* Added main for semantics, added labels for inputs, h2 to h1.
* Inlined the logo with the correct size instead of img tag. Removed margin-bottom so the logo and the nav are aligned and centered.
* Added visually hidden class
* Added some semantic text and hid it to sighted readers with the visually hidden class. It will be audible by screen readers. Did the same for the label as the label may not be 100% needed.
* Added main, label for inputs, made the form vertical for readability. h2 to h1.
* Moved instructions before form. If you use a screen reader, you start filling the form before you have instructions. If you don't go below the form, you don't know why it exists.
* Added password instructions
* Added main and fixed title h2 to h1
* Error messages should not be in footer. Informations should be before form, as you can't know about it before filling the form.
* Changed div>p to article>p to align with the current design but keep semantics
* Added main, h2 to h1.
* Forgot to put everything into main, and article for this page
Co-authored-by: Thomasorus <contact@thomasorus.com>
Diffstat:
9 files changed, 192 insertions(+), 132 deletions(-)
diff --git a/html/about.html b/html/about.html
@@ -1,41 +1,45 @@
{{ template "head" . }}
-<h2> About </h2>
-<p>This forum is for and by the <a href="https://wiki.xxiivv.com/site/merveilles.html">Merveilles</a> community.</p>
-<p>The <a href="https://github.com/cblgh/cerca">forum software</a> itself was created from scratch by <a href="https://cblgh.org">cblgh</a> at the start of 2022, after a long time
-of pining for a new wave of forums hangs.</p>
+<main>
+ <article>
+ <h1> About </h1>
+ <p>This forum is for and by the <a href="https://wiki.xxiivv.com/site/merveilles.html">Merveilles</a> community.</p>
+ <p>The <a href="https://github.com/cblgh/cerca">forum software</a> itself was created from scratch by <a href="https://cblgh.org">cblgh</a> at the start of 2022, after a long time
+ of pining for a new wave of forums hangs.</p>
-<p>If you are from Merveilles: <a href="/register">register</a> an account. If you're a passerby, feel free to read the <a href="/">public threads</a>.</p>
+ <p>If you are from Merveilles: <a href="/register">register</a> an account. If you're a passerby, feel free to read the <a href="/">public threads</a>.</p>
-<h3>Code of conduct</h3>
-<p>As with all Merveilles spaces, this forum abides by the compact set out in the <a href="https://github.com/merveilles/Resources/blob/master/CONDUCT.md">Merveilles Code of Conduct</a>.</p>
+ <h2>Code of conduct</h2>
+ <p>As with all Merveilles spaces, this forum abides by the compact set out in the <a href="https://github.com/merveilles/Resources/blob/master/CONDUCT.md">Merveilles Code of Conduct</a>.</p>
-<h3>Forum syntax</h3>
-<p>Posts in the forum are made using <a href="https://en.wikipedia.org/wiki/Markdown#Examples">Markdown
- syntax</a>.</p>
-<p><b>**Bold text**</b> and <i>*italics*</i></p>
+ <h2>Forum syntax</h2>
+ <p>Posts in the forum are made using <a href="https://en.wikipedia.org/wiki/Markdown#Examples">Markdown
+ syntax</a>.</p>
+ <p><b>**Bold text**</b> and <i>*italics*</i></p>
-<ul>
- <li>* lists</li>
- <li>* like </li>
- <li>* this </li>
-</ul>
+ <ul>
+ <li>* lists</li>
+ <li>* like </li>
+ <li>* this </li>
+ </ul>
-<p><blockquote>> Blockquote</blockquote></p>
+ <p><blockquote>> Blockquote</blockquote></p>
-<p><code>`typewriter text`</code></p>
+ <p><code>`typewriter text`</code></p>
-<pre><code>```
-blocks of
-code like
-this
-```
-</code></pre>
+ <pre><code>```
+ blocks of
+ code like
+ this
+ ```
+ </code></pre>
-<p>Create links like <code>[this](url)</code>, and embed images like: <code></code>. Note how the image
-syntax's exclamation mark precedes the regular link syntax.</p>
+ <p>Create links like <code>[this](url)</code>, and embed images like: <code></code>. Note how the image
+ syntax's exclamation mark precedes the regular link syntax.</p>
-<pre><code>this is one paragraph.
-this belongs to the same paragraph.
+ <pre><code>this is one paragraph.
+ this belongs to the same paragraph.
-this is a new paragraph</code></pre>
+ this is a new paragraph</code></pre>
+ </article>
+</main>
{{ template "footer" . }}
diff --git a/html/head.html b/html/head.html
@@ -3,7 +3,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forum — {{ .Title }}</title>
@@ -17,17 +17,21 @@
max-width: 50rem;
font-family: sans-serif;
}
+ header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ label {
+ display: block;
+ }
#logo {
width: 48px;
height: 48px;
display: block;
}
- nav {
- float: right;
- }
ul[type="menu"] {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
+ display: flex;
list-style-type: none;
margin: 0;
padding: 0;
@@ -40,8 +44,8 @@
blockquote { padding-left: 1rem; border-left: 3px solid black }
div { margin-bottom: 2rem; }
textarea { min-height: 10rem; }
- div > p:first-of-type, form div, label { margin-bottom: 0; }
- h1 a:visited,
+ article > p:first-of-type, form div, label { margin-bottom: 0; }
+ h1 a:visited,
a:not([class]) {
color: black;
}
@@ -60,6 +64,16 @@
.post-container { display: grid; max-width: 30rem; margin-top: 1rem; }
body { padding: 2rem; background: wheat; }
* { margin-bottom: 1rem; }
+
+ .visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ }
</style>
<!-- <link href="/assets/style.css" rel="stylesheet"> -->
@@ -86,18 +100,27 @@
<!-- <link rel="search" type="application/opensearchdescription+xml" title="" href="/assets/opensearch.xml"> -->
</head>
<body>
- <nav>
- <ul type="menu">
- <li><a href="/about">about</a></li>
- {{ if .LoggedIn }}
- <li><a href="/logout">logout</a></li>
- {{ else }}
- <li><a href="/login">login</a></li>
- {{ end }}
- </ul>
- </nav>
+ <header>
+ <a style="margin-bottom: 0; height: 48px;" href="/" aria-label="Home">
+ <svg aria-hidden="true" style="margin-bottom: 0;" width="48" height="48" fill="black" stroke="none" viewBox="60 60 200 200" xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <path d="M185,65 A60,60 0 0,0 125,125 L185,125 Z M125,245 A60,60 0 0,0 185,185 L125,185 Z M95,125 A30,30 0 0,1 125,155 A30,30 0 0,1 95,185 A30,30 0 0,1 65,155 A30,30 0 0,1 95,125 Z M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 Z M215,125 A30,30 0 0,1 245,155 A30,30 0 0,1 215,185 A30,30 0 0,1 185,155 A30,30 0 0,1 215,125 "/>
+ <path d="M125,65 A60,60 0 0,1 185,125 L125,125 Z M185,245 A60,60 0 0,1 125,185 L185,185 Z M65,65 A60,60 0 0,1 125,125 L65,125 Z M65,245 A60,60 0 0,0 125,185 L65,185 Z M245,65 A60,60 0 0,0 185,125 L245,125 Z M245,245 A60,60 0 0,1 185,185 L245,185 Z"/>
+ </g>
+ </svg>
+ </a>
+ <nav>
+ <ul type="menu">
+ <li><a href="/about">about</a></li>
+ {{ if .LoggedIn }}
+ <li><a href="/logout">logout</a></li>
+ {{ else }}
+ <li><a href="/login">login</a></li>
+ {{ end }}
+ </ul>
+ </nav>
+ </header>
+
+
- <a href="/">
- <img src="/assets/merveilles.svg" id="logo">
- </a>
{{ end }}
diff --git a/html/index.html b/html/index.html
@@ -1,8 +1,12 @@
{{ template "head" . }}
-{{ range $index, $thread := .Data.Threads }}
-<h2><a href="/thread/{{$thread.Slug}}">{{ $thread.Title }}</a></h2>
-{{ end }}
+<main>
+ {{ range $index, $thread := .Data.Threads }}
+ <h2><a href="/thread/{{$thread.Slug}}">{{ $thread.Title }}</a></h2>
+ {{ end }}
+</main>
{{ if .LoggedIn }}
-<p> <a href="/thread/new">Start a new thread</a></p>
+<aside>
+ <p> <a href="/thread/new">Start a new thread</a></p>
+</aside>
{{ end }}
{{ template "footer" . }}
diff --git a/html/login-component.html b/html/login-component.html
@@ -1,9 +1,16 @@
{{ define "login-component" }}
<form method="post" action="/login">
<div style="display: grid;">
- <input type="text" placeholder="username" name="username">
- <input type="password" placeholder="password" name="password">
- <input type="submit" value="Enter">
+ <div>
+ <label for="username">Username:</label>
+ <input type="text" name="username" id="username">
+ </div>
+ <div>
+ <label for="password">Password:</label>
+ <input type="password" name="password" id="password" style="margin-bottom:0;" aria-describedby="password-help">
+ <div><small id="password-help">Must be at least 9 characters long.</small></div>
+ </div>
+ <input type="submit" value="Enter" style="margin-top:1rem;">
</div>
</form>
{{ end }}
diff --git a/html/login.html b/html/login.html
@@ -1,12 +1,14 @@
{{ template "head" . }}
-<h2> Login </h2>
-<div style="max-width: 20rem">
-{{ template "login-component" . }}
-</div>
-<p>This forum is for the <a href="https://wiki.xxiivv.com/site/merveilles.html">Merveilles</a> community. Don't have an account yet? <a href="/register">Register</a> one.</p>
+<main>
+ <h1>Login</h1>
+ <p>This forum is for the <a href="https://wiki.xxiivv.com/site/merveilles.html">Merveilles</a> community. Don't have an account yet? <a href="/register">Register</a> one.</p>
+ <div style="max-width: 20rem">
+ {{ template "login-component" . }}
+ </div>
+ {{ if .Data.FailedAttempt }}
+ <p><b>Failed login attempt:</b> incorrect password, wrong username, or a non-existent user.</p>
+ {{ else if .LoggedIn }}
+ <p> You are already logged in. Would you like to <a href="/logout">log out</a>?</p>
+ {{ end }}
+</main>
{{ template "footer" . }}
-{{ if .Data.FailedAttempt }}
-<p> <b>Failed login attempt:</b> incorrect password, wrong username, or a non-existent user.</p>
-{{ else if .LoggedIn }}
-<p> You are already logged in. Would you like to <a href="/logout">log out</a>?</p>
-{{ end }}
diff --git a/html/new-thread.html b/html/new-thread.html
@@ -1,10 +1,14 @@
{{ template "head" . }}
-<h2>Create thread</h2>
- <form method="POST">
- <div class="post-container" >
- <input required name="title" type="text" placeholder="Title">
- <textarea required name="content" placeholder="Tabula rasa"></textarea>
- <button type="submit">Create</button>
- </div>
- </form>
+<main>
+ <h1>Create thread</h1>
+ <form method="POST">
+ <div class="post-container" >
+ <label for="title">Title:</label>
+ <input required name="title" type="text" id="Title">
+ <label for="content">Content:</label>
+ <textarea required name="content" id="content" placeholder="Tabula rasa"></textarea>
+ <button type="submit">Create</button>
+ </div>
+ </form>
+</main>
{{ template "footer" . }}
diff --git a/html/register-success.html b/html/register-success.html
@@ -1,16 +1,18 @@
{{ template "head" . }}
-<h2> Register </h2>
-<p>You now have an account! Welcome. Visit the <a href="/">index</a> to read and reply to threads, or start a new one.</p>
-<p>There's just one more thing: <b>save the key displayed below</b>. It is a <a href="https://en.wikipedia.org/wiki/Public-key_cryptography">keypair</a>
-describing your forum identity, with a private part that only you know; the forum only stores the public portion.</p>
+<main>
+ <h1>Register</h1>
+ <p>You now have an account! Welcome. Visit the <a href="/">index</a> to read and reply to threads, or start a new one.</p>
+ <p>There's just one more thing: <b>save the key displayed below</b>. It is a <a href="https://en.wikipedia.org/wiki/Public-key_cryptography">keypair</a>
+ describing your forum identity, with a private part that only you know; the forum only stores the public portion.</p>
-<p>With this keypair you will be able to reset your account if you ever lose your password—and without having to share your email (or require
-email infrastructure on the forum's part).</p>
-<p><i><b>This keypair will only be displayed once</i></b></p>
-<code>
-<pre class="selectable">
-{{ .Data.Keypair }}
-</pre>
-</code>
+ <p>With this keypair you will be able to reset your account if you ever lose your password—and without having to share your email (or require
+ email infrastructure on the forum's part).</p>
+ <p><i><b>This keypair will only be displayed once</i></b></p>
+ <code>
+ <pre class="selectable">
+ {{ .Data.Keypair }}
+ </pre>
+ </code>
+</main>
{{ template "footer" . }}
diff --git a/html/register.html b/html/register.html
@@ -1,44 +1,54 @@
{{ template "head" . }}
-<h2> Register </h2>
-<form method="post">
- <input type="text" required placeholder="username" name="username">
- <input type="password" minlength="9" required placeholder="password" name="password">
- <input type="text" required placeholder="verification link" name="verificationlink">
- <input type="hidden" name="verificationcode" value="{{.Data.VerificationCode}}">
- <div>
- <div>
- <input type="checkbox" required id="coc">
- <label for="coc">I have refreshed my memory of the <a target="_blank" href="https://github.com/merveilles/Resources/blob/master/CONDUCT.md">Merveilles Code of Conduct</a></label>
- </div>
+<main>
+ <h1>Register</h1>
+
+ <p>This forum is for the <a href="https://wiki.xxiivv.com/site/merveilles.html">Merveilles</a> community. To register, you need to either belong to the <a href="https://webring.xxiivv.com">Merveilles Webring</a> or the
+ <a href="https://merveilles.town">Merveilles Fediverse instance</a>.
+ </p>
+
+ <p>Your verification code is <b>{{ .Data.VerificationCode }}</b></p>
+ <details>
+ <summary>Verification instructions</summary>
+ <p>You can use either your mastodon profile or your webring site to verify your registration.</p>
+ <ul>
+ <li><b>Mastodon:</b> temporarily add a new metadata item to <a
+ href="https://merveilles.town/settings/profile">your profile</a> containing the verification code
+ displayed above. Pass your profile as the verification link.</li>
+ <li><b>Webring site:</b> Upload a plaintext file somewhere on your webring domain (incl. subdomain) containing
+ the verification code from above. Pass the link to the uploaded file as the verification link (make sure
+ it is viewable in a browser).</li>
+ </ul>
+ </details>
+
+ <form method="post">
+ <label for="username">Username:</label>
+ <input type="text" required id="username" name="username">
+ <label for="password">Password:</label>
+ <input type="password" minlength="9" required id="password" name="password" aria-describedby="password-help" style="margin-bottom:0;">
+ <div style="margin-bottom:1rem;"><small id="password-help">Must be at least 9 characters long.</small></div>
+ <label for="verificationlink">Verification link:</label>
+ <input type="text" required id="verification link" name="verificationlink">
+ <input type="hidden" name="verificationcode" value="{{.Data.VerificationCode}}">
<div>
- <input type="checkbox" required id="coc2">
- <label for="coc2">Yes, I have actually <a target="_blank" href="https://github.com/merveilles/Resources/blob/master/CONDUCT.md">read it</a></label>
+ <div>
+ <input type="checkbox" required id="coc">
+ <label for="coc" style="display: inline-block;">I have refreshed my memory of the <a target="_blank" href="https://github.com/merveilles/Resources/blob/master/CONDUCT.md">Merveilles Code of Conduct</a></label>
+ </div>
+ <div>
+ <input type="checkbox" required id="coc2" >
+ <label style="display: inline;" for="coc2">Yes, I have actually <a target="_blank" href="https://github.com/merveilles/Resources/blob/master/CONDUCT.md">read it</a></label>
+ </div>
</div>
- </div>
- <input type="submit" value="Register">
-</form>
+ <input type="submit" value="Register">
+ </form>
+
-<p>This forum is for the <a href="https://wiki.xxiivv.com/site/merveilles.html">Merveilles</a> community. To register, you need to either belong to the <a href="https://webring.xxiivv.com">Merveilles Webring</a> or the
-<a href="https://merveilles.town">Merveilles Fediverse instance</a>.
-</p>
-{{ if .Data.ErrorMessage }}
-<div>
- <p><b> {{ .Data.ErrorMessage }} </b></p>
-</div>
-{{ end }}
+ {{ if .Data.ErrorMessage }}
+ <div>
+ <p><b> {{ .Data.ErrorMessage }} </b></p>
+ </div>
+ {{ end }}
-<p>Your verification code is <b>{{ .Data.VerificationCode }}</b></p>
-<details>
- <summary>Verification instructions</summary>
- <p>You can use either your mastodon profile or your webring site to verify your registration.</p>
- <ul>
- <li><b>Mastodon:</b> temporarily add a new metadata item to <a
- href="https://merveilles.town/settings/profile">your profile</a> containing the verification code
- displayed above. Pass your profile as the verification link.</li>
- <li><b>Webring site:</b> Upload a plaintext file somewhere on your webring domain (incl. subdomain) containing
- the verification code from above. Pass the link to the uploaded file as the verification link (make sure
- it is viewable in a browser).</li>
- </ul>
-</details>
+</main>
{{ template "footer" . }}
diff --git a/html/thread.html b/html/thread.html
@@ -1,19 +1,23 @@
{{ template "head" . }}
- <h2>{{ .Data.Title }}</h2>
+<main>
+ <h1>{{ .Data.Title }}</h1>
{{ range $index, $post := .Data.Posts }}
- <div>
- <p ><span><b>{{ $post.Author }}</b></span><span style="float: right;"><time datetime="{{ $post.Publish | formatDate }}">{{
- $post.Publish | formatDateRelative }}</time></span></p>
- {{ $post.Content }}
- </div>
+ <article>
+ <div>
+ <p><span><b>{{ $post.Author }}</b><span class="visually-hidden"> responded:</span></span><span style="float: right;"><time datetime="{{ $post.Publish | formatDate }}">{{ $post.Publish | formatDateRelative }}</time></span></p>
+ {{ $post.Content }}
+ </article>
{{ end }}
{{ if .LoggedIn }}
- <div>
+ <section aria-label="Respond into this thread">
<form method="POST">
<div class="post-container" >
- <textarea required name="content" placeholder="Tabula rasa"></textarea>
+ <label class="visually-hidden" for="content">Your answer:</label>
+ <textarea required name="content" id="content" placeholder="Tabula rasa"></textarea>
<button type="submit">Post</button>
</div>
</form>
+ </section>
{{ end }}
+</main>
{{ template "footer" . }}
